微信小程序模板消息詳解

先放代碼

wxml：

<form name='pushMsgFm' report-submit bindsubmit='orderSign'>  
   <view> 單號: 0</view>
   <view> 商家名稱: 騰訊早餐店</view>
    <view>實付金額:66元</view>
    <view>物品名稱：包子</view>
    <view>付款金額：68元</view>
    <view>付款時間： 2018年1月1日 </view>
    <button form-type="submit">發送模板消息</button>  
</form>

js：

  Page({
  
    /**
     * 頁面的初始數據
     */
    data: {
      openid:"" 
      
         },
    orderSign: function (e) {
      wx.showLoading({ //期間為了顯示效果可以添加一個過度的彈出框提示“加載中”  
        title: '加載中',
        icon: 'loading',
      });
      var fId = e.detail.formId;
      var l = 'https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token=' + getApp().globalData.token;
      var d = {
        "keyword1": {
          "value": "00273",
          "color": "#4a4a4a"
        },
        "keyword2": {
          "value": "騰訊早餐店",
          "color": "#9b9b9b"
        },
        "keyword3": {
          "value": "66元",
          "color": "#9b9b9b"
        },
        "keyword4": {
          "value": "包子",
          "color": "#9b9b9b"
        },
        "keyword5": {
          "value": "68元",
          "color": "#9b9b9b"
        },
        "keyword6": {
          "value": "2015年01月05日 12:30", 
          "color": "#9b9b9b"
        }
      };
      console.log(d)
      wx.request({
        url: l,
　　　　　//注意不要用value代替data
        data: {
          touser: this.data.openid,
          template_id: 'id',//申請的模板消息id，  
          page: '/pages/mes/mes',
          form_id: fId,
          data:d,
          color: '#ccc',
          emphasis_keyword: 'keyword1.DATA'
        },
        method: 'POST',
        success: function (res) {
          wx.hideLoading();
          console.log("發送成功");
          console.log(res);
        },
        fail: function (err) {
          // fail  
          console.log("push err")
          console.log(err);
        }
      });
    },  
    /**
     * 生命周期函數--監聽頁面加載
     */
    onLoad: function (options) {
      var that = this;
      wx.login({
        success:(res)=>{
          if(res.code){
            wx.request({
              url: "https://api.weixin.qq.com/sns/jscode2session",
              data:{
                appid: getApp().globalData.appId,//你的appid
                secret: getApp().globalData.secret,//你的secret
                js_code:res.code,
                grant_type:"authorization_code"
              },
              success:(res)=>{
                console.log(res);
                that.setData({
                  openid: res.data.openid //存儲openid
                })
              }
            })
          }
        }
      })
    }
  })

再放圖

最后放教程

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

1.在公眾平台申請一個模板，獲得模板id

2.獲取openid，正常應該是在app.js里將openid和token獲取下來存為公共變量調用

onLoad: function (options) {
      var that = this;
      wx.login({
        success:(res)=>{
          if(res.code){
            wx.request({
              url: "https://api.weixin.qq.com/sns/jscode2session",//換openid的接口地址
              data:{
                appid: getApp().globalData.appId,
                secret: getApp().globalData.secret,
                js_code:res.code,
                grant_type:"authorization_code"
              },
              success:(res)=>{
                console.log(res);
                that.setData({
                  openid: res.data.openid//將openid存起來
                })
              }
            })
          }
        }
      })
    }

3.獲取token，這里我直接使用微信公眾平台接口調試工具【http://mp.weixin.qq.com/debug/】上得到token串，輸入你的appid和secret就可以得到token了，注意token是有過期時間的，應當在有效期內測試，access_token 的有效期目前為2個小時，需定時刷新，重復獲取將導致上次獲取的 access_token 失效。假如多處請求需要token的話，最好設置一個公共變量存儲，這里我提前把token存儲在app.js的globalData里頭了。

 

4.發起模板消息請求

接口地址：(ACCESS_TOKEN 需換成上文獲取到的 access_token)

https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token=ACCESS_TOKEN

5.成功