微信公众号订阅通知（go+vue）

最近刚好需要做一个订阅通知的方案，简单的整理下做的步骤。

准备工作：

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接口列表,这里填的就是消息订阅用到的开放标签
        });
    });
}

PS:关于JS-SDK使用权限签名算法
官网：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62
签名算法校验：https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign

//获取access_token  utils为自定义封装方法
func GetAccessToken() (string) {
	appId := "xxxxxxxxxxxxxxx"			//开发者id
	appSecret := "xxxxxxxxxxxxxxx"		//开发者密码
	url :=utils.S_SFT(`https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={0}&secret={1}`,appId,appSecret)
	result ,err :=utils.HttpGet(url)	//http get请求获取access_token 有效期2h
	utils.ThrowError(err)
	tmp :=utils.JsonForceMashMap(result)	//将返回结果转换为map类型
	return fmt.Sprint(tmp["access_token"])
}
//获取api_ticket
func GetJsApiTicket() string {
	access_token := GetAccessToken()
	url :=utils.S_SFT(`https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token={0}&type=jsapi`,access_token)
	result ,err :=utils.HttpGet(url)
	utils.ThrowError(err)
	tmp :=utils.JsonForceMashMap(result)
	return fmt.Sprint(tmp["ticket"])
}
//获取js签名
func getJsSignature(param map[string]interface{}) (interface{}, int32){
	jsapi_ticket := GetJsApiTicket()	//jsapi_ticket 有效期为2h
	noncestr := string(utils.Krand(16,utils.KC_RAND_KIND_ALL))	//自定义随机字符串
	timestamp := utils.Timestamp()		//时间戳
	url := fmt.Sprint(param["url"])		//调用接口的页面完整url

	string1 := utils.S_SFT(`jsapi_ticket={0}&noncestr={1}&timestamp={2}&url={3}`,jsapi_ticket,noncestr,timestamp,url)	//拼接字符串 顺序不能更改

	t := sha1.New()
	io.WriteString(t, data)
	signature := fmt.Sprintf("%x", t.Sum(nil))

	res := make(map[string]interface{})
	res["appid"] = _default.GetWeixinmp().AccessToken.AppId
	res["signature"] = signature
	res["noncestr"] = noncestr
	res["timestamp"] = timestamp
	return res,0
}

也可以直接使用 github.com/sidbusy/weixinmp (go接口封装包)

4. 页面中添加开放标签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 )
},

---

下发订阅：

官网：https://developers.weixin.qq.com/doc/offiaccount/Subscription_Messages/api.html#send%E5%8F%91%E9%80%81%E8%AE%A2%E9%98%85%E9%80%9A%E7%9F%A5

属性	类型	必填	说明
access_token	string	是	接口调用凭证
touser	string	是	接收者（用户）的 openid
template_id	string	是	所需下发的订阅模板id
page	string	否	跳转网页时填写
miniprogram	Array.< Object >	否	跳转小程序时填写，格式如{ “appid”: “pagepath”: { “value”: any } }
data	Object	否	跳转网页时填写

使用官网的请求参数请求地址即可
POST https://api.weixin.qq.com/cgi-bin/message/subscribe/bizsend?access_token=ACCESS_TOKEN

---

注：

1. 一次性订阅消息目前订阅一次即可不限时长发送一次，可积累订阅
2. 公众号H5中，一个开放标签中至多可同时订阅 5 条模板
3. 点击“记住选择”后，怎么重新调起弹框是个问题？知道的小伙伴可以回复下谢谢