微信开放标签踩坑记录

先上微信官方文档 微信文档

以下要注意的点：

• 微信版本要求为：7.0.12及以上。 系统版本要求为：iOS 10.3及以上、Android 5.0及以上。
• 微信sdk版本需要在1.6.0以上，版本过低会无效
• 初始化wx.config时，需要在openTagList中增加自己需要的开放标签

wx.config({
 debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
 appId: '', // 必填，公众号的唯一标识
 timestamp: , // 必填，生成签名的时间戳
 nonceStr: '', // 必填，生成签名的随机串
 signature: '',// 必填，签名
 jsApiList: [], // 必填，需要使用的JS接口列表
 openTagList: [] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
});

因为我在项目中只用到跳转app，所以小程序不会太了解，但是应该都是一样的~
在Vue项目中引入开放标签的时候，不能按照官方例子来使用
如下：在Vue中使用是错误的
因为这里的template会和vue中的起冲突

<wx-open-launch-app
 id="launch-btn"
 appid="your-appid"
 extinfo="your-extinfo"
>
 <template>
   <style>.btn { padding: 12px }</style>
   <button class="btn">App内查看</button>
 </template>
</wx-open-launch-app>

解决方案：

对于Vue等视图框架，为了避免template标签冲突的问题，可使用

<script type="text/wxtag-template"><script>进行代替

如下：

<wx-open-launch-app 
id="launch-btn"
appid="your-appid"
extinfo="your-extinfo"
>
 <script type="text/wxtag-template">
   <style>.btn { padding: 12px }</style>
   <button class="btn">App内查看</button>
 </script>
</wx-open-launch-app>

调试

开放标签不能在本地调试，目前也不能在微信开发者工具调式，只能在真机，并且代码要部署到已认证的服务号，服务号绑定“JS接口安全域名”下的网页

我推荐VConsole调式工具进行调试，在html引入script，然后new VConsole();
就会在网页底部出现一个谷歌调式工具栏

<script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.3.4/vconsole.min.js"></script>
<script>
    // 初始化
	new VConsole();
</script>

然后在页面生命周期函数中监听开放标签Ready事件

created(){
	this.$nextTick(()=>{
		let btn = document.getElementById(`launch-btn`);
		btn.addEventListener('error', (err) => {
			// 监听异常，比如用户手机无App等，可以跳转app应用商店
			window.location.href = 'https://xxx.com';
		})

		btn.addEventListener('ready', () => {
			// 指开放标签已经正常可以点击了
			console.log('btnReady');
		})
   })
}

或者在开放标签上面监听

 <wx-open-launch-app 
 id="launch-btn"
 appid="your-appid"
 extinfo="your-extinfo"
 @ready="ready"
 @error="error"
 >
 </wx-open-launch-app>

可以在vconsole调试工具中查看打印.

样式

开放标签的样式不能使用rpx 百分比等相对单位，所有，最好把所有的样式赋给开放标签的父级容器，设置宽高,溢出隐藏等属性，再把开放标签内样式opacity: 0, 就可达到想要的效果。

安卓手机可能出现标签样式不生效的问题，如果是vue开发，那么把开放标签展示由v-show 改为 v-if；
因为开放标签的父容器display:none 的话可能会影响到安卓端样式，导致样式不生效，点击不到等异常问题
即使用v-if也不用担心，这样也会正常被微信编译。