微信小程序模板消息

微信小程序模板消息

因公司业务需求：扫码开锁/关锁等， 实现消息推送通知， 这里就不截流程图，大概流程
ps: 以下是个人使用方案(仅供参考)，欢迎大神们指教…

模板消息.官方文档

参考文档

效果图

介绍

微信6.5.2及以上版本支持

基于微信的通知渠道，我们为开发者提供了可以高效触达用户的模板消息能力，以便实现服务的闭环并提供更佳的体验。

• 模板推送位置：服务通知
• 模板下发条件：用户本人在微信体系内与页面有交互行为后触发，详见 下发条件说明
• 模板跳转能力：点击查看详情仅能跳转下发模板的该帐号的各个页面

1. 配置消息推送

• 登录微信公众平台，在左侧侧边栏—>设置—>开发设置—>消息推送—> 启用

2. 消息模板

• 消息模板只有在我的模板中才可以使用，首先我们可以根据自己需求在模板库中查找适合自己的，如果没有，就申请新的模板，选择模板时要注意，至少选择两个参数

3. 发送模板消息

页面的 form 组件，属性 report-submit 为 true 时，可以声明为需要发送模板消息，此时点击按钮提交表单可以获取 formId，用于发送模板消息。或者当用户完成 支付行为，可以获取 prepay_id 用于发送模板消息。

注意：

• 需要用户先在小程序内通过交互行为触发事件，可允许开发者向用户在7天内推送有限条数的模板消息
• 表单提交：获取 formId（1次提交表单可下发1条，多次提交下发条数独立，互相不影响）
• 支付： 获取 prepay_id （1次支付可下发3条，多次支付下发条数独立，互相不影响）
• 在开发者工具中测试，得到的formId值为the formId is a mock one。测试场景务必在真机中调试

场景描述：

• 在本项目中场景，仅供参考(每个开发都所需异同)

• 前端获取 formId发送给后台，由后台实现模板消息的发送【此处由于formId 只能由用户触发表单提交操作产生，因此前端需要将每次产生的formId发送至后台，由后台保存并在适当时候调用微信接口向用户发送模板消息】

wxml

<form bindsubmit="submitInfo" report-submit='true' >
    <button class='commButton' bindtap="toRecharge" form-type="submit">充值</button>
</form>

// bindtap="toRecharge"事件个人所需，我这里需要实现一些业务

js

表单提交

/**
* 表单提交获取formId
*/
submitInfo: function(e) {
    //获取formId
    this.setData({
        formId: e.detail.formId
    })
    var params = {
        formid: this.data.formId,
        type: 'button'
    }
    // 调用封装方法，请求后台 表单提交需 传入formId
    http.sendTemplateMessage('users/form-id测试', params, function(res) {

    })
},

支付

/**
* 支付： 获取 prepay_id
* 调用支付api： 返回package参数值
* 例： package: "prepay_id=wx26161813154655126912df98d1c31d...."
*/
paySuccessFormId: function(prepayId) {
    //截取prepay_id=后面的值（也就是： wx26161813154655126912df98d1c31d....）
    let tmpPrepayId = this.getQueryVariable(prepayId, 'prepay_id');

    var params = {
        formid: tmpPrepayId,
        type: 'pay'
    }
    // 调用封装方法，请求后台 支付传入 prepay_id
    http.sendTemplateMessage('users/form-id测试', params, function(res) {

    })
},

截取url参数

/**
* 截取url 参数
*/
getQueryVariable: function(query, variable) {
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair.length == 2) {
            return pair[1];
        }
        if (pair[0] == variable) {
            return pair[1];
        }
    }
    return (false);
},

css修改button样式

button {
    &::after {
        border: none;
        outline: none;
    }
}

button[disabled] {
    color: #ccc !important;
    background: #ededed !important;
}

4. 后台收集/下发等业务

收集(前端提交formId)/调用下发模板消息等相关业务