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

用户青果 發表於 2021-6-9 10:30:00

1、发件箱要开通POP3/SMTP服务
步骤：进入QQ邮箱，点击设置--账户--开启
<h3><img src="https://img2020.cnblogs.com/blog/2254149/202106/2254149-20210608174109828-1746833468.png"></h3>
 
 <img src="https://img2020.cnblogs.com/blog/2254149/202106/2254149-20210608174123629-539550617.png">
 
 <img src="https://img2020.cnblogs.com/blog/2254149/202106/2254149-20210608174146635-819793715.png">
 
 开启服务后，获取授权码。
2、在注册后的小程序下开通云开发、创建环境
此步骤在微信开发者工具下操作。注意：要用注册过的APPID，测试号不行（无云开发环境）
1）在uni-app项目的mainifest.json中配置云函数路径
<img src="https://img2020.cnblogs.com/blog/2254149/202106/2254149-20210608175448037-1024991524.png">
 
 
 2）创建/cloudfunctions 目录（uni-app不会主动生成，需手动创建，另外，此文件夹不要为空，可随便加个文件进去）
<img src="https://img2020.cnblogs.com/blog/2254149/202106/2254149-20210608175548385-2068374260.png">
 
 3）初始化云环境
在 App.vue的 onLanuch 生命周期中初始化
<div class="cnblogs_code" style="text-align: left">
<pre>wx.cloud.init({
 // env 参数说明：
 // env 参数决定接下来小程序发起的云开发调用（wx.cloud.xxx）会默认请求到哪个云环境的资源
 // 此处请填入环境 ID, 环境 ID 可打开云控制台查看
 // 如不填则使用默认环境（第一个创建的环境）
 env: "XXXXXX",
 traceUser: true,
 })</pre>
</div>
配置好后运行代码，运行后会在 /unpackage/dist/dev 中生成微信小程序代码。但我们先前建的 /cloudfunctions 文件夹并未打包进去，
<div class="cnblogs_code">
<pre>这是因为新建的 /cloudfunctions 并不属于uni-app默认的目录结构，默认不会被打包。 解决思路：通过webpack包管理工具的复制插件将/cloudfunctions 复制到项目包中。</pre>
</div>
<img src="https://img2020.cnblogs.com/blog/2254149/202106/2254149-20210609093427951-1301041797.png">
 针对以上打包的小程序代码包中无/cloudfunctions 文件夹的问题，按以下步骤处理
首先，先安装 copy-webpack-plugin，即用命令行窗口打开项目根目录，在命令窗口输入
<div class="cnblogs_code">
<pre>npm install -save copy-webpack-plugin@5.1.1 //注：请使用版本5，版本6报错</pre>
</div>
其次，在uni-app项目的根目录下创建vue.config.js文件
<div class="cnblogs_code">
<pre>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')
 }
 ])
 ]
}
}</pre>
</div>
配置好运行代码，发现 /cloudfunctions 文件夹已经包含在里面了
4）建立云函数
运行代码到微信开发者工具中，发现已经建立了我们之前建立的云文件夹（有云符号和环境ID或环境名）。右击 cloudfunctions 文件夹，选择新建 Node.js 云函数，名为Email(可自行命名)
随后，右键Email选择上传并部署：云端安装依赖（此过程需要时间，可打开云开发控制台在云函数项下查看部署状态）
<img src="https://img2020.cnblogs.com/blog/2254149/202106/2254149-20210609100411511-1193032670.png">
 
 
 若部署失败，可以先把部署的项目删除后再重新部署。
部署成功后，复制Email文件夹到HBuilder的pages同层目录下（对应你在mainifest.json中配置云函数路径），比如我就放在“cloudfunctions”文件夹下
现在，可以在HBuildder里面编写云函数了。
3、编写云函数发送邮件
 在HBuilder的“cloudfunctions”文件夹下的Email文件夹的index.js文件里，编写以下代码
<div class="cnblogs_code">
<pre>// 云函数入口文件
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;

}</pre>
</div>
注意： 要用npm安装依赖包nodemailer （电脑首先要安装Node工具），选择云函数文件夹Email，即cloudfunctions文件夹下的Email文件夹（在外部目录下安装，调用云函数失败）右键选择在终端打开，在打开的命令窗口输入
<div class="cnblogs_code">
<pre>npm install nodemailer</pre>
</div>
等待类库安装，安装成功后会显示nodemailer的版本号，此依赖包安装后Email文件夹下出现以下文件
<img src="https://img2022.cnblogs.com/blog/2254149/202202/2254149-20220211120926746-1473363954.jpg">
 
最后，编写代码后记得上传并部署到云端
4、调用云函数发送邮件
你可以在你想要调用云函数的方法中，编写以下代码
<div class="cnblogs_code">
<pre>wx.cloud.callFunction({
 name: "Email",
 //js携带参数传到云端
 data:{
 _text:this.textMsg, //邮件内容
 _recipients:"XXXXXX@qq.com", //收件人
 },
 success(res) {
 console.log("发送成功", res)
 },
 fail(res) {
 console.log("发送失败", res)
 }
 })</pre>
</div>
随后邮箱就可以收到信息啦。
 
 
 
 
此随笔是自己在做项目时第一次用到小程序云开发，总结一下学习内容，参考以下文章
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
  
来源：https://www.cnblogs.com/debstu/p/14863941.html

頁: [1]

琼殿技术论坛's Archiver

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