准备工作：

  1. 开通服务号订阅通知： 功能-添加功能插件 找到并添加 订阅通知。
  2. 在 订阅通知 中设置相应 类别(需管理员权限)、添加 模板。

用户订阅：

官网：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#23

 

  1. 绑定域名，登录微信公众平台进入 公众号设置 的 功能设置 里填写 JS接口安全域名
  2. 安装微信官方 js-sdk：npm install weixin-js-sdk （官方使用说明 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html）或者引入JS文件：http://res.wx.qq.com/open/js/jweixin-1.6.0.js
  3. 通过config接口注入权限验证配置并申请所需开放标签
import wx from 'weixin-js-sdk'
function wxconfig (){
    let url = "/getJsSignature";    //后台动态获取config信息接口
    let param = {
        url : location.href        //使用开放标签页面的完整url
    };
    $post(url, param, (res)=> {    //post请求接口
        let data = res.val
        wx.config({
            debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: data.appid, // 必填，开发者id
            timestamp: data.timestamp, // 必填，生成签名的时间戳(自定义)
            nonceStr: data.noncestr, // 必填，生成签名的随机字符串(自定义)
            signature: data.signature,// 必填，签名（sha1签名算法）
            jsApiList: [], // 必填，需要使用的JS接口列表
            openTagList: [ 'wx-open-subscribe'] // 必填，需要使用的JS接口列表,这里填的就是消息订阅用到的开放标签
        });
    });
}
  1. 页面中添加开放标签 wx-open-subscribe
<!--页面 template:['w_A5DmhNEAPce3PDoaV1fVX0ptwNR0E9HspN95yb95Y','xxxxx'](多模板)-->
<wx-open-subscribe :template="template" id="'subscribe-btn" @success="successSubscribe" @error="subErrorSubscribe">
    <script type="text/wxtag-template">
        <style>
            <!--按钮样式-->
            .subscribe-btn{}
        </style>
        <button class="subscribe-btn">订阅+1</button>
    </script>
</wx-open-subscribe>
<!--成功事件:包括确定、取消-->
successSubscribe(e){
    let subscribeDetails = JSON.parse(e.detail.subscribeDetails)
    let status = JSON.parse(subscribeDetails[模板id]).status
    if (status=='accept'){          // 同意订阅该模板
    
    }else if (status=='reject'){    // 拒绝订阅该模板
    
       }
},
<!--错误事件-->
subErrorSubscribe(e){
    let errMsg = e.detail.errMsg        // 错误提示
    let errCode = e.detail.errCode      // 错误码
    console.log(errMsg,errCode )
}

 对于vue项目

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

在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 {
        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>