H5跳转APP(React-Native)并打开APP内某个页面

H5跳转APP(React-Native)并打开APP内某个页面

技术杂谈小彩虹2021-07-29 5:33:00190A+A-

场景:

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

URL Scheme应用场景:

  1. 通过小程序打开原生APP
  2. H5页面跳转到APP端并去具体的某个页面
  3. APP根据URL跳转到另一个APP指定页面
  4. 通过短信中的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协议,如果这样的话可以提示去浏览器打开

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们