android，ios配置scheme，react-native获取url

Posted 云烟溪雪

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了android，ios配置scheme，react-native获取url相关的知识，希望对你有一定的参考价值。

scheme协议定义

scheme 是一种页面之间跳转的协议，不仅可以用于app之间进行跳转，还可以用于 H5 页面跳转到app页面。
通过scheme协议，服务器可以定制化告诉App跳转那个页面，可以通过通知栏消息定制化跳转页面，可以通过H5页面跳转页面等。
无论android还是ios，都可以通过在H5页面中打开 scheme 协议的地址，从而打开本地app。

  • 苹果手机中的APP都有一个沙盒，APP就是一个信息孤岛，相互是不可以进行通信的。但是iOS的APP可以注册自己的URL Scheme，URL Scheme是为方便app之间互相调用而设计的。
    注意：
    URL Scheme必须能唯一标识一个APP，如果你设置的URL Scheme与别的APP的URL Scheme冲突时，你的APP不一定会被启动起来。因为当你的APP在安装的时候，系统里面已经注册了你的URL Scheme。

URL Scheme应用场景：

客户端应用可以向操作系统注册一个 URL scheme，该 scheme 用于从浏览器或其他应用中启动本应用。通过指定的 URL 字段，可以让应用在被调起后直接打开某些特定页面，比如商品详情页、活动详情页等等。也可以执行某些指定动作，如完成支付等。也可以在应用内通过 html 页来直接调用显示 app 内的某个页面。综上URL Scheme使用场景大致分以下几种：

  • 服务器下发跳转路径，客户端根据服务器下发跳转路径跳转相应的页面
  • H5页面点击锚点，根据锚点具体跳转路径APP端跳转具体的页面
  • APP端收到服务器端下发的PUSH通知栏消息，根据消息的点击跳转路径跳转相关页面
  • APP根据URL跳转到另外一个APP指定页面

scheme协议格式

scheme 协议定义和 http 协议类似，都是标准的 URI 结构。

