微信小程序发送邮件,小程序云开发使用云函数发送邮件功能的实现(含源码)

简介: 微信小程序发送邮件,小程序云开发使用云函数发送邮件功能的实现(含源码)

上一节给大家讲了借助小程序云开发的云函数管理mysql数据库,这一节,就来给大家讲一讲使用云开发云函数实现邮件发送的功能。


老规矩,先看效果图



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


准备工作


1,qq邮箱一个

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

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

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

5,跟着老师编写小程序代码


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


这个我不做具体讲解了。你进入你的qq邮箱以后,

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



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



具体操作可以看官方文档,官方文档有具体的讲解,这里我就不多说了。

官方文档:https://service.mail.qq.com/cgi-bin/help?subtype=1&&no=1001256&&id=28

我们获取的授权码如下图。这个授权码,我们后面发送邮件时会用到。


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


关于小程序的注册,和创建小程序我就不在做具体讲解,感兴趣的同学或者还不会的同学可以翻看我前面的文章学习,也可以看我的零基础入门小程序的视频:https://edu.csdn.net/course/detail/9531

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



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


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


关于云开发初始化我这里也不在做具体讲解了,感兴趣或者不会的同学,可以去看我录制的云开发入门视频:https://edu.csdn.net/course/detail/9604

初始化云开发环境时,有下面几点注意事项给大家说下。

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云函数。



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


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



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



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

源码我也已经给大家准备好了。大家先试着自己敲下,看能不能实现,如果实现不了再来找我要源码。

相关文章
|
6天前
|
人工智能 小程序 程序员
【视频测评 DEMO 参考】VSCode 神级 AI 插件通义灵码:完全免费+实战教程+微信贪吃蛇小程序
VSCode 神级 AI 插件通义灵码:完全免费+实战教程+微信贪吃蛇小程序
153 7
|
13天前
|
存储 小程序 前端开发
微信小程序与Java后端实现微信授权登录功能
微信小程序极大地简化了登录注册流程。对于用户而言,仅仅需要点击授权按钮,便能够完成登录操作,无需经历繁琐的注册步骤以及输入账号密码等一系列复杂操作,这种便捷的登录方式极大地提升了用户的使用体验
133 12
|
3月前
|
移动开发 小程序
仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
138 3
|
4月前
|
存储 自然语言处理 小程序
微信小程序多语言切换神器:简繁体切换功能完全指南
随着全球化的发展,支持多种语言的应用程序愈发重要。本文介绍了如何在微信小程序中实现简体与繁体字体之间的切换功能,以满足不同地区用户的需求。通过创建utils文件夹并编写相应的转换函数,开发者可以方便地实现语言切换,从而提升用户体验。文章中还附带了示例代码和效果图,帮助读者更好地理解和应用这一功能。
173 0
微信小程序多语言切换神器:简繁体切换功能完全指南
|
4月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
1731 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
4月前
|
存储 JSON 小程序
微信小程序入门之新建并认识小程序结构
微信小程序入门之新建并认识小程序结构
90 1
|
4月前
|
移动开发 小程序 数据可视化
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
79 2
|
4月前
|
小程序 前端开发 数据可视化
微信商城小程序WeiMall
微信商城小程序WeiMall
60 0
|
5月前
|
小程序 前端开发 API
微信小程序 - 调用微信 API 回调函数内拿不到 this 问题(解决方案)
本文讨论了在微信小程序中调用API回调函数时无法获取到`this`上下文的问题,并提供了解决方案。在回调函数中,使用一个变量(如`that`)来保存当前的`this`引用,然后在回调内部使用这个变量来访问当前页面的数据和方法。
ly~
|
5月前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
114 6

热门文章

最新文章