开发react native 中出现一个之前没碰到过的需求,那就是浏览公司的网站页面的时候可以点击链接跳转到app里面去。如何才能实现这个需求呢, 你需要以下几个条件
1. ios developer 账号
2. https 服务器,之前想看看本地的https 服务器行不行, 结果是不行。也就是说测试的网站的服务器必须是https的。
第一步准备好一个不带任何后缀的文本文件, 文件名字是 ’apple-app-site-association‘ 。 文本的内容如下
{
"applinks": {
"apps": [],
"details": [
{
"appID": "8NL2H3YTL7.org.reactjs.native.example.dummpAppJacky",
"paths": [ "/download" ]
}
]
}
}
这里有个两个东西需要配置
一个是appID
如果你是app用的是开发者账号的话,打开 https://developer.apple.com/account/ios/identifier/bundle。
选择你当前的app 就能看到你app 的prefix 和 ID.
那这个appleID, 就是prefix + id 的组合了。 ‘ 8NL2H3YTL7’ 是prefix
‘org.reactjs.native.example.dummpAppJacky’ 就是id 了。
第二个就是‘paths’了
这个path 就是说你网站的什么页面可以打开app. 我这边配置的是download页面可以打开。也就是说 假设我的网站是 https://www.example.com, 那么在手机的safari访问https://www.example.com/download 就会弹出是否打开app的弹窗了。 也可以用通配符来配置 ,这里就不做介绍了。
配置好这个文件之后, 下面这个步骤很重要. 你需要把这个文件上传到你的https的服务器上面,只要是你的网站请求 ‘/apple-app-site-association’能够正确下载到这个文件,那就可以。 也就是说 https://www.example.com/apple-app-site-association 如果能够下载到上传的文件, 那就ok了。 这个文件是提供给app 下载的, 他需要跟我们的https 服务器沟通,读取配置,文件能正确下载, 里面的appID 能对应的上的时候, 我们的app才算是正确的hook 上了。
第二步需要用xcode 配置app了, 首先用xcode 打开项目, 然后在capabilities 里面把Associated Domains 打开, 然后设置添加一个domians.
如果说你的网站地址是https://example.com , 那就在dominas 里面添加一个
applinks:example.com。
当上面的都配置好了之后,就可以把app 打包 安装到手机上了。
接下来就是测试了, 这里还有一个问题, 那就是跨域的问题。
上面我们配置的规则是当我们用safari打开https://www.example.com/download
的时候,app可以被拉起,但前提是, 你当前不能在https://www.example.com/ 这个域名下。 什么意思呢, 如果你是在 https://www.exmaple.com/account 这个页面下, 点击 https://www.exmaple.com/download 是无法唤起app的, 因为是同一个域名, 如果是当前是在 https://subdomain.exmaple.com,或者是https://www.otherexample.com 下面的话,点击链接https://www.exmaple.com/download , 那么app 才能被唤起。这是ios 的一个坑。
接下来是就是唤起之后, apple 如何处理这个跳转了, 贴一段别人的代码
componentDidMount(){
// this handles the case where the app is closed and is launched via Universal Linking.
Linking.getInitialURL()
.then((url) => {
if (url) {
// Alert.alert('GET INIT URL','initial url ' + url)
this.resetStackToProperRoute(url)
}
})
.catch((e) => {})
// This listener handles the case where the app is woken up from the Universal or Deep Linking
Linking.addEventListener('url', this.appWokeUp);
}
componentWillUnmount(){
// Remove the listener
Linking.removeEventListener('url', this.appWokeUp);
}
appWokeUp = (event) => {
// this handles the use case where the app is running in the background and is activated by the listener...
// Alert.alert('Linking Listener','url ' + event.url)
this.resetStackToProperRoute(event.url)
}
resetStackToProperRoute = (url) => {
// Do Whatever you need to do within your app to redirect users to the proper route
}
在 react native 的最外面一层的component 可以获取到那个url 了。