小程序開發之模板消息篇

目錄

小程序開發之模板消息篇

發送模板消息

接口調用請求說明

http請求方式: POST

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

POST數據說明

POST數據示例如下：

{
  "touser": "OPENID",
  "template_id": "TEMPLATE_ID",
  "page": "index",
  "form_id": "FORMID",
  "data": {
    "keyword1": {
      "value": "339208499"
    },
    "keyword2": {
      "value": "2015年01月05日 12:30"
    },
    "keyword3": {
      "value": "騰訊微信總部"
    },
    "keyword4": {
      "value": "廣州市海珠區新港中路397號"
    }
  },
  "emphasis_keyword": "keyword1.DATA"
}

 

 

返回碼說明

在調用模板消息接口后，會返回JSON數據包。正常時的返回JSON數據包示例：

{
  "errcode": 0,
  "errmsg": "ok",
  "template_id":  "wDYzYZVxobJivW9oMpSCpuvACOfJXQIoKUm0PY397Tc"
}

 

更多文檔細節請查看小程序官方文檔： 小程序文檔

代碼實現

看了發送消息模板的API文檔，我們知道了 要發送模板消息有兩種途徑，要么是通過Submit 表單提交時帶上 formId，要么支付場景下的prepay_id。本次代碼講解以預約場景下的表單提交為主。下面看看如何實現這個。

首先看看小程序端 提交按鈕：

<form report-submit bindsubmit="BtnCommit">
 
<button class="btncommit" hover-class="btn-hover" form-type="submit" >
  <text class="btnText">確認預約</text>
  <image src="../../images/ic_next.png" class="btnCommitRightImage" />
  </button>
</form>

上述我們給按鈕類型綁定了表單事件，然后再表單頭部打上 report-submit 標記，這說明，當點擊此按鈕時，小程序內部會自動將此次事件以模板消息類型識別，並隨機生成一個formId用於模板消息發送的id。

注：模板消息測試只能再真機上進行，模擬器上是沒辦法獲取到的。

然后我們看看js中如何實現的：

BtnCommit: function (e) {
     console.log(e);
    let that = this;

    //驗證
  if (!that.verifyData(that, e)) return;
    var fId = e.detail.formId;//獲取到formId
    console.log('formId' + fId);
    let info = e.currentTarget.dataset;

    httpApiQuery(queryApi, (res) => { //success
      wx.hideLoading();
      let data = that.objectData(res.id, fId, that,info);
      const sendTemplateApiObj = {
        url: that.sendTemplateData(),
        data: data,
        method: 'POST'
      };
    //預約成功發送模板消息
    httpApiQuery(sendTemplateApiObj, (res) => {
        console.log(res);
      });

      let resultOrder = {
        id: res.id,
        orderIdString: that.checkNumber(res.id, 8),
      }
      let newInfo = _.assignIn(info, resultOrder);
      nvgt.navigateTo('../successful_appointment/index', newInfo);
    }, (res) => { //fail
      tip.showToast('預約失敗,原因：' + res.errorMsg);
    });
}

其中objectData方法就是返回的模板消息格式數據，

objectData: (options, fId, that) => {
    let objectData = {
      openId: app.data.userInfo.openId,
      touser: '',
      template_id: api.sendTempalteId,
      page: 'pages/memberPage/index',
      form_id: fId,
      data: {
        keyword1: {
          value: options
        },
        keyword2: {
          value: that.data.time
        },
        keyword3: {
          value: "教練安排項目"
        },
        keyword4: {
          value: "2小時"
        },
        keyword5: {
          value: "不指定教練"
        },
        keyword6: {
          value: "1"
        }
      },
      color: '',
      emphasis_keyword: ''
    }
    return objectData;
  },

而sendTemplateData 方法返回的則是模板消息對應的ID，這個在小程序后台可以查看到

界面展示如下：

 

API實現

 到這里，小程序端的工作就完成了，但是事情還沒有結束，因為API也該咱實現(苦笑.JPG)。那我們接着來看看在API端有哪些需要處理的活：

首先我們要新建發送模板的PostSendTemplete 模型

 public class PostSendTemplete
 {
        public string openId { get; set; }

        public string touser { get; set; }

        public string template_id { get; set; }

        public string page { get; set; }

        public string form_id { get; set; }

        public object data { get; set; }

        public string color { get; set; }

        public string emphasis_keyword { get; set; }
 }

和一個返回的TemplateResultModel 模型

public class TemplateResultModel
{
        public int errcode { get; set; }
        public string errmsg { get; set; }
        public string template_id { get; set; }
}

第一步，我們新建一個SendTemplateMessage 的業務 接口如下：

Task<TemplateResultModel> SendTemplateMessage(PostSendTemplete tmModel);

第二步，實現這個業務接口：

public async Task<TemplateResultModel> SendTemplateMessage(PostSendTemplete tmModel)
{
   WxaTempleteModel model = tmModel.TranslateToSendTemplateDto();
   var result = await _template.SendTemplateMessage(model, tmModel.openId);
   return result;
}

第三步，上述標紅的是新建的一個數據接口，接口如下：

 Task<TemplateResultModel> SendTemplateMessage(WxaTempleteModel tmModel,string code);

第四步，實現上述的數據接口：

public async Task<TemplateResultModel> SendTemplateMessage(WxaTempleteModel tmModel,string openid)
{
            tmModel.touser = openid;
            var url = _config[ConfigurationKeys.TEMPLATE_SEND_RUL];
            var accesstoken = MinTokenContext.AccessToken;//注：此處用到的appId和密匙都是小程序的 string queryUrl = string.Format(url, accesstoken);
            var objectdata = JsonConvert.SerializeObject(tmModel);
            var data = Httphelper.SendPostHttpRequest(queryUrl, contentType, objectdata.ToString());
            TemplateResultModel userCard = JsonConvert.DeserializeObject<TemplateResultModel>(data);
            
            if (userCard.errcode == Invalid_token)
            {
                MinTokenContext.RefreshAccessToken();
                _logger.LogInformation(string.Format(@"模板消息: Access Token 刷新，時間 {0}", DateTime.Now.ToString("yy-MM-dd HH:mm")));

                data = Httphelper.SendPostHttpRequest(queryUrl, contentType, objectdata);
                userCard = JsonConvert.DeserializeObject<TemplateResultModel>(data);
            }

            return userCard;
}

上述方法實現中，都需要將接口和實現在初始化的時候綁定，然后注入：

//Startup中

    public Startup(IConfiguration configuration)
　　{
　　　　Configuration = configuration;
　　}

　　public IConfiguration Configuration { get; }

 

　//Configure中：

services.AddScoped<ITemplateMessage, TemplateMessage>();

需要引入：

using Microsoft.Extensions.Configuration;

實現效果

 

     End