H5跳转APP(React-Native)并打开APP内某个页面场景: 通过H5活动的某个页面直接打开RN框架的APP,

场景:

通过H5活动的某个页面直接打开RN框架的APP,并进入其中某页面,在浏览器中直接打卡APP的话需要借助到URL Scheme协议

URL Scheme应用场景:

通过小程序打开原生APP
H5页面跳转到APP端并去具体的某个页面
APP根据URL跳转到另一个APP指定页面
通过短信中的URL打开原生APP

Scheme协议格式:

[scheme]://[host][:port]/[path]?[query]

scheme: 协议名称(由开发人员自定义，可以去问APP开发人员要)，必要
host: 域名
port: 端口
query: 参数

步骤一: 判断用户使用环境

// 如果是小程序内嵌最好分开搞,小程序的缓存池和微信内置浏览器的缓存池有点奇怪
var u = navigator.userAgent;
var brower = null;
if(u.toLowerCase().indexOf('micromessenger') !== -1){
    brower = 'WEIXIN-brower'; // 微信内浏览器
}else if(this.$route.query.terminal==='APP'){
    brower = 'APP-brower';  //APP内嵌(看你跟你们APP协商的传参字段)
}else{
    brower = 'other-brower';    //其他外部浏览器
}
// 判断终端
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

步骤二: 在不同的环境分别做不同的处理

在APP的环境下: 这边看你跟APP那边的协商，还有业务需求，设置对应的参数和跳转页面

//也可以通过这个方法给RN传参,调用RN的方法,如分享等
window.ReactNativeWebView.postMessage(JSON.stringify({route: '******'}));

在其他浏览器下: 使用URL Scheme方式唤起APP

location.href = '*****://https://***.*****.cn/?type=*****'
//设置两秒如果没有打开APP，则去下载页面
setTimeout(function(){
 let hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden ||window.document.webkitHidden
 if(typeof hidden =="undefined" || hidden ==false){
   window.location.href ="没有安装APP,去下载页面"
 }
}, 2000)

补充: 可以使用openinstall 使用方式: 根据文档接入即可

问题:

微信里面好像不能直接使用URL Scheme协议,如果这样的话可以提示去浏览器打开