uni-app小程序雲開發發送郵件

1、發件箱要開通POP3/SMTP服務

步驟：進入QQ郵箱，點擊設置--賬戶--開啟

 

 

 

 

 

 開啟服務后，獲取授權碼。

2、在注冊后的小程序下開通雲開發、創建環境

此步驟在微信開發者工具下操作。注意：要用注冊過的APPID，測試號不行（無雲開發環境）

1）在uni-app項目的mainifest.json中配置雲函數路徑

 

 

 2）創建/cloudfunctions 目錄（uni-app不會主動生成，需手動創建，另外，此文件夾不要為空，可隨便加個文件進去）

 

 3）初始化雲環境

在 App.vue的 onLanuch 生命周期中初始化

wx.cloud.init({
                    // env 參數說明：
                    //   env 參數決定接下來小程序發起的雲開發調用（wx.cloud.xxx）會默認請求到哪個雲環境的資源
                    //   此處請填入環境 ID, 環境 ID 可打開雲控制台查看
                    //   如不填則使用默認環境（第一個創建的環境）
                    env: "XXXXXX",
                    traceUser: true,
                })

配置好后運行代碼，運行后會在 /unpackage/dist/dev 中生成微信小程序代碼。但我們先前建的 /cloudfunctions 文件夾並未打包進去，

這是因為新建的 /cloudfunctions 並不屬於uni-app默認的目錄結構，默認不會被打包。
解決思路：通過webpack包管理工具的復制插件將/cloudfunctions 復制到項目包中。

 針對以上打包的小程序代碼包中無/cloudfunctions 文件夾的問題，按以下步驟處理

首先，先安裝 copy-webpack-plugin，即用命令行窗口打開項目根目錄，在命令窗口輸入

npm install -save copy-webpack-plugin@5.1.1    //注：請使用版本5，版本6報錯

其次，在uni-app項目的根目錄下創建vue.config.js文件

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')
                }
            ]) 
        ]
    } 
}  

配置好運行代碼，發現 /cloudfunctions 文件夾已經包含在里面了

4）建立雲函數

運行代碼到微信開發者工具中，發現已經建立了我們之前建立的雲文件夾（有雲符號和環境ID或環境名）。右擊 cloudfunctions 文件夾，選擇新建 Node.js 雲函數，名為Email(可自行命名)

隨后，右鍵Email選擇上傳並部署：雲端安裝依賴（此過程需要時間，可打開雲開發控制台在雲函數項下查看部署狀態）

 

 

 若部署失敗，可以先把部署的項目刪除后再重新部署。

部署成功后，復制Email文件夾到HBuilder的pages同層目錄下（對應你在mainifest.json中配置雲函數路徑），比如我就放在“cloudfunctions”文件夾下

現在，可以在HBuildder里面編寫雲函數了。

3、編寫雲函數發送郵件

 在HBuilder的“cloudfunctions”文件夾下的Email文件夾的index.js文件里，編寫以下代碼

// 雲函數入口文件
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:'[e-mail]',
        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 <[e-mail]>',
      //主題
      subject:'您有新消息啦',
      //收件人
      to:_recipients,   //接收人
      //郵件內容，text或HTML格式
      text:_text,   //郵件內容   //可以是鏈接，也可以是驗證碼
  };
  
  let res = await transporter.sendMail(mail);
  return res;
  
}

注意： 要用npm安裝依賴包nodemailer （電腦首先要安裝Node工具），選擇雲函數文件夾Email，即cloudfunctions文件夾下的Email文件夾（在外部目錄下安裝，調用雲函數失敗）右鍵選擇在終端打開，在打開的命令窗口輸入

npm install nodemailer

等待類庫安裝，安裝成功后會顯示nodemailer的版本號，此依賴包安裝后Email文件夾下出現以下文件

 

最后，編寫代碼后記得上傳並部署到雲端

4、調用雲函數發送郵件

你可以在你想要調用雲函數的方法中，編寫以下代碼

wx.cloud.callFunction({
                    name: "Email",   
                    //js攜帶參數傳到雲端
                    data:{
                        _text:this.textMsg,   //郵件內容
                        _recipients:"[e-mail]",   //收件人
                    },
                    success(res) {
                        console.log("發送成功", res)
                    },
                    fail(res) {
                        console.log("發送失敗", res)
                    }
                })

隨后郵箱就可以收到信息啦。

 

 

 

 

此隨筆是自己在做項目時第一次用到小程序雲開發，總結一下學習內容，參考以下文章

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