《微信小程序demo开发》第二部分-基于云函数的邮箱发送

本文介绍了微信小程序开发中使用云函数和SMTP发送邮件的完整流程。首先需在微信公众平台注册账号并完成小程序备案，然后创建云函数模板工程，配置云开发环境。通过Node.js环境安装nodemailer包实现邮件发送功能，详细说明了SMTP服务开启和授权码获取方法。接着编写云函数代码并上传至云端，更新表单JS逻辑实现邮件内容提交。最后将代码上传至管理平台等待审核上线。文章为小程序开发者提供了从云函数配

plmm__

669人浏览 · 2026-01-27 21:11:52

plmm__ · 2026-01-27 21:11:52 发布

一、前言

书接上回，上一篇已经编写好了页面逻辑，本篇文章主要分享微信开发平台的云函数使用，以及使用邮箱的 SMTP 功能发送邮件，最后实现小程序的上线。

《微信小程序demo开发》第一部分-编写页面逻辑-CSDN博客https://blog.csdn.net/plmm__/article/details/157319787?spm=1011.2415.3001.5331

二、云平台准备

因为需要上线运营，所以需要到 微信公众平台 注册账号：

https://mp.weixin.qq.com/https://mp.weixin.qq.com/

如果有确定好的小程序各项信息，可以在开发前就做好平台的信息填写和小程序备案，因为这个需要几个工作日来审核：

三、本地环境准备

1、新建云函数模板工程

由于测试号无法使用云函数功能，本次需要新建后端服务为 微信云开发 的模板：

这样就省去了配置文件的操作，手动创建云函数文件夹也行，不过很多功能我也不太清楚，所以建议读者如果是和我一样的新手，都按模板来，专注逻辑实现本身即可。

新建的目录结构如下，相比上一章多了云函数文件夹 cloudfunctions：

2、云开发环境配置

点击上方云图标，配置云环境：

初次进入会出现一个付费界面，稍等一会会弹出一个弹窗，提示免费开发一个月的使用期限，同意即可。默认的环境为 cloud1。

返回到开发目录界面，右键 cloudfunctions 目录，选择新建的云环境：

实现邮箱发送相对基础，直接删除模板的 quickstartFunctions 文件夹，右键 cloudfunctions 目录，选择 新建 Node.js 云函数：

新建 send_mail 函数，回车后会自动创建对应的配置文件：

3、本地 Node.js 环境配置

云函数本质上是一个 Node.js 项目，需要独立的 package.json 来管理依赖，而安装各个依赖需要 npm 命令行工具来管理，邮箱发送的功能就需要 npm 来安装。

安装 Node.js 环境地址：

下载 | Node.js 中文网https://nodejs.cn/download/我下载的压缩包，免安装，需要手动添加环境变量，读者也可以选择安装包，更方便：

四、云函数编写

微信云函数实现流程：

1. 本地开发
   ↓
2. npm init → 创建 package.json
   ↓
3. npm install nodemailer → 本地安装测试
   ↓
4. 编写业务代码，本地测试
   ↓
5. 上传到云端（只传代码 + package.json）
   ↓
6. 云端读取 package.json
   ↓
7. 云端自动 npm install
   ↓
8. 云函数正常运行

首先是编写 index.js 文件，执行 npm init 就会根据 index.js 中的依赖来生成 package.json，用于云端自动安装，但是本地任需要手动安装，以下是执行流程：

1、编写 index.js 文件


const cloud = require('wx-server-sdk');
const nodemailer = require("nodemailer");

cloud.init({
  env: 'cloud1'
})

// 云函数入口函数
exports.main = async (event, context) => {
  mailOptions.subject = event.biaoti;
  mailOptions.html = event.neirong;
  const info = await transporter.sendMail(mailOptions);
  return info
}
// 云函数入口文件
var transporter = nodemailer.createTransport({
  host: "smtp.qq.com",
  port: 465,               // SMTP 端口
  secureConnection: true,            // 使用 SSL
  auth: {
    user: 'xxx@qq.com',   // 发邮件邮箱
    pass: '******'    // 授权码
  }
});
var mailOptions = {
  from: 'xxx@qq.com',   // 发件地址
  to: 'xxx@qq.com'    // 收件列表
};

