1、模版消息功能概述

基于微信的通知渠道，為開發(fā)者提供了可以高效觸達(dá)用戶的模板消息能力，以便實(shí)現(xiàn)服務(wù)的閉環(huán)并提供更佳的體驗(yàn)。

• 模板推送位置：服務(wù)通知

• 模板下發(fā)條件：用戶本人在微信體系內(nèi)與頁面有交互行為后觸發(fā)

  1、 支付：當(dāng)用戶在小程序內(nèi)完成過支付行為，可允許開發(fā)者向用戶在7天內(nèi)推送有限條數(shù)的模板消息（1次支付可下發(fā)1條，多次支付下發(fā)條數(shù)獨(dú)立，互相不影響）
  2、提交表單：當(dāng)用戶在小程序內(nèi)發(fā)生過提交表單行為且該表單聲明為要發(fā)模板消息的，開發(fā)者需要向用戶提供服務(wù)時(shí)，可允許開發(fā)者向用戶在7天內(nèi)推送有限條數(shù)的模板消息（1次提交表單可下發(fā)1條，多次提交下發(fā)條數(shù)獨(dú)立，相互不影響）

• 模版消息效果展現(xiàn)：

• 進(jìn)入服務(wù)通知：

• 模板跳轉(zhuǎn)能力：點(diǎn)擊查看詳情僅能跳轉(zhuǎn)下發(fā)模板的該帳號(hào)的小程序各個(gè)頁面

2、功能實(shí)現(xiàn)

• 獲取模板 id

  登錄 https://mp.weixin.qq.com 獲取模板，如果沒有合適的模板，可以申請(qǐng)?zhí)砑有履０?，審核通過后可使用

• 

  mp-notice.jpg

• 獲取 access_token

• access_token 的有效期目前為2個(gè)小時(shí)，需定時(shí)刷新，重復(fù)獲取將導(dǎo)致上次獲取的 access_token 失效。
• 接口地址：https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
• HTTP請(qǐng)求方式:GET
  

  

  請(qǐng)求參數(shù)說明
  
  

  

  返回參數(shù)說明
• node.js代碼實(shí)現(xiàn)

  <!-- ih_request.js -->
  const request = require('request');
  var ih_request = {};
  module.exports = ih_request;
  ih_request.get = async function(option){
    var res = await req({
        url: option.url,
        method: 'get'
    });
    res.result?option.success(res.msg):option.error(res.msg);
  }

  const request = require('../script/ih_request');
  await request.get({
        url: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=SECRET',
        success: function(res){
            console.log(res.access_token)
        },
        error: function(err){
            console.log(err)
        }
  });

• 獲取用戶的唯一標(biāo)識(shí)（openid）

• 調(diào)用wx.login(OBJECT)獲取登錄憑證（code）進(jìn)而換取用戶登錄態(tài)信息，包括用戶的唯一標(biāo)識(shí)（openid）
• 參數(shù)說明
  

  

  參數(shù)說明
• 小程序代碼實(shí)現(xiàn)獲取code并請(qǐng)求傳給服務(wù)器

  //app.js
  App({
  onLaunch: function() {
    wx.login({
      success: function(res) {
        if (res.code) {
          //發(fā)起網(wǎng)絡(luò)請(qǐng)求 將code傳給服務(wù)器
          wx.request({
            url: 'https://test.com/onLogin',
            data: {
              code: res.code
            }
          })
        } else {
          console.log('獲取用戶登錄態(tài)失敗！' + res.errMsg)
        }
      }
    });
  }
  })

• code 換取 opened接口說明
  接口地址：https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code
  

  

  請(qǐng)求參數(shù)
  
  

  

  返回參數(shù)
  
  

  

  返回說明
• node.js 代碼實(shí)現(xiàn)code 換取 opened

  <!-- ih_request.js -->
  const request = require('request');
  var ih_request = {};
  module.exports = ih_request;
  ih_request.get = async function(option){
    var res = await req({
        url: option.url,
        method: 'get'
    });
    res.result?option.success(res.msg):option.error(res.msg);
  }

  const request = require('../script/ih_request');
  request.get({
        url: 'https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code',
        success: function(res){
            console.log(res)
        },
        error: function(err){
            console.log(err)
        }
    });

• 小程序提交表單將formId傳給服務(wù)器

  <!--index.wxml-->
  <view class="container">
  <view bindtap="bindViewTap" class="userinfo">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>
  <form bindsubmit="formSubmit" report-submit="true">
    <input name="input" class="input" placeholder="please input here" />
    <button formType="submit">Submit</button>
    <button formType="reset">Reset</button>
  </form>
  </view>

  <!--index.js-->
  //實(shí)現(xiàn)綁定的formSubmit 將formId傳給服務(wù)器
  formSubmit: function (e) {
    var that = this
    wx.request({
      url: 'https://ihealth-wx.s1.natapp.cc/template',
      data: {
        'input': e.detail.value.input,
        'formId': e.detail.formId,
        'code': that.data.login_res.code
      },
      method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      // header: {}, // 設(shè)置請(qǐng)求的 header
      success: function(res){
        // success
        console.log('成功' + res);
        // console.log(e.detail.formId);
      },
      fail: function(err) {
        // fail
        console.log('失敗' + err);
      },
      complete: function() {
        // complete
      }
    })
  }

  

  頁面展示

• 發(fā)送模板消息

• 接口地址：https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token=ACCESS_TOKEN
• HTTP請(qǐng)求方式：POST
• POST參數(shù)說明
  

  

  POST參數(shù)說明
• 返回碼說明
  

  

  返回碼說明
• node.js代碼實(shí)現(xiàn)

  <!-- ih_request.js -->
  const request = require('request');
  var ih_request = {};
  module.exports = ih_request;
  ih_request.postJson = async function(option){
    var res = await req({
                            url: option.url,
                            method: 'post',
                            headers: {
                                'content-type': 'application/json'
                            },
                            body: JSON.stringify(option.body)
                        });
    res.result?option.success(res.msg):option.error(res.msg);
  }

  const request = require('../script/ih_request');
  await request.postJson({
        url: 'https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token='+access_token,
        body: {
            touser: '觸發(fā)帳號(hào)的opened',
            template_id: '模版id',
            page: '點(diǎn)擊模版卡片的跳轉(zhuǎn)頁面',
            form_id: 'form_id或者prepay_id',
            data: {
                keyword1:{
                    value: '小程序測(cè)試模版',
                    color: '#173177'
                },
                keyword2:{
                    value: '2017年3月24日',
                    color: '#173177'
                },
                keyword3:{
                    value: 'iHleath',
                    color: '#173177'
                }
            },
            //需要放大的關(guān)鍵字
            emphasis_keyword: 'keyword1.DATA'
        },
        success: function(res){
            console.log(res);
        },
        error: function(err){
            console.log(err);
        }
    });

• 模版消息效果展現(xiàn)：

• 進(jìn)入服務(wù)通知：