打开App:微信浏览器内部打开app跳转

微信内打开App终于开发完成了： 说说我踩过的坑吧：

1，跨域问题，微信给的api地址是微信的前缀，访问时是需要处理跨域的，一般的跨域问题处理方式：

1.1：请求让后端完成，后端请求不会出现跨域问题。1.2:前端做代理，前端做代理是代理的本地，再将服务器nigix的代理做好，就能将服务器的代理也完成。

2，appid的问题，微信标签里面写的appid不是公众号的appid，而是移动应用的appid。这个怪我没好好读文档导致的。

<wx-open-launch-app
	 id="launch-btn"
	 appid="wxc8d81336736a6d43" //**app的appid**
	 extinfo=""
	>

3，

• import wx from 'weixin-js-sdk'

这个weixin-js-sdk是一定要在使用页面引入的。判断是否引入成功，就是后面的debug模式一定要开启的。

4，

wx.config({
　　　　debug: true, // 开启调试模式,
　　　　appId: 'wxcdbe7983be8fb746', // 必填，企业号的唯一标识，此处填写企业号corpid
　　　　timestamp: this.time, // 必填，生成签名的时间戳
　　　　nonceStr: this.nums, // 必填，生成签名的随机串
　　　　signature: this.signature,// 必填，签名，见附录1
	   jsApiList: ['wx-open-launch-app'],
　　　　openTagList: ['wx-open-launch-app'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
　　});

• 在调试的时候，一定要将debug调成true,这样的话就进入的是调试模式，调试模式下，进入页面后，就会有弹框弹出：config:fail表示这个标签引入是失败的；
  config:ok表示这个标签的引入是成功的。

5,

wx.ready(function (res) {
	console.log(res)
});
wx.error(function (res) {
    console.log(res)
  
});

var btn = document.getElementById('launch-btn');
 btn.addEventListener('launch', function (e) {
console.log('success');
 });
 btn.addEventListener('error', function (e) {
console.log('fail', e.detail);
 });

这段代码的回调判断可以直接得到wx的引入是否成功。e.detail.errMsg的报错信息是比较关键的。具体的报错原因要到微信的官方上看。上面给出了很多种报错的可能性以及解决方案。

附录5-常见错误及解决方法https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62

兼容性问题
现在开发遇到了一个兼容性的问题，正在解决当中。问题描述如下：

• 在安卓机型的微信浏览器中，打开h5页面，点击出现弹框，但是弹框的按钮部分，本来应该是“打开App”字样，但是却是空白的。

  解决排查方案：

1. 思考是否是兼容的问题：

2. 线索：苹果手机可以正常显示“打开App”字样，只有安卓机型不显示。所以初步判定是兼容的问题，但是另一个banner上的“打开App”可以正常显示，所以这个标签本身对安卓是不过敏的，因此我认为不显示和弹框有很大的关系。

3. 排查步骤： 是否是Dom层的问题：因此我去掉了微信标签，换成了原来的按钮html,
   现在的结果是：按钮显示出来了，文字也显示了。完成✅

4. 进行下一步：让按钮上的文字能有正常的显示样式。完成✅

5. 进行第4步：将微信标签加到Dom中。观察按钮是否还在。❌完全不显示了

6. 5,排查一下是否是标签外部没加view导致的。因此我在标签外部加了view,并且给了这个view宽度以及高度和背景颜色。❌即使外部的框显示出来了，内部的也没有显示。

7. 我将没有问题的代码直接复制过来了，看看会不会出错。❌我已经试了所有的可能性，还是没出现这个按钮！！！我绝望了

8. 也许是z-index 的问题吗？好像就是❌，并不是的。

9. 终于发现了问题，这个微信标签是不可以和position :
   fixed一起用的。我的弹框的样式都是用固定定位写的，因此出了问题。那么，我写在外面可不可以呢？？试一下吧：我将标签按钮写在了position:fixed的外面。答案是：可以的。✅

10. 在网上：微信开放平台的问答区找到了合适的方法。将这个标签的定位定在弹框的确认按钮上，然后将这个按钮设为完全透明，这样用户点击时，实际上触法的是覆盖在弹框上的透明按钮。✅
    这里要注意的点是：微信标签的按钮宽高样式不支持rpx，使用px就好。还有覆盖层级z-index要注意。

11. 最后一步了，现在安卓手机的兼容问题已经解决了大部分。安卓上按钮可以点击了。但是：按钮不可以和v-show一起用！！！这样的问题就是：按钮会一直存在于页面上，不会和弹框一起消失，一起出现！！现在还没解决这个问题！！

12. ✅终于解决了这个问题：v-show会让按钮在安卓机上不显示呢，换成v-if就可以了。 ⛽️

    完成啦！！！
    代码会在下一篇文章中贴出来。