微信小程序——發送模板消息

步驟一：獲取模板ID（templateId）
在微信公眾平臺（https://mp.weixin.qq.com）功能->模板消息-> 從模板庫里獲取模板，如果沒有合適的模板，可以申請添加新模板，審核通過后可使用。拿到模板id


步驟二：頁面搭建:頁面的 <form/> 組件，屬性report-submit為true時，可以聲明為需發模板消息，此時點擊按鈕提交表單可以獲取formId，用于發送模板消息。或者當用戶完成支付行為，可以獲取prepay_id用于發送模板消息.

<form bindsubmit="formSubmit" report-submit='true'><view class="section"><view class="section__title">input</view><input name="input" placeholder="please input here" /></view><view class="btn-area"><text>---模板消息發送要在真機上測試，否則不能獲取正確的formid----</text><button formType="submit">發送模板消息</button></view> </form>

步驟三：獲取 access_token（發送模板消息的接口需要用到的參數）
開發者可以使用 AppID 和 AppSecret 調用本接口來獲取 access_token。 AppID 和 AppSecret 可登錄微信公眾平臺官網-設置-開發設置中獲得（需要已經綁定成為開發者，且帳號沒有異常狀態）。AppSecret 生成后請自行保存，因為在公眾平臺每次生成查看都會導致 AppSecret 被重置。注意調用所有微信接口時均需使用 https 協議。

接口地址：
https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET(填寫對應的appid和secret)
參數：
grant_type：獲取 access_token 填寫 client_credential
appid和secret都是通過上面獲取到的

/*** 頁面的初始數據*/data: {access_token:''},/*** 生命周期函數--監聽頁面加載*/onLoad: function (options) {var _this = this;wx.request({url: 'https://api.weixin.qq.com/cgi-bin/token',data:{grant_type:'client_credential',appid:'', //填寫對應的appidsecret:'' //填寫對應的secret},method:'get',success:function(res){_this.setData({access_token: res.data.access_token //得到access_token})}})}

步驟三：獲取openid（發送模板消息的接口需要用到的參數）
openid是在app.js中微信登錄成功后返回的code參數（用戶登錄憑證（有效期五分鐘）。開發者需要在開發者服務器后臺調用 api，使用 code 換取 openid 和 session_key 等信息）來獲得openid。代碼如下：

//app.js App({onLaunch: function () {// 展示本地存儲能力var logs = wx.getStorageSync('logs') || []logs.unshift(Date.now())wx.setStorageSync('logs', logs)let _this = this;// 登錄wx.login({success: res => {// 發送 res.code 到后臺換取 openId, sessionKey, unionIdconsole.log(res.code)var code = res.codeif (res.code) {//發起網絡請求wx.request({url: 'https://api.weixin.qq.com/sns/jscode2session',data: {appid: '',secret: '',js_code: code,grant_type: 'authorization_code'},success: function (res) {// console.log(res.data.openid)_this.globalData.openid = res.data.openid;}})} else {console.log('登錄失敗！' + res.errMsg)}}})

步驟四：發送模板消息
接口地址：(ACCESS_TOKEN 需換成上文獲取到的 access_token)
https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token=ACCESS_TOKEN

請求方式：post請求 參數： touser（必填）： 接收者（用戶）的 openid template_id（是）： 所需下發的模板消息的id（上面已經說明） page（否）： 點擊模板卡片后的跳轉頁面，僅限本小程序內的頁面。支持帶參數,（示例index? foo=bar）。該字段不填則模板無跳轉。 form_id（是）： 表單提交場景下，為 submit 事件帶上的 formId；支付場景下，為本次支付 的 prepay_id data（是）： 模板內容，不填則下發空模板 color（否）： 模板內容字體的顏色，不填默認黑色 emphasis_keyword（否）：模板需要放大的關鍵詞，不填則默認無放大

form表單提交時，執行formSubmit函數：

formSubmit: function (e) {var _this=this;console.log(_this.data.access_token,'access_token')console.log(app.globalData.openid,'openid')console.log(e.detail.formId,'formid');//formid是設置了form的屬性report-submit為true時，通過e.detail.formId獲取wx.request({url: 'https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token=' + _this.data.access_tokendata:{"touser": app.globalData.openid, //用戶的openid"template_id": 'tbi5uRB44xz7pwZQWzPYmn7FSizCs-9I3X4JUWudEfc', //用戶的模板id"form_id": e.detail.formId, //表單提交場景下，為 submit 事件帶上的 formId；支付場景下，為本次支付的 prepay_id"data": { //模板內容"k eyword1": {"value": "339208499"},"keyword2": {"value": "2018年3月26日"},"keyword3": {"value": "1000元"},"keyword4": {"value": "15999999999"}},"emphasis_keyword": "keyword3.DATA" },method:'post',header: {'content-type': 'application/json' // 默認值},success: function (res) {console.log(res.data)}})},

到這里，模板消息就可以成功發送了，但是在開發者工具上測試發現formId的值是‘the formId is a mock one’，查了一下：

formId需要在真實的手機上才會生成， 小程序開發工具是一個模擬環境， 所以獲取不到， 會提示‘the formId is a mock one’

總結

以上是生活随笔為你收集整理的微信小程序——发送模板消息的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。