微信公众号订阅通知
最近刚好需要做一个订阅通知的方案,简单的整理下做的步骤。
准备工作:
- 公众号 功能-添加功能插件 找到并添加 订阅通知
- 在 订阅通知 中设置相应 类别(需管理员权限)、添加 模板
用户订阅:
官网:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#23
- 绑定域名,登录微信公众平台进入 公众号设置 的 功能设置 里填写 JS接口安全域名
- 安装微信官方 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 - 通过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}×tamp={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接口封装包)
- 页面中添加开放标签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
注:
- 一次性订阅消息目前订阅一次即可不限时长发送一次,可积累订阅
- 公众号H5中,一个开放标签中至多可同时订阅 5 条模板
- 点击“记住选择”后,怎么重新调起弹框是个问题?知道的小伙伴可以回复下谢谢