H5、微信、App唤端相关
一、微信分享
二、浏览器H5跳转到APP
user-agent.js
/** * 判断设备类型 */ function isClient(clientName) { return ( window.navigator.userAgent .toLowerCase() .indexOf(clientName.toLowerCase()) > -1 ); } function isiPhone() { return isClient("iPhone"); } function isAndroid() { return isClient("Android"); } function isWeixin() { return isClient("MicroMessenger"); }
// 安卓和ios的跳转路径和下载地址 const configs = { Android: { scheme: "AndroidScheme://path", download: "https://www.demo.com/app-release.apk", }, iPhone: { scheme: "iOSScheme://path", download: "https://itunes.apple.com/cn/app/app-id", }, } // 通过环境判断获取配置 window.location.href = config.scheme let downloader = window.setTimeout(() => { // 2s超时后跳转到app下载 window.location.href = config.download; }, 2500); document.addEventListener( "visibilitychange webkitvisibilitychange", function () { // 如果页面隐藏，推测打开scheme成功，清除下载任务 if (document.hidden || document.webkitHidden) { clearTimeout(downloader); } } ); window.addEventListener("pagehide", function () { clearTimeout(downloader); });
三、微信H5跳转到APP
接口代码配置并不复杂，最麻烦的是准备账号
一、条件说明
微信内访问网页时跳转到 APP条件：
- 服务号已认证
- 开放平台账号已认证
- 服务号与开放平台账号同主体
翻译一下就是：
二、文档
官方文档很详细，这里不做赘述
三、重要的设置
1、微信公众平台设置IP白名单
该IP地址获取access_token
开发->基本配置->公众号开发信息->IP白名单
2、微信公众平台绑定安全域名
设置->公众号设置->功能设置->JS接口安全域名
3、微信开放平台绑定所需要跳转的App
这里也需要设置安全域名
管理中心 -> 公众帐号 -> 接口信息 -> 网页跳转移动应用 -> 关联设置中绑定所需要跳转的App
四、注意点
1、Android和iOS需要做好设置，才能拉起成功
2、几个重要参数的获取
配置示例：
wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印 appId: '<开发者ID(AppID)>', // 必填，公众号的唯一标识 timestamp: '', // 必填，生成签名的时间戳 nonceStr: '', // 必填，生成签名的随机串 signature: '',// 必填，签名 jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'], // 必填，需要使用的JS接口列表 openTagList: ['wx-open-launch-app'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app'] });
<wx-open-launch-app id="launch-btn" appid="<移动应用Appid>" extinfo="your-extinfo" > <template> <style>.btn { padding: 12px }</style> <button class="btn">App内查看</button> </template> </wx-open-launch-app>
五、样式设置
首先明确几点：
- wx-open-launch-app标签外部样式和内部样式是隔离的
- wx-open-launch-app这个标签可以加样式style
所以，如果在页面中使用这个拉起标签，这个地方的样式和周围的不一样。
设置样式：
- 外层span标签设置相对定位;
- wx-open-launch-app设置绝对定位，里边放一个空的元素，并设置高度和宽度，遮罩住底层标签;
打开APP处的span标签就可以使用外层样式了
<span style="position:relative;"><span>打开APP</span><wx-open-launch-app id="launch-btn" appid="APPID" extinfo='{"name": "Tom", "age": 18}' style="position:absolute;top:0;left:0;right:0;bottom:0;" > <template> <style> .wx-btn{ width:100%%; height:20px; } </style> <div class="wx-btn"></div> </template> </wx-open-launch-app></span>
参考