这个文件是云函数的具体实现逻辑，代码整体不难理解。首先是导入两个包：

wx-server-sdk 是云函数与微信云环境通信的桥梁，必须安装；

Nodemailer 是一个用于 Node.js 应用程序发送电子邮件的流行、功能完整的包。

然后是选择要使用的云环境：

cloud.init({env: 'cloud1'})

最后是云函数的编写，从 event 读取邮件发送的标题和内容，这个来自于表单的填写，后面我会贴出源码。随后通过 nodemailer 包的 sendMail 函数来实现邮件的发送。

邮箱和授权码在开启 SMTP 后填写。

2、开启发送方邮箱的 SMTP

邮件传输的方式有多种，例如 SMTP、Sendmail、AWS SES 等，我选择最常用的 SMTP。这个 SMTP 一般需要手动开启，以我使用的 QQ 邮箱为例，登录发送方的邮箱，点击：设置-账号与安全-安全设置。

根据提示开启服务即可，有免费的发送额度，一般个人使用是完全足够的。开启成功后，会有一串授权码，填写到上面 index.js 文件的 pass 字段。然后根据需要，填写发送发和接收方的邮箱账号。未来考虑安全性，不建议 index.js 内明文存储，目前测试无所谓。

host 字段根据邮箱的公司来选择，qq邮箱的发送为 smtp.qq.com，端口 465。

3、npm 构建本地环境

使用 CMD 或 powershell 进入云环境的目录，npm 初始化：

npm init -y

-y 省略确认。

然后安装 wx-server-sdk 和 Nodemailer 两个包：

npm install wx-server-sdk
npm install nodemailer

4、上传云函数至云环境

右键云函数文件夹 send_mail，选择：上传并部署：云端安装依赖（不上传 node_modules）

这样可以加快上传速度，云端自行安装依赖。

五、更新表单的 JS 逻辑

基于上一篇已经搭建好的页面框架，新增了邮件内容填写，更新至 form1.js 文件：

var app = getApp();
var util = require('../../utils/util.js');
Page({
  data: {
    name: '',
    phone: '',
    dept: '',
  },

  onLoad: function (options) {
    this.setData({
      name: app.datalist?.username || '',
      phone: app.datalist?.phonenumber || '',
      dept: app.datalist?.deptname || ''
    });
  },

  formSubmit: function (e) {
    const {
      name,
      danwei,
      phone,
      neirong
    } = e.detail.value;
    if (!name.trim()) {
      wx.showModal({
        title: '输入错误',
        content: '请输入姓名！'
      });
      return;
    }
    if (!danwei.trim()) {
      wx.showModal({
        title: '输入错误',
        content: '请输入单位！'
      });
      return;
    }
    if (!phone.trim()) {
      wx.showModal({
        title: '输入错误',
        content: '请输入手机号！'
      });
      return;
    }
    if (!/^1[3-9]\d{9}$/.test(phone)) {
      wx.showModal({
        title: '输入错误',
        content: '请输入有效的手机号！'
      });
      return;
    }
    if (!neirong.trim()) {
      wx.showModal({
        title: '输入错误',
        content: '请输入诉求内容！'
      });
      return;
    }

    const hl = '<b>姓 名: </b>' + name + '<br><b>单 位: </b>' + danwei + '<br><b>电 话: </b>' + phone + '<br><b>诉求内容: </b>' + neirong;
    const time = util.formatTime(new Date());
    //console.log(time)
    const bt = '来自职工' + name + '的信件' + time

    wx.cloud.callFunction({
      // 云函数名称
      name: 'send_mail',
      // 传给云函数的参数
      data: {
        biaoti: bt,
        neirong: hl
      },
      success: res => {
        wx.showModal({
          title: '发送成功',
          content: '诉求内容已经发送至领导信箱！',
          showCancel: false,
          success: () => wx.redirectTo({
            url: '../index/index'
          })
        });
      },
      fail: err => {
        console.error('发送失败:', err);
        wx.showModal({
          title: '发送失败',
          content: '信息未发送成功，请稍后重试！'
        });
      }
    })
  }
})

至此，开发部分基本结束，可以点击右上角的预览和真机调试使用小程序，发送功能应该是可以正常发送和接收的。