做动画视频的网站网络安全培训
一、微信公众号后台配置安全域名
准备一个认证通过的公众号,打开公众号后台
1、设置与开发
2、公众号设置
3、功能设置
4、配置js接口安全域名
二、微信开放平台,将公众号与APP关联
打开微信开放平台后台
1、管理中心
2、公众号
3、选择一个需要操作的公众号点击查看
4、关联设置
5、根据提示填写关联信息(js接口安全域名需要与第一步中的域名一致)
三、开发—接入微信开放标签
引入jssdk
//1.6.0及以上
<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js "></script>
通过后端接口拿到相关参数,通过congfig注入权限验证,需要后端配合
注意将开放标签放入openTagList 而不是 jsApiList
wx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印appId: '', // 必填,公众号的唯一标识timestamp: , // 必填,生成签名的时间戳nonceStr: '', // 必填,生成签名的随机串signature: '',// 必填,签名jsApiList: [], // 必填,需要使用的JS接口列表openTagList: ['wx-open-launch-app'] // 可选,需要使用的开放标签列表,例如['']
})
html模板放入标签
<wx-open-launch-appid="launch-btn"appid="your-appid" //替换成你的appidextinfo="your-extinfo"
><script type="text/wxtag-template"><style>.btn { padding: 12px }</style><button class="btn">App内查看</button></script>
</wx-open-launch-app>
<script>var btn = document.getElementById('launch-btn');btn.addEventListener('launch', function (e) {console.log('success');});btn.addEventListener('error', function (e) {console.log('fail', e.detail);});
</script>