微信服务号订阅消息

最近微信服务号增加了订阅消息

1. 服务号订阅通知灰度测试期自2021年1月27日0:00至4月30日24:00，期间服务号模板消息可正常使用；灰度测试期结束后服务号订阅通知的策略将另行公布，届时以官方信息为准；

2. 开发者使用订阅通知功能时，需遵循运营规范，不可用奖励或其它形式强制用户订阅，不可下发与用户预期不符或违反国家法律法规的内容。具体可参考文档：《微信公众平台运营规范》

刚好项目用到 那我们就来研究下这个订阅消息

申请模板

这个没什么好说的直接公众号平台后台申请就可以了

计算签名

这一步一开始我忽略了以为只要用到开放标签就可以
但是签名的时候会增加一个属性 openTagList
注意只有到weixin-js1.6才支持
微信签名配置如下

HTML配置

<wx-open-subscribe template="TenvU22BA1jCp4YHfYEpRuESXYReQyDuhs4vbdWA99I" id="subscribe-btn">
    <template slot="style">
        <style>
            .subscribe-btn {
                color: #fff;
                background-color: #07c160;
            }
        </style>
    </template>
    <template>
        <button class="subscribe-btn">
            一次性模版消息订阅
        </button>
    </template>
</wx-open-subscribe>
<script>
    var btn = document.getElementById('subscribe-btn');
    btn.addEventListener('success', function(e) {
        console.log('success', e.detail);
    });
    btn.addEventListener('error', function(e) {
        console.log('fail', e.detail);
    });
</script>

对于vue项目
开放标签属于自定义标签，Vue会给予未知标签的警告，可通过配置Vue.config.ignoredElements来忽略Vue对开放标签的检查。

我使用的是vue-cli创建的项目
所以在mail.js 里面配置
Vue.config.ignoredElements = ["wx-open-subscribe"];

关于vue的事件监听

<template>
<div class="button">
    <wx-open-subscribe :template="['2KkIMjZMtFmL0qWBALfltU8EPDwA3F8sqpStAxkXN_s']" @error="onError" @success="onSuccess" id="subscribe">
        <script type="text/wxtag-template">
            <style>
                button{
                    padding: 10px 30px;
                    display: flex;
                    width: 100%
                    align-items: center;
                    justify-content: center;
                    background: #4BCB7C;
                    color: #fff;
                    font-size: 16px;
                    border: none;
                    outline: none;
                    border-radius: 50px;
                }
            </style>
            <button class="button">接受审核结果通知</button>
        </script>
    </wx-open-subscribe>
</div>
</template>



<script>
    export default {
        data() {
            return {}
        },
        created() {},
        methods: {
            onError(e) {
                console.log(e);
            },
            onSuccess(e) {
                if (e.detail.errMsg == 'subscribe:ok') {
                    let status = JSON.parse(e.detail.subscribeDetails);
                    if (JSON.parse(status['模板消息ID']).status == 'accept') {
                        Toast.success('订阅成功');
                    } else {
                        Toast.fail('订阅失败');
                    }
                } else {
                    Toast.fail('订阅失败');
                }
            }
        }
    }
</script>