一、微信分享
二、浏览器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>