评论

如何使用云开发实现发送邮件功能

如何使用云开发实现发送邮件功能。

新手:因为是刚接触云开发,所以有说的不对的地方,大佬帮忙指正。

背景:摆脱每周五晚写周报的烦恼。

目标:本次小目标就先实现小程序云函数发送邮件功能。

终极目标,写一个todolist小程序,每周五汇总本周工作,下周工作,使用云函数定时器触发,定时发送邮件。

首先给大家介绍一个发邮件的第三方模块,nodemailer
Nodemailer Github地址
Nodemailer官方文档
找到官方文档最下面,有一串示例代码。这次我们要用到的就是它了。

使用nodemailer我们需要使用到的传输方式:SMTP

文档如下:https://nodemailer.com/smtp/ 这里有介绍如何使用,示例代码我就不给大家复制过来了。

何为SMTP?

这里给大家百度了一发:

  • SMTP是一种提供可靠且有效的电子邮件传输的协议。SMTP是建立在FTP文件传输服务上的一种邮件服务,主要用于系统之间的邮件信息传递,并提供有关来信的通知。SMTP独立于特定的传输子系统,且只需要可靠有序的数据流信道支持,SMTP的重要特性之一是其能跨越网络传输邮件,即“SMTP邮件中继”。使用SMTP,可实现相同网络处理进程之间的邮件传输,也可通过中继器或网关实现某处理进程与其他网络之间的邮件传输。

怎么开启SMTP服务?

自己搭建邮件服务器是非常麻烦的,我们可以借助于QQ邮箱、Gmail、163个人邮件系统或企业邮件系统开启SMTP服务,SMTP也就是简单邮件传输协议,通过它可以控制邮件的中转方式,帮助计算机在发送或中转信件时找到下一个目的地,也就是发送邮件。
不同的邮件系统有着不同的smtp发送邮件服务器,端口号也会有所不同。

我这边以QQ邮箱为示例操作下。

在QQ邮箱的设置>账户

我们可以看到IMAP/SMTP的开启和关闭,这里我们先开启,然后你会得到一串授权码,保存下这个授权码,我们后续会用到。QQ邮箱的发送邮件服务器:smtp.qq.com,使用SSL,端口号465或587。

使用云函数发送邮件

首先我们创建一个云函数,比如就叫sendMail 吧。在该云函数的package.json里添加如下代码。右键点击sendMail云函数,在终端中打开,或者本地终端cd到该云函数文件夹内也可。输入npm install 安装nodemailer最新版依赖。

  "dependencies": {
    "wx-server-sdk": "~2.1.2",
    "nodemailer": "latest"
  }

然后在index.js中添加如下代码:

const cloud = require('wx-server-sdk')
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV,
})
exports.main = async (event) => {
  const nodemailer = require("nodemailer");
  let transporter = nodemailer.createTransport({
    host: "smtp.qq.com", //SMTP服务器地址
    port: 465, //端口号,通常为465,587,25,不同的邮件客户端端口号可能不一样
    secure: true, //如果端口是465,就为true;如果是587、25,就填false
    auth: {
      user: "8662054@qq.com", //这是我的邮箱账号,改为你们的即可。
      pass: "myukmlybjotjbghh" //这里是我们上面说要用到的授权码,不是QQ邮箱的密码
    }
  });

  let postMsg = {
    from: event.from, //发件邮箱
    to:event.to, //收件人
    subject: event.subject,
    text: event.text,
    html: event.html  // text 和 html只能同时存在一个。
  };

  let res = await transporter.sendMail(postMsg);
  return res;
}

右键部署上传云函数。
到这里我们的发送邮件云函数就完成啦。

如何调用发送邮件云函数?

调用方式也很简单:

<input type="text" placeholder="请输入收件人邮件地址" bindinput="handleToAddress"/>
<input type="text" placeholder="请输入邮件主题" bindinput="handleSubject"/>
<textarea placeholder="请输入邮件内容" auto-height bindinput="handleTextarea" />
<button bindtap="handleClick">发送邮件</button>

这里因为我们绑定了 发件人是我的固定邮箱,所以没有增加发送人的输入框。
textarea 我有尝试使用editor组件生成富文本进行操作,最后发现弄出来样式太龊,就干掉了。

对了差点忘了:
邮件是支持:
html:富文本
cc:  支持 抄送
bcc:  支持 密送
attachments: 支持多种附件形式,可以是String, Buffer或Stream

目前我这边用不到,就不展示了,有需要的可查看官方文档,或者评论给你示例代码。

至于我们调用的地方:
首先拿到输入的值,然后调用云函数发送。

Page({
  data: {

  },
  handleToAddress(e) {
    this.setData({
      toAddress: e.detail.value
    })
  },
  handleSubject(e) {
    this.setData({
      toSubject: e.detail.value
    })
  },
  handleTextarea(e) {
    this.setData({
      toTextArea: e.detail.value
    })
  },
  handleClick() {
    wx.showLoading({
      title: '发送中'
    })
    const {toAddress, toSubject, toTextArea} = this.data
    wx.cloud.callFunction({
      name: 'sendMail',
      data: {
        from: '8662054@qq.com',
        to: toAddress,
        subject: toSubject,
        text: toTextArea
        // html: '<p><b>你好:</b><img src=""></p>' +'<p>欢迎欢迎<br/></p>'
      },
      success: res => {
        wx.hideLoading()
        console.log(res)
        wx.showToast({
          title: '发送成功'
        })
      },
      fail: err =>{
        wx.hideLoading()
        console.log(err)
      }
    })
  }
})

实现效果图



以上就完成了使用云开发实现发送邮件功能。
有不懂的欢迎评论留言。
老规矩结尾的代码片段 没了 😂 。
代码仓库地址:https://github.com/minchangyong/wx-cloud-demo

最后感谢李东bbsky 大佬指导。

最后一次编辑于  2020-07-09  
点赞 14
收藏
评论

2 个评论

登录 后发表内容