[scheme:][//host:port][path][?query][#fragment]
scheme : 协议名称 - 必须
host : 协议地址 - 必须
port : 协议的端口，可以不填
path : 协议路径，可用 / 连接多个
query : 携带的参数可用 & 连接多个
fragment : 锚点
例子
下面看一个例子：

wexin://tencent.com:8080/dl/news/open?data=902323&params=test
  • weixin : 协议名称
  • tencent.com : 域名
  • 8080 : 端口
  • /dl/news/open : 页面的路径
  • data,params : 传递的参数

URL Scheme如何使用

Android配置

  1. 在AndroidManifest.xml中对<activity />标签增加<intent-filter />设置Scheme（只有第一步是必须配置的）
    在MainAcrtivity
        <activity
            android:name="com.app.MainActivity"
            android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
            android:label="@string/app_name"
            android:launchMode="singleTask"
            android:screenOrientation="portrait"
            android:windowSoftInputMode="adjustResize">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
            <intent-filter>
                <!--协议部分，随便设置-->
                <!-- 下面的scheme地址为 xl://goods -->
                <data android:scheme="xl"
                    android:host="goods"/>
                <!--下面这几行也必须得设置-->
                <category android:name="android.intent.category.DEFAULT"/>
                <action android:name="android.intent.action.VIEW"/>
                <category android:name="android.intent.category.BROWSABLE"/>
            </intent-filter>
        </activity>

在其他Activity

<activity
   android:name=".GoodsDetailActivity"
   android:theme="@style/AppTheme">
   <!--要想在别的App上能成功调起App，必须添加intent过滤器-->
   <intent-filter>
       <!--协议部分，随便设置-->
       <!-- 下面的scheme地址为 xl://goods:8888/goodsDetail -->
       <data android:scheme="xl" 
                 android:host="goods" 
                 android:path="/goodsDetail" 
                 android:port="8888"/>
       <!--下面这几行也必须得设置-->
       <category android:name="android.intent.category.DEFAULT"/>
       <action android:name="android.intent.action.VIEW"/>
       <category android:name="android.intent.category.BROWSABLE"/>
   </intent-filter>
</activity>

注释：
需要配置能被js调起，一定要配置下面这句

<category android:name="android.intent.category.BROWSABLE"/>

<!--必有项-->
<action android:name="android.intent.action.VIEW" />
<!--表示该页面可以被隐式调用，必须加上该项-->
<category android:name="android.intent.category.DEFAULT" />
<!--如果希望该应用可以通过浏览器的连接启动，则添加该项-->
<category android:name="android.intent.category.BROWSABLE" />

扩展：
上面的 data 节点中可以包含下面的信息来对相应的scheme进行过滤，一般需要配置 scheme 和 host。


<data 
    android:scheme=""
    android:host=""
    android:port=""
    android:path=""
    android:mimeType=""
    android:pathPattern=""
    android:pathPrefix=""
    android:ssp=""
    android:sspPattern=""
    android:sspPrefix=""
/>

然后在相应的 activity 可以获取 uri 中参数。


public class DeepLinkActivity extends AppCompatActivity 
    private static final String TAG = "DeepLinkActivity";
    @Override
    protected void onCreate(Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Intent intent = getIntent();
        Log.e(TAG, "scheme:"  + intent.getScheme());
        Uri uri = intent.getData();
        Log.e(TAG, "scheme: " + uri.getScheme()); // 获取 scheme 名称
        Log.e(TAG, "host: " + uri.getHost());     // 获取 scheme 的host
        Log.e(TAG, "path: " + uri.getPath());     // 获取 scheme 的路径
        Log.e(TAG, "queryString: "+  uri.getQuery()); // 获取 scheme 的参数,?后面的部分
        Log.e(TAG, "queryParameter: " + uri.getQueryParameter("param")); // 获取 scheme 中的 param 参数

其中的 intent 实例有下面的方法可以获取相应的 scheme 信息：

  • getScheme() :获取Uri中的scheme名称：[scheme:]
  • getSchemeSpecificPart() :获取Uri中的scheme-specific-part:部分：[//host:port][path]
  • getFragment() :获取Uri中的Fragment部分：[#fragment]
  • getAuthority() :获取Uri中Authority部分：[//host:port]
  • getPath() :获取Uri中path部分：[path]
  • getQuery() :获取Uri中的query部分：[?query]
  • getHost() :获取Authority中的Host字符串
  • getPost() :获取Authority中的Port字符串
  • List< String> getPathSegments() :依次提取出Path的各个部分的字符串，以字符串数组的形式输出
  • getQueryParameter(String key) :获取query部分中 key 对应的参数值
  1. 注意事项
    正常情况下，以上配置后，就可以正常进行跳转了，但是在安卓上，还需要进行一步配置,如果你的应用被其注册过的外部 url 调起，如果要在现有的 MainActivity 中监听传入的 intent，那么需要在AndroidManifest.xml中将 MainActivity 的launchMode设置为singleTask
<activity
  android:name=".MainActivity"
  android:launchMode="singleTask">
  1. 问题：当app在后台运行，用scheme链接打开，url获取为null，不会跳转到对应页面
    原因：
    因为react native只配置了一个activity，整个应用都是在这个activity里运行的。当app尚未启动，由scheme唤起时，activity会执行onCreate生命周期钩子，初始化intent，此时你将会得到全新的url：null。当app已经运行在后台，由scheme唤起时，activity不会执行onCreate方法，你得到的url还是旧值：null。
    在android/app/src/main/java/com/lka/MainActivity.java的最下面添加：
@Override
public void onNewIntent(Intent intent)
    super.onNewIntent(intent);
    setIntent(intent);

注：
singTask 启动模式在从后台唤醒时它的生命周期：

如果IntentActivity处于任务栈的顶端，也就是说之前打开过的Activity，现在处于
onPause
onStop 状态的话，
其他应用再发送Intent的话，执行顺序为：

onNewIntent
onRestart
onStart
onResume

IOS配置

只需要配置info.plist 文件，只需要配置URL Schemes就可以了，identifier是可选配置

H5打开app测试

自己编写一个html页面，发到微信，用qq浏览器打开，点击"打开app"按钮，会提示是否“允许”，点击允许，自动打开app。
如果打开的 scheme 在本地没有对应的 app，则点击连接不会反应。
例子

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div >
  <a href="app://www.aaa.com/list">打开app</a>
</div>
</body>
</html>

注：
1.这种的缺点是只能用qq浏览器打开
2.浏览器打开如下html代码，即可启动App

<a href="myscheme://">打开app</a>

用原生代码获取参数

浏览器打开App时，如何获取网页带过来的数据（用原生代码获取）

<a href="myscheme://?arg0=0&arg1=1">打开app</a>

（1）.假如你是通过浏览器打开这个网页的，那么获取数据的方式为：

Uri uri = getIntent().getData();  
String test1= uri.getQueryParameter("arg0"); 
String test2= uri.getQueryParameter("arg1");

（2）如果使用webview访问该网页，获取数据的操作为：

webView.setWebViewClient(new WebViewClient()
  @Override
  public boolean shouldOverrideUrlLoading(WebView view, String url) 
          Uri uri=Uri.parse(url);
          if(uri.getScheme().equals("myscheme"))
              String arg0=uri.getQueryParameter("arg0");
              String arg1=uri.getQueryParameter("arg1"); 
          else
              view.loadUrl(url);
          
         return true;
  
);
、

从APP上用原生代码调用实现跳转(没有测试)

android调用

 Intent action = new Intent(Intent.ACTION_VIEW);
 StringBuilder builder = new StringBuilder();
 builder.append("caishilive://caishi:8080/loadtooldetail?tool_id=100");
 action.setData(Uri.parse(builder.toString()));
 startActivity(action);
 或
 Intent intent = new Intent(Intent.ACTION_VIEW,Uri.parse("xl://goods:8888/goodsDetail?goodsId=10011002"));
 startActivity(intent);

ios调用

  NSString *url = @"opengs://";
 //    NSString *url = @"opengs://com.opengs.www";
 if ([[UIApplication sharedApplication]
      canOpenURL:[NSURL URLWithString:url]])
 
     [[UIApplication sharedApplication] openURL:[NSURL URLWithString:url]];
 
 else
 
     NSLog(@"can not open URL scheme opengs");

URL Scheme是否有效

跳转前要判断一下该URL Scheme是否有效

private boolean schemeValid() 
        PackageManager manager = mContext.getPackageManager();
        Intent action = new Intent(Intent.ACTION_VIEW);
        action.setData(Uri.parse("caishilive://caishi:8080/loadtooldetail?tool_id=100"));
        List list = manager.queryIntentActivities(action, PackageManager.GET_RESOLVED_FILTER);
        return list != null && list.size() > 0;

react-native获取url 见下节 http://t.csdn.cn/h40sw

附录：常见应用的URL Scheme

1、记录使用过的URL Scheme

名称URL Scheme对应的普通链接
witter发消息twitter://messages/compose?text=[yourText]https://twitter.com/messages/compose?text=[yourText]
Twitter发动态twitter://intent/tweet?text=[yourText]https://twitter.com/intent/tweet?text=[yourText]
打开Emailmailto:?body=[yourText]
给某人发Emailmailto:[emailAddress]?body=[yourText]
发短信SMSsms:body=hello（AOS）sms:&body=hello（IOS）
whatsapp发消息whatsapp://send?text=[yourText]
fbmessenger发消息(分享链接)fb-messenger://share/?link=[yourShareURL]https://www.facebook.com/dialog/send?display=popup&app_id=[yourAppID]&link=[yourShareURL]&redirect_uri=[yourShareURL]
fbmessenger发消息(指定对象)fb-messenger://m.me/[yourPageID]（通用） fb-messenger-public://user-thread/[yourPageID]（IOS）https://www.messenger.com/t/[yourPageID] / https://m.me/[yourPageID]
fb打开相关主页fb://page/[yourPageID]https://www.facebook.com/[yourPageID]
Amazon打开产品详情页com.amazon.mobile.shopping://www.amazon.com/dp/[yourAsin]https://www.amazon.com/dp/[yourAsin]
打开App Store中应用详情页itms-apps://itunes.apple.com/cn/app/[yourAppID]https://itunes.apple.com/cn/app/[yourAppID]
打电话tel:[telephoneNumber]

2、系统默认应用

名称URL SchemeBundle identifier
Safarihttp://
mapshttp://maps.google.com
Phonetel://
SMSsms://
Mailmailto://
iBooksibooks://
App Storeitms-apps://itunes.apple.com
Musicmusic://
Videosvideos://
3、常用第三方软件
名称URL SchemeBundle identifier
QQmqq://
微信weixin://
腾讯微博TencentWeibo://
淘宝taobao://
支付宝alipay://
微博sinaweibo://
weico微博weico://
QQ浏览器mqqbrowser://com.tencent.mttlite
uc浏览器dolphin://com.dolphin.browser.iphone.chinese
欧朋浏览器ohttp://com.oupeng.mini
搜狗浏览器SogouMSE://com.sogou.SogouExplorerMobile
百度地图baidumap://com.baidu.map
Chromegooglechrome://
优酷youku://
京东openapp.jdmoble://
人人renren://
美团imeituan://
1号店wccbyihaodian://
我查查wcc://
有道词典yddictproapp://
知乎zhihu://
点评dianping://
微盘sinavdisk://
豆瓣fmdoubanradio://
网易公开课ntesopen://
名片全能王camcard://
QQ音乐qqmusic://
腾讯视频tenvideo://
豆瓣电影doubanmovie://
网易云音乐orpheus://
网易新闻newsapp://
网易应用apper://
网易彩票ntescaipiao://
有道云笔记youdaonote://
多看duokan-reader://
全国空气质量指数dirtybeijing://
百度音乐baidumusic://
下厨房xcfapp://

原文链接：https://blog.csdn.net/weixin_42895400/article/details/87799262
https://blog.csdn.net/wangkeke1860/article/details/49850997

以上是关于android，ios配置scheme，react-native获取url的主要内容，如果未能解决你的问题，请参考以下文章

ios和android应用都可以注册自定义url scheme吗

Android使用scheme跳转App并传值

iOS开发——Scheme白名单

react-native 配置启动图支持ios和android

iOS APP Scheme配置

游戏环境配置:React Native 开发环境配置 For Android