资讯专栏INFORMATION COLUMN

巧用小程序·云开发实现邮件发送功能丨实战

sixgo / 1516人阅读

摘要:七调用云函数发送邮件我们在文件里写一个按钮,当点击这个按钮时就发送邮件。到这里我们就完整的实现了微信小程序云开发使用云函数发送邮件的功能了。

先看效果图:

通过上面的日志,可以看出我们是158开头的邮箱给250开头的邮箱发送邮件,下面是成功接收到的邮件。

准备工作

1、qq邮箱一个

2、开通你的qq邮箱的授权码(会具体讲解)

3、注册自己的小程序(因为只有注册的小程序才能使用云开发)

4、电脑要安装node(会用到npm命令行)

5、编写小程序代码

一、准备一个QQ邮箱,并启动SMTP服务

进入qq邮箱以后:

1、点击设置,然后点击账户

2、开启POP3/SMTP服务,获取授权码

具体操作可以看官方文档,官方文档有具体的讲解,这里我就不多说了。
官方文档:https://dwz.cn/SJCibDEi
我们获取的授权码如下图。请保存好这个授权码,我们后面发送邮件时会用到。

二、注册小程序获取appid,创建一个小程序

关于小程序的注册和创建就不在此赘述,有需要的同学可以参照官方文档:

https://dwz.cn/HpcWynVz

下图是我们创建好的小程序。

代码很简单,就只有一个页面,页面上就一个按钮,我们点击这个按钮的时候实现邮件的发送。

三、初始化云开发,创建发送邮件的云函数

关于云开发初始化我这里也不在做具体讲解了,感兴趣或者不会的同学,可以去翻看腾讯云云开发公众号内菜单【技术交流-视频教程】中的教学视频。

初始化云开发环境时,需要注意以下几点:

1、一定要是注册的小程序有appid才可以使用云开发
2、一定要在app.js里初始化云开发环境id

3、在project.config.json里配置云函数目录,如下图箭头所示

四、创建云函数 sendEmail

1、右键cloud文件,新建云函数:

这个函数名你可以随便起,只要是英文,并且调用的时候记得不要写错就行。我这里就用sendEmail。

2、创建完以后,右键sendEmail选择在终端里打开:

这里我们需要用npm安装一个依赖包 nodemailer 使用npm安装依赖包需要用到node,至于node的安装大家自行百度,一大堆的讲解文章。

3、在打开的命令行窗口里输入 npm install nodemailer:

4、等待 nodemailer类库的安装

5、安装成功时,您能看到nodemailer的版本号

五、编写发送邮件的核心代码

这里一定要注意填写你自己的qq邮箱的授权码:

代码里都有注释,直接把代码给大家贴出来。

const cloud = require("wx-server-sdk")
cloud.init()
//引入发送邮件的类库
var nodemailer = require("nodemailer")
// 创建一个SMTP客户端配置
var config = {
  host: "smtp.qq.com", //网易163邮箱 smtp.163.com
  port: 465, //网易邮箱端口 25
  auth: {
    user: "1587072557@qq.com", //邮箱账号
    pass: "这里要填你自己的授权码" //邮箱的授权码
  }
};
// 创建一个SMTP客户端对象
var transporter = nodemailer.createTransport(config);
// 云函数入口函数
exports.main = async(event, context) => {
  // 创建一个邮件对象
  var mail = {
    // 发件人
    from: "来自小石头 <1587072557@qq.com>",
    // 主题
    subject: "来自小石头的问候",
    // 收件人
    to: "2501902696@qq.com",
    // 邮件内容,text或者html格式
    text: "你好啊,编程小石头" //可以是链接,也可以是验证码
  };

  let res = await transporter.sendMail(mail);
  return res;
}
六、上传云函数

编写完代码后,一定要记得上传云函数。

七、调用云函数发送邮件

我们在index.wxml文件里写一个按钮,当点击这个按钮时就发送邮件。

然后在index.js里调用我们的sendEmail云函数。

八、点击发送邮件,查看效果

可以看到我们的控制台,打印里发送成功的日志信息:

然后到我们的邮箱里,可以看到新收到的邮件。

到这里我们就完整的实现了微信小程序云开发使用云函数发送邮件的功能了。是不是很简单呢?

源码地址:

https://github.com/TencentCloudBase/Good-practice-tutorial-recommended

如果你有关于使用云开发CloudBase相关的技术故事/技术实战经验想要跟大家分享,欢迎留言联系我们哦~比心!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/106860.html

相关文章

  • 用小程序·开发打造功能全面的博客小程序实战

    摘要:用小程序云开发将博客小程序常用功能一网打尽本文介绍博客小程序的详情页的功能按钮如何实现,具体包括评论点赞收藏和海报功能,这里记录下整个实现过程和实际编码中的一些坑。考虑到小程序本身的大小限制,使用的方式是最佳的。 用小程序·云开发将博客小程序常用功能一网打尽 本文介绍mini博客小程序的详情页的功能按钮如何实现,具体包括评论、点赞、收藏和海报功能,这里记录下整个实现过程和实际编码中的一...

    cc17 评论0 收藏0
  • 用小程序·开发打造功能全面的博客小程序实战

    摘要:用小程序云开发将博客小程序常用功能一网打尽本文介绍博客小程序的详情页的功能按钮如何实现,具体包括评论点赞收藏和海报功能,这里记录下整个实现过程和实际编码中的一些坑。考虑到小程序本身的大小限制,使用的方式是最佳的。 用小程序·云开发将博客小程序常用功能一网打尽 本文介绍mini博客小程序的详情页的功能按钮如何实现,具体包括评论、点赞、收藏和海报功能,这里记录下整个实现过程和实际编码中的一...

    flybywind 评论0 收藏0
  • 用小程序·开发两天搭建mini论坛实战

    摘要:笔者最近涉猎了小程序相关的知识,于是利用周末时间开发了一款类似于同事的小程序,深度体验了小程序云开发模式提供的云函数数据库存储三大能力。 笔者最近涉猎了小程序相关的知识,于是利用周末时间开发了一款类似于同事的小程序,深度体验了小程序云开发模式提供的云函数、数据库、存储三大能力。关于云开发,可参考文档:小程序·云开发。 个人感觉云开发带来的最大好处是鉴权流程的简化和对后端的弱化,所以像笔...

    沈建明 评论0 收藏0
  • 10行代码实现程序支付功能实战

    摘要:前面给大家讲过一个借助小程序云开发实现微信支付的,但是那个操作稍微有点繁琐,并且还会经常出现问题,今天就给大家讲一个简单的,并且借助官方支付实现小程序支付功能。只需要一个简单的云函数,就可以轻松的实现微信小程序支付功能。 前面给大家讲过一个借助小程序云开发实现微信支付的,但是那个操作稍微有点繁琐,并且还会经常出现问题,今天就给大家讲一个简单的,并且借助官方支付api实现小程序支付功能。...

    SimpleTriangle 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<