代碼展示

js文件（需要加上自己的appid和secret）

const app = getApp()
// pages/test/test.js
Page({

  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {
    access_token: ''
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
   */
  onLoad: function (options) {
    var _this = this;
    wx.request({
      url: 'https://api.weixin.qq.com/cgi-bin/token',
      data: {
        grant_type: 'client_credential',
        appid: '需要加上自己的appid',
        secret: '需要加上自己的secret'
      },
      method: 'get',
      success: function (res) {
        _this.setData({
          access_token: res.data.access_token
        })
      }
    })
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁(yè)面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁(yè)面顯示
   */
  onShow: function () {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁(yè)面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁(yè)面卸載
   */
  onUnload: function () {

  },

  /**
   * 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁(yè)面上拉觸底事件的處理函數(shù)
   */
  onReachBottom: function () {

  },

  /**
   * 用戶點(diǎn)擊右上角分享
   */
  onShareAppMessage: function () {

  },
  formSubmit:function(e){
    //需要在真機(jī)上進(jìn)行
    var _this = this;
    console.log(e.detail.formId, 'formid');
    console.log(_this.data.access_token, 'access_token')
    var openId = app.globalData.token1;
    console.log(app.globalData.token1)
    var access_token = _this.data.access_token;
    var formId = e.detail.formId;
    wx.request({
      url: 'https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token=' + access_token,
      data: {
        "touser": openId,
        "template_id": 'OqMfyBicxpNpuFFlNOII6o1ycQhjcON-oYH_g2MZbcM',
        "form_id": formId,
        "data": {
          "k eyword1": {
            "value": "339208499",
            "color": "#173177"
          },
          "keyword2": {
            "value": "2018年3月26日",
            "color": "#173177"
          },
          "keyword3": {
            "value": "1000元",
            "color": "#173177"
          },
          "keyword4": {
            "value": "15999999999",
            "color": "#173177"
          }
        },
        "emphasis_keyword": "keyword3.DATA"
      },
      method: 'post',
      header: {
        'content-type': 'application/json' // 默認(rèn)值
      },
      success: function (res) {
        console.log(res.data)
      }
    })
  
  }
})

app.js（需要加上自己的appid和secret）

//app.js
App({
  onLaunch: function () {
   
       // 小程序登錄
    wx.login({
      success: res => {
        // 發(fā)送 res.code 到后臺(tái)換取 openId, sessionKey, unionId
                let code = res.code;
                console.log('微信請(qǐng)求的code='+code);
                var that = this;
                that.globalData.code = code;
                console.log('code===='+code);
                //請(qǐng)求后臺(tái)獲取唯一標(biāo)識(shí)
                var appid = '自己的appid'; //填寫微信小程序appid
                var secret = '自己的secret'; //填寫微信小程序secret
                //調(diào)用request請(qǐng)求api轉(zhuǎn)換登錄憑證
                wx.request({
                    url: 'https://api.weixin.qq.com/sns/jscode2session?appid='+appid+'&secret='+secret+'&grant_type=authorization_code&js_code=' + code,
                    header: {
                        'content-type': 'application/json'
                    },
                    success: function(res) {
                        console.log(res);
                        console.log('openId+++++:'+res.data.openid) //獲取openid
                        that.globalData.token1 = res.data.openid;
                    }
                })
                
      }
    })
                
      }
    })
    // 獲取用戶信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已經(jīng)授權(quán)，可以直接調(diào)用 getUserInfo 獲取頭像昵稱，不會(huì)彈框
          wx.getUserInfo({
            success: res => {
              // 可以將 res 發(fā)送給后臺(tái)解碼出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是網(wǎng)絡(luò)請(qǐng)求，可能會(huì)在 Page.onLoad 之后才返回
              // 所以此處加入 callback 以防止這種情況
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },

    //全局?jǐn)?shù)據(jù)
  globalData: {
      dataInfo:null,//用戶信息（服務(wù)器獲取的）
    userInfo:null,// 用戶信息（微信返回的）
        code:null,  //code
        token:null,//用戶唯一標(biāo)識(shí)
        version: '1.0.0',//版本號(hào)
        // host:'http://139.224.117.244:8092/shiban-api/', //主機(jī)地址
    host:'https://apitest.51shiban.com/',
    // host: 'http://127.0.0.1:8081/shiban-api/', //主機(jī)地址
    latitude:0,//緯度，暫時(shí)沒有用
    longitude:0//經(jīng)度
  }

wxml文件

<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>---模板消息發(fā)送要在真機(jī)上測(cè)試，否則不能獲取正確的formid----</text>
    <button formType="submit">發(fā)送模板消息</button>
  </view>
</form>

提示：需要真機(jī)才行哦，而且這只是測(cè)試用，實(shí)際需要吧請(qǐng)求邏輯交給服務(wù)器處理

效果展示

BC0686F7C94F6F32F69C77C56988BB39.png