天天看點

巧用小程式·雲開發實作郵件發送功能丨實戰

先看效果圖:

巧用小程式·雲開發實作郵件發送功能丨實戰

通過上面的日志,可以看出我們是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: \'[email protected]\', //郵箱賬号
    pass: \'這裡要填你自己的授權碼\' //郵箱的授權碼
  }
};
// 建立一個SMTP用戶端對象
var transporter = nodemailer.createTransport(config);
// 雲函數入口函數
exports.main = async(event, context) => {
  // 建立一個郵件對象
  var mail = {
    // 發件人
    from: \'來自小石頭 <[email protected]>\',
    // 主題
    subject: \'來自小石頭的問候\',
    // 收件人
    to: \'[email protected]\',
    // 郵件内容,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)是一款雲端一體化的産品方案 ,采用 serverless 架構,免環境搭建等運維事務 ,支援一雲多端,助力快速建構小程式、Web應用、移動應用。

技術文檔:https://www.cloudbase.net/

如果你有關于使用雲開發CloudBase相關的技術故事/技術實戰經驗想要跟大家分享,歡迎留言聯系我們哦~比心!