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

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

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

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

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

<wx-open-launch-appid="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', // 必填，企业号的唯一标识，此处填写企业号corpidtimestamp: this.time, // 必填，生成签名的时间戳nonceStr: this.nums, // 必填，生成签名的随机串signature: this.signature,// 必填，签名，见附录1jsApiList: ['wx-open-launch-app'],openTagList: ['wx-open-launch-app'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2});

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

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的外面。答案是：可以的。

打开App:微信浏览器内部打开app跳转相关推荐
1. 怎么微信浏览器里打开APP
  最近在做一个需求,希望在微信浏览器里打开 h5 页面,然后直接唤起自家的 APP.搜索一番,发现微信早在 2020 年就开放一个标签,用于打开 APP,再也不需要干儿子了. 没有太多研究时间,大致说下 ...
2. html 链接到 appstore,如何在微信浏览器内打开App Store链接
  微信浏览器是不支持打开 App Store 页面的,不知道微信为什么这么做. 比如你页面写 download ,在微信浏览器点击是没有反应的,但是如果是其他的链接地址,如百度就没有问题. 但是,如果在 ...
3. php判断微信浏览器跳转页面跳转,判断当前网页是否在微信浏览器中打开
  这几天一直在与微信内置的浏览器打交道,也总结出一些如何判断当前浏览器环境是否为微信浏览器的小经验(其实代码网上一搜一大把),今天记录一下. 判断网页是否在微信浏览器中打,一般都是通过请求头信息中的HT ...
4. h5页面提示只能在微信浏览器中打开_h5移动端开发判断只能在微信浏览器打开...
  在开发的过程中可能会遇到项目只能在微信浏览器打开的需求,那么只需要在项目的页面添加以下代码即可(单页面应用在入口文件添加即可). var ua = navigator.userAgent.toLowe ...
5. js判断是否在微信浏览器中打开
  js判断是否在微信浏览器中打开 function is_weixn(){ var ua = navigator.userAgent.toLowerCase(); if(ua.match(/MicroM ...
6. Js判断是否在微信浏览器中打开和微信版本号
  一.判断微信版本号 var wechatInfo = navigator.userAgent.match(/MicroMessenger\\/([\\d\\.]+)/i) ; if( !wechatI ...
7. 微信浏览器中打开QQ聊天QQ群
  微信浏览器中打开QQ聊天QQ群打开QQ个人聊天 295124540换成自己QQ号即可方法一: <a href="http://wpa.qq.com/msgrd?v=3&ui ...
8. H5页面在微信浏览器中打开，右上角没有出现三个点
  在发现问题的日期2020/09/23,微信好像出现了纯H5页面在微信浏览器中打开右上角没有三个点,经过同文件更换多个服务器和域名测试,发现可能是由于打开的域名的没有备份,现在正在走备案流程,出现问题换 ...
9. ios下微信浏览器如何唤醒app?app已上架应用宝
  android下可以通过在应用宝微下载地址后面加参数&android_schema='应用schema'来实现,ios下如何实现? ios下微信浏览器如何唤醒app?app已上架应用宝 > ...
最新文章
热门文章

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

打开App:微信浏览器内部打开app跳转相关推荐

最新文章

热门文章