ReactNative页面跳转实例代码 | WEB开发
ReactNative页面跳转实例代码
效果图如下所示：
进入工作目录，运行
react-native init NavigatorProject
创建项目NavigatorProject
import React, { Component } from 'react';
AppRegistry,
StyleSheet,
TouchableHighlight,
} from 'react-native';
class navigatorProject extends Component{
let defaultName = 'firstPageName';
let defaultComponent = FirstPageC
&Navigator
initialRoute = {{name: defaultName, component: defaultComponent}}　　//初始化导航器Navigator,指定默认的页面
configureScene = {
(route) =& {
return Navigator.SceneConfigs.FloatFromR　　//配置场景动画，页面之间跳转时候的动画
renderScene = {
(route, navigator) =&{
let Component = route.
return &Component{...route.params} navigator = {navigator} /&　　//渲染场景
//第一个页面
class FirstPageComponent extends Component{
clickJump(){
const{navigator} = this.
if(navigator){
navigator.push({　　//navigator.push 传入name和你想要跳的组件页面
name: "SecondPageComponent",
component: SecondPageComponent
&View style = {styles.container}&
&Text&我是第一个页面&/Text&
&TouchableHighlight
underlayColor = "rgb(180,135,250)"
activeOpacity = {0.5}
style = {{
borderRadius: 8,
padding: 8,
marginTop: 8,
backgroundColor: "#F30"
onPress = {this.clickJump.bind(this)}&
&Text&点击进入第二个页面&/Text&
&/TouchableHighlight&
//第二个页面
class SecondPageComponent extends Component{
clickJump(){
const{navigator} = this.
if(navigator){
navigator.pop();　　//navigator.pop 使用当前页面出栈, 显示上一个栈内页面.
&View style = {styles.container}&
&Text&我是第二个页面&/Text&
&TouchableHighlight
underlayColor = "rgb(180, 135, 250)"
activeOpacity = {0.5}
style = {{
borderRadius: 8,
padding: 8,
marginTop: 5,
backgroundColor: "#F30"
onPress = {this.clickJump.bind(this)}&
&Text&点击返回第一个页面&/Text&
&/TouchableHighlight&
const styles = StyleSheet.create({
　container: {
　　flex: 1,
　　justifyContent: 'center',
　　alignItems: 'center',
　　backgroundColor: '#FFFFFF',
AppRegistry.registerComponent('navigatorProject', () =& navigatorProject);
以上所述是小编给大家介绍的ReactNative页面跳转实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对源码天空网站的支持！51CTO旗下网站
浏览器中唤起Native App
前段时间遇到一个小需求：要求在分享出来的h5页面中，有一个立即打开的按钮，如果本地安装了我们的app，那么点击就直接唤起本地app，如果没有安装，则跳转到下载。
作者：佚名来源：| 14:13
前段时间遇到一个小需求：要求在分享出来的h5页面中，有一个立即打开的按钮，如果本地安装了我们的app，那么点击就直接唤起本地app，如果没有安装，则跳转到下载。
因为从来没有做过这个需求，因此这注定是一个苦逼的调研过程。
我们最开始就面临2个问题：一是如何唤起本地app，二是如何判断浏览器是否安装了对应app。
如何唤起本地app
首先，想要实现这个需求，肯定是必须要客户端同学的配合才行，因此我们不用知道所有的实现细节，我们从前端角度思考看这个问题，需要知道的一点是，ios与Android都支持一种叫做schema协议的链接。比如网易新闻客户端的协议为
newsapp://xxxxx&
当然，这个协议不需要我们前端去实现，我们只需要将协议放在a标签的href属性里，或者使用location.href与iframe来实现激活这个链接。而location.href与iframe是解决这个需求的关键。
在ios中，还支持通过smart app banner来唤起app，即通过一个meta标签，在标签里带上app的信息，和打开后的行为，代码形如
&meta&name=&apple-itunes-app&&content=&app-id=,&app-argument=tigerbrokersusstock://com.tigerbrokers.usstock/post?postId=7125&/&&
我们还需要知道的一点是，微信里屏蔽了schema协议。除非你是微信的合作伙伴之类的，他们专门给你配置进白名单。否则我们就没办法通过这个协议在微信中直接唤起app。
因此我们会判断页面场景是否在微信中，如果在微信中，则会提示用户在浏览器中打开。
如何判断本地是否安装了app
很无奈的是，在浏览器中无法明确的判断本地是否安装了app。因此我们必须采取一些取巧的思路来解决这个问题。
我们能够很容易想到，采用设置一个延迟定时器setTimeout的方式，第一时间尝试唤起app，如果200ms没有唤起成功，则默认本地没有安装app，200ms以后，将会触发下载行为。
结合这个思路，我们来全局考虑一下这个需求应该采用什么样的方案来实现它。
使用location.href的同学可能会面临一个担忧，在有的浏览器中，当我们尝试激活schema
link的时候，若本地没有安装app，则会跳转到一个浏览器默认的错误页面去了。因此大多数人采用的解决方案都是使用iframe
测试了很多浏览器，没有发现过这种情况
后来观察了网易新闻，今日头条，YY等的实现方案，发现大家都采用的是iframe来实现。好吧，面对这种情况，只能屈服。
整理一下目前的思路，得到下面的解决方案
var&url&=&{&&&&open:&'app://xxxxx',&&&&down:&'xxxxxxxx'&&};&&var&iframe&=&document.createElement('iframe');&&var&body&=&document.&&iframe.style.cssText='display:width=0;height=0';&&var&timer&=&null;&&&&&//&立即打开的按钮&&var&openapp&=&document.getElementById('openapp');&&openapp.addEventListener('click',&function()&{&&&&if(/MicroMessenger/gi.test(navigator.userAgent)&{&&&&&&//&引导用户在浏览器中打开&&&&})&else{&&&&&&body.appendChild(iframe);&&&&&&iframe.src&=&url.open;&&&&&&timer&=&setTimeout(function()&{&&&&&&&&wondow.location.href&=&url.&&&&&&},&500);&&&&}&&},&false)&&
想法很美好，现实很残酷。一测试，就发现简单的这样实现有许多的问题。
第一个问题在于，当页面成功唤起app之后，我们再切换回来浏览器，发现跳转到了下载页面。
为了解决这个问题，发现各个公司都进行了不同方式的尝试。
也是历经的很多折磨，发现了几个比较有用的事件。
pageshow： 页面显示时触发，在load事件之后触发。需要将该事件绑定到window上才会触发
pagehide: 页面隐藏时触发
visibilitychange： 页面隐藏没有在当前显示时触发，比如切换tab，也会触发该事件
document.hidden 当页面隐藏时，该值为true，显示时为false
由于各个浏览器的支持情况不同，我们需要将这些事件都给绑定上，即使这样，也不一定能够保证所有的浏览器都能够解决掉这个小问题，实在没办法的事情就不管了。
因此需要扩充一下上面的方案，当本地app被唤起，则页面会隐藏掉，就会触发pagehide与visibilitychange事件
$(document).on('visibilitychange&webkitvisibilitychange',&function()&{&&&&&&var&tag&=&document.hidden&||&document.webkitH&&&&&&if&(tag)&{&&&&&&&&&&clearTimeout(timer);&&&&&&}&&})&&&&&$(window).on('pagehide',&function()&{&&&&&&clearTimeout(timer);&&})&&
而另外一个问题就是IOS9+下面的问题了。ios9的Safari，根本不支持通过iframe跳转到其他页面去。也就是说，在safari下，我的整体方案被全盘否决!
于是我就只能尝试使用location.href的方式，这个方式能够唤起app，但是有一个坑爹的问题，使用schema协议唤起app会有弹窗而不会直接跳转去app!甚至当本地没有app时，会被判断为链接无效，然后还有一个弹窗。
这个弹窗会造成什么问题呢?如果用户不点确认按钮，根据上面的逻辑，这个时候就会发现页面会自动跳转到下载去了。而且无效的弹窗提示在用户体验上是不允许出现的。
好吧，继续扒别人的代码，看看别人是如何实现的。然后我又去观摩了其他公司的实现结果，发现网易新闻，今日头条都可以在ios直接从微信中唤起app。真是神奇了，可是今日头条在Android版微信上也没办法直接唤起的，他们在Android上都是直接到腾讯应用宝的下载里去。所以按道理来说这不是添加了白名单。
为了找到这个问题的解决方案，我在网易新闻的页面中扒出了他们的代码，并整理如下，添加了部分注释
window.NRUM&=&window.NRUM&||&{};&&window.NRUM.config&=&{&&&&&&key:'27e86c0843344caca7ba9ea652d7948d',&&&&&&clientStart:&+new&Date()&&};&&(function()&{&&&&&&var&n&=&document.getElementsByTagName('script')[0],&&&&&&&&&&s&=&document.createElement('script');&&&&&&&&&s.type&=&'text/javascript';&&&&&&s.async&=&true;&&&&&&s.src&=&'//nos.netease.com/apmsdk/napm-web-min-1.1.3.js';&&&&&&n.parentNode.insertBefore(s,&n);&&})();&&&&&&&&;&&(function(window,doc){&&&&&&&&&//&http://apm.netease.com/manual?api=web&&&&&&NRUM.mark&&&&NRUM.mark('pageload',&true)&&&&&&&&&var&list&=&[]&&&&&&var&config&=&null&&&&&&&&&//&jsonp&&&&&&function&jsonp(a,&b,&c)&{&&&&&&&&&&var&d;&&&&&&&&&&d&=&document.createElement('script');&&&&&&&&&&d.src&=&a;&&&&&&&&&&c&&&&(d.charset&=&c);&&&&&&&&&&d.onload&=&function()&{&&&&&&&&&&&&&&this.onload&=&this.onerror&=&null;&&&&&&&&&&&&&&this.parentNode.removeChild(this);&&&&&&&&&&&&&&b&&&&b(!0);&&&&&&&&&&};&&&&&&&&&&d.onerror&=&function()&{&&&&&&&&&&&&&&this.onload&=&this.onerror&=&null;&&&&&&&&&&&&&&this.parentNode.removeChild(this);&&&&&&&&&&&&&&b&&&&b(!1);&&&&&&&&&&};&&&&&&&&&&document.head.appendChild(d);&&&&&&};&&&&&&&&&&&&function&localParam(search,hash){&&&&&&&&&&search&=&search&||&window.location.&&&&&&&&&&hash&=&hash&||&window.location.&&&&&&&&&&var&fn&=&function(str,reg){&&&&&&&&&&&&&&if(str){&&&&&&&&&&&&&&&&&&var&data&=&{};&&&&&&&&&&&&&&&&&&str.replace(reg,function(&$0,&$1,&$2,&$3&){&&&&&&&&&&&&&&&&&&&&&&data[&$1&]&=&$3;&&&&&&&&&&&&&&&&&&});&&&&&&&&&&&&&&&&&&return&&&&&&&&&&&&&&&}&&&&&&&&&&}&&&&&&&&&&return&{search:&fn(search,new&RegExp(&&([^?=&]+)(=([^&]*))?&,&&g&&))||{},hash:&fn(hash,new&RegExp(&&([^#=&]+)(=([^&]*))?&,&&g&&))||{}};&&&&&&}&&&&&&&&&jsonp('http://active.163.com/service/form/v1/5847/view/1047.jsonp')&&&&&&&&&window.search&=&localParam().search&&&&&&window._callback&=&function(data)&{&&&&&&&&&&window._callback&=&null&&&&&&&&&&list&=&data.list&&&&&&&&&&if(search.s&&&&!!search.s.match(/^wap/i))&{&&&&&&&&&&&&&&config&=&list.filter(function(item){&&&&&&&&&&&&&&&&&&return&item.type&===&'wap'&&&&&&&&&&&&&&})[0]&&&&&&&&&&&&&&return&&&&&&&&&&}&&&&&&&&&&config&=&list.filter(function(item){&&&&&&&&&&&&&&return&item.type&===&search.s&&&&&&&&&&})[0]&&&&&&}&&&&&&&&&var&isAndroid&=&!!navigator.userAgent.match(/android/ig),&&&&&&&&&&isIos&=&!!navigator.userAgent.match(/iphone|ipod/ig),&&&&&&&&&&isIpad&=&!!navigator.userAgent.match(/ipad/ig),&&&&&&&&&&isIos9&=&!!navigator.userAgent.match(/OS&9/ig),&&&&&&&&&&isYx&=&!!navigator.userAgent.match(/MailMaster_Android/i),&&&&&&&&&&isNewsapp&=&!!navigator.userAgent.match(/newsapp/i),&&&&&&&&&&isWeixin&=&(/MicroMessenger/ig).test(navigator.userAgent),&&&&&&&&&&isYixin&=&(/yixin/ig).test(navigator.userAgent),&&&&&&&&&&isQQ&=&(/qq/ig).test(navigator.userAgent),&&&&&&&&&&params&=&localParam().search,&&&&&&&&&&url&=&'newsapp://',&&&&&&&&&&iframe&=&document.getElementById('iframe');&&&&&&&&&var&isIDevicePhone&=&(/iphone|ipod/gi).test(navigator.platform);&&&&&&var&isIDeviceIpad&=&!isIDevicePhone&&&&(/ipad/gi).test(navigator.platform);&&&&&&var&isIDevice&=&isIDevicePhone&||&isIDeviceI&&&&&&var&isandroid2_x&=&!isIDevice&&&&(/android\s?2\./gi).test(navigator.userAgent);&&&&&&var&isIEMobile&=&!isIDevice&&&&!isAndroid&&&&(/MSIE/gi).test(navigator.userAgent);&&&&&&var&android_url&=&(!isandroid2_x)&?&&http://3g.163.com/links/4304&&:&&http://3g.163.com/links/6264&;&&&&&&var&ios_url&=&&http://3g.163.com/links/3615&;&&&&&&var&wphone_url&=&&http://3g.163.com/links/3614&;&&&&&&var&channel&=&params.s&||&'newsapp'&&&&&&&&&//&判断在不同环境下app的url&&&&&&if(params.docid){&&&&&&&&&&if(params['boardid']&&&&params['title']){&&&&&&&&&&&&&&url&=&url&+&'comment/'&+&params.boardid&+&'/'&+&params.docid&+&'/'&+&params.title&&&&&&&&&&}else{&&&&&&&&&&&&&&url&=&url&+&'doc/'&+&params.docid&&&&&&&&&&}&&&&&&}else&if(params.sid){&&&&&&&&&&url&=&url&+&'topic/'&+&params.sid&&&&&&}else&if(params.pid){&&&&&&&&&&var&pid&=&params.pid.split('_')&&&&&&&&&&url&=&url&+&'photo/'&+&pid[0]&+&'/'&+&pid[1]&&&&&&}else&if(params.vid){&&&&&&&&&&url&=&url&+&'video/'&+&params.vid&&&&&&}else&if(params.liveRoomid){&&&&&&&&&&url&=&url&+&'live/'&+&params.liveRoomid&&&&&&}else&if(params.url){&&&&&&&&&&url&=&url&+&'web/'&+&decodeURIComponent(params.url)&&&&&&}else&if(params.expertid){&&&&&&&&&&url&=&url&+&'expert/'&+&params.expertid&&&&&&}else&if(params.subjectid){&&&&&&&&&&url&=&url&+&'subject/'&+&params.subjectid&&&&&&}else&if(params.readerid){&&&&&&&&&&url&=&url&+&'reader/'&+&params.readerid&&&&&&}else{&&&&&&&&&&url&+=&'startup'&&&&&&}&&&&&&if(url.indexOf('?')&&=&0){&&&&&&&&&&url&+=&'&s='&+&(params.s&||&'sps')&&&&&&}else{&&&&&&&&&&url&+=&'?s='&+&(params.s&||&'sps')&&&&&&}&&&&&&&&&//&ios&&&&易信&&用iframe&打开&&&&&&if((isIos||isIpad)&&&&navigator.userAgent.match(/yixin/i))&{&&&&&&&&&&document.getElementById('iframe').src&=&&&&&&&}&&&&&&&&&var&height&=&document.documentElement.clientH&&&&&&&&&//&通常情况下先尝试使用iframe打开&&&&&&document.getElementById('iframe').src&=&&&&&&&&&&//&移动端浏览器中，将下载页面显示出来&&&&&&if(!isWeixin&&&&!isQQ&&&&!isYixin&&&&!isYx){&&&&&&&&&&document.querySelector('.main-body').style.display&=&'block'&&&&&&&&&&if(isIos9){&&&&&&&&&&&&&&document.querySelector('.main-body').classList.add('showtip')&&&&&&&&&&}&&&&&&&&&&&&&setTimeout(function(){&&&&&&&&&&&&&&document.body.scrollTop&=&0&&&&&&&&&&},200)&&&&&&}else{&&&&&&&&&&document.getElementById('guide').style.display&=&'block'&&&&&&}&&&&&&&&&//&Forward&To&Redirect&Url&&&&&&//&Add&by&zhanzhixiang&12/28/2015&&&&&&if&(params.redirect)&{&&&&&&&&&&var&redirectUrl&=&decodeURIComponent(params.redirect);&&&&&&&&&&if&(&typeof(URL)&===&'function'&&&&new&URL(redirectUrl).hostname.search(&163.com&)&!==&-1)&{&&&&&&&&&&&&&&window.location.href&=&redirectU&&&&&&&&&&}&else&if&(redirectUrl.search(&163.com&)&!==&-1){&&&&&&&&&&&&&&window.location.href&=&redirectU&&&&&&&&&&};&&&&&&}&&&&&&&&&//&Forward&To&Redirect&Url&End&&&&&&if&((isWeixin&||&isQQ)&&&&isAndroid)&{&&&&&&&&&&window.location.href&=&'http://a.app.qq.com/o/simple.jsp?pkgname=com.netease.newsreader.activity&ckey=CK9&android_schema='&+　url.match(/(.*)\?/)[1]&&&&&&}&&&&&&&&&if(isIos||isIpad){&&&&&&&&&&document.getElementById(&guide&).classList.add('iosguideopen')&&&&&&}else&if&(isAndroid){&&&&&&&&&&document.getElementById(&guide&).classList.add('androidguideopen')&&&&&&}else{&&&&&&&&&&//&window.location.href&=&'http://www.163.com/newsapp'&&&&&&}&&&&&&&&&document.getElementById('link').addEventListener('click',&function(){&&&&&&&&&&&&&//&统计&&&&&&&&&&neteaseTracker&&&&neteaseTracker(false,'http://sps.163.com/func/?func=downloadapp&modelid='+modelid+'&spst='+spst+'&spsf&spss='&+&channel,'',&'sps'&)&&&&&&&&&&&&&if&(config)&{&&&&&&&&&&&&&&android_url&=&config.android&&&&&&&&&&}&&&&&&&&&&if&(config&&&&config.iOS)&{&&&&&&&&&&&&&&ios_url&=&config.iOS&&&&&&&&&&}&&&&&&&&&&if(isWeixin&||&isQQ){&&&&&&&&&&&&&&return&&&&&&&&&&}&&&&&&&&&&var&msg&=&isIDeviceIpad&?&&检测到您正在使用iPad,&是否直接前往AppStore下载?&&:&&检测到您正在使用iPhone,&是否直接前往AppStore下载?&;&&&&&&&&&&if&(isIDevice){&&&&&&&&&&&&&&window.location&=&ios_&&&&&&&&&&&&&&return;&&&&&&&&&&}else&if(isAndroid){&&&&&&&&&&&&&&//&uc浏览器用iframe唤醒&&&&&&&&&&&&&&if(navigator.userAgent.match(/ucbrowser|yixin|MailMaster/i)){&&&&&&&&&&&&&&&&&&document.getElementById('iframe').src&=&&&&&&&&&&&&&&&}&else&{&&&&&&&&&&&&&&&&&&window.location.href&=&&&&&&&&&&&&&&&}&&&&&&&&&&&&&&setTimeout(function(){&&&&&&&&&&&&&&&&&&if(document.webkitHidden)&{&&&&&&&&&&&&&&&&&&&&&&return&&&&&&&&&&&&&&&&&&}&&&&&&&&&&&&&&&&&&if&(confirm(&检测到您正在使用Android&手机，是否直接下载程序安装包？&))&{&&&&&&&&&&&&&&&&&&&&&&neteaseTracker&&&&neteaseTracker(false,'http://sps.163.com/func/?func=downloadapp_pass&modelid='+modelid+'&spst='+spst+'&spsf&spss='&+&channel,'',&'sps'&)&&&&&&&&&&&&&&&&&&&&&&window.location.href&=&android_&&&&&&&&&&&&&&&&&&}&else&{&&&&&&&&&&&&&&&&&&&&&&neteaseTracker&&&&neteaseTracker(false,'http://sps.163.com/func/?func=downloadapp_cancel&modelid='+modelid+'&spst='+spst+'&spsf&spss='&+&channel,'',&'sps'&)&&&&&&&&&&&&&&&&&&}&&&&&&&&&&&&&&},200)&&&&&&&&&&&&&&return;&&&&&&&&&&}else&if(isIEMobile){&&&&&&&&&&&&&&window.location&=&wphone_&&&&&&&&&&&&&&return;&&&&&&&&&&}else{&&&&&&&&&&&&&&window.open('http://www.163.com/special/00774IQ6/newsapp_download.html');&&&&&&&&&&&&&&return;&&&&&&&&&&}&&&&&&},&false)&&&&&&&&&setTimeout(function(){&&&&&&&&&&if(isIDevice&&&&params.notdownload&!=&1&&&&!isNewsapp&&&&!isIos9){&&&&&&&&&&&&&&document.getElementById('link').click()&&&&&&&&&&}&&&&&&},&1000)&&&&&})(window,document);&&
虽然有一些外部的引用，和一些搞不懂是干什么用的方法和变量，但是基本逻辑还是能够看明白。好像也没有什么特别的地方。研究了许久，看到了一个jsonp请求很奇特。这是来干嘛用的?
于是费尽千辛万苦，搜索了很多文章，最终锁定了一个关键的名词 Universal links。
如果我早知道这个名词，那么问题就不会变的那么束手无策。所以这个东西是什么呢?
Apple为iOS 9发布了一个所谓的通用链接的深层链接特性，即Universal
links。虽然它并不完美，但是这一发布，让数以千计的应用开发人员突然意识到自己的应用体验被打破。
Universal links，一种能够方便的通过传统的HTTP/HTTPS 链接来启动App，使用相同的网址打开网站和App。
关于这个问题的提问与universal
links的介绍(http://stackoverflow.com/questions//ios-9-safari-iframe-src-with-custom-url-scheme-not-working)
ios9推行的一个新的协议!
关于本文的这个问题，国内的论坛有许许多多的文章来解决，但是提到universal
links的文章少之又少，而我想吐槽的是，我们的ios开发也尼玛不知道这个名词，搞什么鬼。他改变了用户体验的关键在于，微信没有屏蔽这个协议。因此如果我们的app注册了这个协议，那么我们就能够从微信中直接唤起app。
这个时候我就发现，上面贴的网易新闻代码中的jsonp请求的内容，就是这个协议必须的一个叫做apple-app-site-association的JSON文件
{&&&&&&applinks&:&{&&&&&&&&&&apps&:&[&],&&&&&&&&&&details&:&{&&&&&&&&&&&&&&TEAM-IDENTIFIER.YOUR.BUNDLE.IDENTIFIER&:&{&&&&&&&&&&&&&&&&&&paths&:&[&&&&&&&&&&&&&&&&&&&&&&*&&&&&&&&&&&&&&&&&&]&&&&&&&&&&&&&}&&&&&&&&&}&&&&&}&&}&&
大家可以直接访问这个链接，查看里面的内容
http://active.163.com/service&
至于universal links具体如何实现，让ios的同学去搞定吧，这里提供两个参考文章
http://www.cocoachina.com/bbs&
https://blog.branch.io/how-to&
支持了这个协议之后，我们又可以通过iframe来唤起app了，因此基本逻辑就是这样了。
但是!并不是就没有坑了。
universal links还有一个大坑，就是如果想要通过universal
links只在在微信中打开app，同一个页面我们还得使用不同的两个域名。
这个特性虽然有点坑，但是通过这个特性却能够完美判断本地是否安装了你们的app。
比如我们正常访问当前页面的域名为A，对应的页面url为A+，而当我们点击按钮，需要打开app用到的域名为B，，对应的页面url为B+。
A与B都被注册成为了对应app的universal links，A+ 与 B+ 都指向同一个页面。
我们通过js判断，如果是通过B+访问的该页面，则直接跳去下载app。这样，当我们从A+通过点击访问B+时，如果universal
links生效并且本地安装了对应的app，app会直接被打开。如果本地没有安装App，则会直接执行刚才B+中跳去下载的设定。
OK，这个问题，几乎所有的坑我都在上面说到了，如果想要做好兼容，就是一个针对每个坑做最优选择了，这是一个工作量的问题。
不过最终的调研结果是
没有完美的解决方案
就算是网易新闻，这个按钮在使用过程中也会有一些小bug，无法做到完美的状态。
因为我们面临许多没办法解决的问题，比如无法真正意义上的判断本地是否安装了app，pageshow，pagehide并不是所有的浏览器都支持等。很多其他博客里面，什么计算时间差等方案，我花了很久的时间去研究这个方案，结果是，根!本!没!有!用!
老实说，从微信中跳转到外部浏览器，并不是一个好的解决方案，这样会导致很多用户流失，因此大家都在ios上实现了universal links。
网易新闻的逻辑是，点击打开会跳转到一个下载页面，这个下载页面一加载完成就尝试打开app，如果打开了就直接跑到app里面去了，如果没有就在页面上有一个立即下载的按钮，按钮行只有下载处理。
这个问题就总结到这里，如果大家有更好的方案，欢迎与我沟通。【编辑推荐】【责任编辑： TEL：（010）】
大家都在看猜你喜欢
热点关注关注头条头条
24H热文一周话题本月最赞
讲师：222327人学习过
讲师：37552人学习过
讲师：353114人学习过
CTO专属活动
精选博文论坛热帖下载排行
本书所介绍的Struts 2已经完全超出了Struts 1框架原有的高度，Struts 2建立在Struts 1和WebWork两个框架整合的基础之上，因此提供了更多优...
订阅51CTO邮刊鎵撲釜Native鐗堟湰鐨勫寘鍦≧untime鐜??涓嬭窇, 濡備綍璺宠浆椤甸潰鍛