ps1： 公众号ID、小程序ID、模板ID不要弄混了
- 绑定域名 (在对应的微信公众号后台)
登录微信公众平台进入【公众号设置】的【功能设置】里填写【JS接口安全域名】。
- 引入SDK.JS文件
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
或者 npm 下载， import 导入。由项目框架决定引入方式
- 此时存在对象变量 'wx'，调用wx.config() 方法注册api接口和开放标签
wx.config({
debug: true, // 调试时可开启
appId: '公众号 AppID', // 必填，公众号的唯一标识
timestamp: 0, // 必填，生成签名的时间戳
nonceStr: 'nonceStr', // 必填，生成签名的随机串
signature: 'signature', // 必填，签名
jsApiList: ['chooseImage', 'onMenuShareAppMessage'], // 必填，需要调用的 api 接口
openTagList:['wx-open-launch-weapp'], // 需要使用的开放标签
})
/**
如果在页面加载时，便需要调用 api 接口，则必须在 wx.ready() 中执行，以此保证开放
接口和开放标签注册成功
*/
wx.ready(function() {
console.log('suceess')
/**
config信息验证后会执行ready方法，所有接口调用都必须在config接口获得
结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调
用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户
触发时才调用的接口，则可以直接调用，不需要放在ready函数中
*/
});
wx.error(function(res) {
console.log('error',res);
/**
config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信
息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于
SPA可以在这里更新签名。
*/
});
- 页面中调用 api 接口和使用开放标签
举例开放api：
wx.ready(function () {
wx.chooseImage(config)
wx.onMenuShareAppMessage(config);
});
举例开放标签(订阅)：
<wx-open-subscribe template="模板ID,多个使用 ',' 隔开" id="subscribe-btn">
<script type="text/wxtag-template" slot="style">
<style>
#subscribe-btn {
color: #fff;
background-color: #07c160;
}
</style>
</script>
<script type="text/wxtag-template">
<button class="subscribe-btn">
一次性模版消息订阅
</button>
</script>
</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>
举例开放标签(跳转小程序)：
<wx-open-launch-weapp id="subscribe-btn"
username="小程序原始ID,gh_×××××××"
path="默认首页">
<script type="text/wxtag-template" slot="style">
<style>
#subscribe-btn {
color: #fff;
background-color: #07c160;
}
</style>
</script>
<script type="text/wxtag-template">
<button class="subscribe-btn">
跳转小程序
</button>
</script>
</wx-open-launch-weapp>
<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>
[说明文档](https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#23)
ps2： 如以上前端步骤确定完成了，但是功能没有反应，请找后端确定 wx.config 中的字段值是否正确，是否【公众号==小程序】一一对应
