uni-app小程序云开发发送邮件

时间：2024-03-06 09:29:26

1、发件箱要开通POP3/SMTP服务

步骤：进入QQ邮箱，点击设置--账户--开启

 

 

 

 

 

 开启服务后，获取授权码。

2、在注册后的小程序下开通云开发、创建环境

此步骤在微信开发者工具下操作。注意：要用注册过的APPID，测试号不行（无云开发环境）

1）在uni-app项目的mainifest.json中配置云函数路径

 

 

 2）创建/cloudfunctions 目录（uni-app不会主动生成，需手动创建，另外，此文件夹不要为空，可随便加个文件进去）

 

 3）初始化云环境

在 App.vue的 onLanuch 生命周期中初始化

wx.cloud.init({
                    // env 参数说明：
                    //   env 参数决定接下来小程序发起的云开发调用（wx.cloud.xxx）会默认请求到哪个云环境的资源
                    //   此处请填入环境 ID, 环境 ID 可打开云控制台查看
                    //   如不填则使用默认环境（第一个创建的环境）
                    env: "XXXXXX",
                    traceUser: true,
                })

配置好后运行代码，运行后会在 /unpackage/dist/dev 中生成微信小程序代码。但我们先前建的 /cloudfunctions 文件夹并未打包进去，

这是因为新建的 /cloudfunctions 并不属于uni-app默认的目录结构，默认不会被打包。
解决思路：通过webpack包管理工具的复制插件将/cloudfunctions 复制到项目包中。

 针对以上打包的小程序代码包中无/cloudfunctions 文件夹的问题，按以下步骤处理

首先，先安装 copy-webpack-plugin，即用命令行窗口打开目录，在命令窗口输入

npm install -save copy-webpack-plugin@5.1.1    //注：请使用版本5，版本6报错

其次，在uni-app项目的根目录下创建vue.config.js文件

const path = require(\'path\')
const CopyWebpackPlugin = require(\'copy-webpack-plugin\')

module.exports = {
    configureWebpack: {
        plugins: [
            new CopyWebpackPlugin([
                {
                    from: path.join(__dirname, \'cloudfunctions\'),
                    to: path.join(__dirname, \'unpackage/dist\', process.env.NODE_ENV === \'development\' ? \'dev\' : \'build\', process.env.UNI_PLATFORM, \'cloudfunctions\')
                }
            ]) 
        ]
    } 
}

配置好运行代码，发现 /cloudfunctions 文件夹已经包含在里面了

4）建立云函数

运行代码到微信开发者工具中，发现已经建立了我们之前建立的云文件夹（有云符号和环境ID或环境名）。右击 cloudfunctions 文件夹，选择新建 Node.js 云函数，名为Email(可自行命名)

随后，右键Email选择上传并部署：云端安装依赖（此过程需要时间，可打开云开发控制台在云函数项下查看部署状态）

 

 

 若部署失败，可以先把部署的项目删除后再重新部署。

部署成功后，复制Email文件夹到HBuilder的pages同层目录下（对应你在mainifest.json中配置云函数路径）

现在，可以在HBuildder里面编写云函数了。

3、编写云函数发送邮件

 在HBuilder的Email文件夹的index.js文件里，编写以下代码

// 云函数入口文件
const cloud = require(\'wx-server-sdk\')

cloud.init({
    env: \'XXXXXXXXXXX\' //云开发环境ID
})

//自己的代码start
//引入发送邮件的类库
var nodemailer = require(\'nodemailer\')
//创建一个SMTP客户端配置
var config = {
    host:\'smtp.qq.com\',   //网易163邮箱  smtp.163.com
    port:465,   //网易邮箱端口 25
    auth:{
        user:\'XXXXXXXX@qq.com\',
        pass:\'XXXXXXX\'    //授权码
    }  
};
//创建一个SMTP客户端对象
var transporter = nodemailer.createTransport(config); 
//end


// 云函数入口函数
exports.main = async (event, context) => {
  let _text
  let _recipients
  const wxContext = cloud.getWXContext()
  //此处接受从前端js传过来的数据
  _text = event._text
  _recipients = event._recipients
  console.log("参数："+_text+"："+_recipients)
  
  //创建一个邮件对象
  var mail = {
      //发件人
      from:\'来自XX <XXXXXXXX@qq.com>\',
      //主题
      subject:\'您有新消息啦\',
      //收件人
      to:_recipients,   //接收人
      //邮件内容，text或HTML格式
      text:_text,   //邮件内容   //可以是链接，也可以是验证码
  };
  
  let res = await transporter.sendMail(mail);
  return res;
  
}

注意： 要用npm安装依赖包nodemailer （电脑首先要安装Node工具），选择云函数文件夹Email（在外部目录下安装，调用云函数失败）右键选择在终端打开，在打开的命令窗口输入

npm install nodemailer

等待类库安装，安装成功后会显示nodemailer的版本号

最后，编写代码后记得上传并部署到云端

4、调用云函数发送邮件

你可以在你想要调用云函数的方法中，编写以下代码

wx.cloud.callFunction({
                    name: "Email",   
                    //js携带参数传到云端
                    data:{
                        _text:this.textMsg,   //邮件内容
                        _recipients:"XXXXXX@qq.com",   //收件人
                    },
                    success(res) {
                        console.log("发送成功", res)
                    },
                    fail(res) {
                        console.log("发送失败", res)
                    }
                })

随后邮箱就可以收到信息啦。

 

 

 

 

此随笔是自己在做项目时第一次用到小程序云开发，总结一下学习内容，参考以下文章

https://blog.csdn.net/qiushi_1990/article/details/98660081

https://developers.weixin.qq.com/community/minihome/doc/000ee4d6158da04fecaa90f2951c00

https://blog.csdn.net/YNEWA/article/details/106019518?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-0&spm=1001.2101.3001.4242

 

相关文章