分享和H5跳转到APP开放标签wx-open-launch-app使⽤及样式设置H5、、App唤端相关
⼀、分享
参看：
⼆、浏览器H5跳转到APP
user-agent.js
/**
* 判断设备类型
*/
function isClient(clientName){
return(
window.navigator.userAgent
.
toLowerCase()
.LowerCase())>-1
);
}
function isiPhone(){
return isClient("iPhone");
}
function isAndroid(){
return isClient("Android");
}
function isWeixin(){
return isClient("MicroMessenger");
}
// 安卓和ios的跳转路径和下载地址
const configs ={
Android:{
scheme:"AndroidScheme://path",
download:"www.demo/app-release.apk",
},
iPhone:{
scheme:"iOSScheme://path",
download:"itunes.apple/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. 服务号已认证
2. 开放平台账号已认证
3. 服务号与开放平台账号同主体
翻译⼀下就是：
1. 注册⼀个【服务号】并认证（￥300）
2. 注册⼀个账号，并完成开发者资质认证（￥300）
3. 最关键的是需要【服务号】和【开放平台账号】认证主体⼀致！不然前⾯的钱就打⽔漂了⼆、⽂档
官⽅⽂档很详细，这⾥不做赘述
1.
2.
3.
三、重要的设置
1、设置IP⽩名单
该IP地址获取access_token
navigator标签开发->基本配置->开发信息->IP⽩名单
2、绑定安全域名
设置->设置->功能设置->JS接⼝安全域名
3、绑定所需要跳转的App
这⾥也需要设置安全域名
管理中⼼ -> 公众帐号 -> 接⼝信息 -> ⽹页跳转移动应⽤ -> 关联设置中绑定所需要跳转的App
四、注意点
1、Android和iOS需要做好设置，才能拉起成功
2、⼏个重要参数的获取
1. 开发者ID(AppID) 来⾃
2. 开发者密码(AppSecret) 来⾃
3. 移动应⽤Appid 来⾃
配置⽰例：
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>
五、样式设置
⾸先明确⼏点：
1. wx-open-launch-app标签外部样式和内部样式是隔离的
2. wx-open-launch-app这个标签可以加样式style
所以，如果在页⾯中使⽤这个拉起标签，这个地⽅的样式和周围的不⼀样。
设置样式：
1. 外层span标签设置相对定位;
2. wx-open-launch-app设置绝对定位，⾥边放⼀个空的元素，并设置⾼度和宽度，遮罩住底层标签;
3. 打开APP 处的span标签就可以使⽤外层样式了
<span ><span>打开APP</span><wx-open-launch-app
id="launch-btn"
appid="APPID"
extinfo='{"name": "Tom", "age": 18}'
>
<template>
<style>
.wx-btn{
width:100%%;
height:20px;
}
</style>
<div class="wx-btn"></div>
</template>
</wx-open-launch-app></span>
参考

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。