微信内打开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”字样,但是却是空白的。
解决排查方案:
-
思考是否是兼容的问题:
-
线索:苹果手机可以正常显示“打开App”字样,只有安卓机型不显示。所以初步判定是兼容的问题,但是另一个banner上的“打开App”可以正常显示,所以这个标签本身对安卓是不过敏的,因此我认为不显示和弹框有很大的关系。
-
排查步骤: 是否是Dom层的问题:因此我去掉了微信标签,换成了原来的按钮html,
现在的结果是:按钮显示出来了,文字也显示了。完成✅ -
进行下一步:让按钮上的文字能有正常的显示样式。完成✅
-
进行第4步:将微信标签加到Dom中。观察按钮是否还在。❌完全不显示了
-
5,排查一下是否是标签外部没加view导致的。因此我在标签外部加了view,并且给了这个view宽度以及高度和背景颜色。❌即使外部的框显示出来了,内部的也没有显示。
-
我将没有问题的代码直接复制过来了,看看会不会出错。❌我已经试了所有的可能性,还是没出现这个按钮!!!我绝望了
-
也许是z-index 的问题吗?好像就是❌,并不是的。
-
终于发现了问题,这个微信标签是不可以和position :
fixed一起用的。我的弹框的样式都是用固定定位写的,因此出了问题。那么,我写在外面可不可以呢??试一下吧:我将标签按钮写在了position:fixed的外面。答案是:可以的。🙆✅ -
在网上:微信开放平台的问答区找到了合适的方法。将这个标签的定位定在弹框的确认按钮上,然后将这个按钮设为完全透明,这样用户点击时,实际上触法的是覆盖在弹框上的透明按钮。✅
这里要注意的点是:微信标签的按钮宽高样式不支持rpx,使用px就好。还有覆盖层级z-index要注意。 -
最后一步了,现在安卓手机的兼容问题已经解决了大部分。安卓上按钮可以点击了。但是:按钮不可以和v-show一起用!!!这样的问题就是:按钮会一直存在于页面上,不会和弹框一起消失,一起出现!!现在还没解决这个问题!!
-
✅终于解决了这个问题:v-show会让按钮在安卓机上不显示呢,换成v-if就可以了。 ⛽️😄
完成啦!!!
代码会在下一篇文章中贴出来。