用 UrlSchemes 实现调用应用并传参

女爷i 2023-01-02 02:28 154阅读 0赞

# 一、UrlSchemes 是什么 #

UrlScheme 是系统提供的一种跳转协议，它可以由应用程序注册，然后其他程序通过UrlSchemes 来调用该应用程序，就如同打开一个网站地址。  
通过 UrlSchemes 我们可以在应用内或使用浏览器打开指定应用并传参。  
UrlScheme 目前已经被**iOS**、**Android**、windows、OS X等系统支持。

## 1. UrlSchemes 单词解释 ##

*  URL：如`https://www.baidu.com`就是个 URL，我们也叫它链接或网址；
 *  Schemes：表示的是一个 URL 中的初始的位置，及协议，如`https://www.baidu.com`这个网址的 Schemes 是 `https`。

## 2. UrlSchemes 应用现状 ##

*  不是每个应用都支持UrlSchemes ，不是所有功能页都可以通过UrlSchemes 打开；你开发时没做这块的配置肯定就没有相关功能的。
 *  UrlSchemes没有唯一限制，可能存在重复的情况；所以不用使用UrlSchemes传递敏感信息。
 *  UrlSchemes没有统一标准，非常难猜；通常能有在相关应用的开发网站上才能找到，或通过口口相传。
 *  UrlSchemes是复数，因为单个应用支持多个UrlSchemes规则。

**协议格式：**  
以打开百度地图导航为例  
`baidumap://map/direction?origin=&destination=`

*  `baidumap` 代表scheme的协议名称
 *  `map` 代表host
 *  `direction` 代表path
 *  `origin=...` 代表参数

# 二、UrlSchemes 能做什么 #

**实际用例：**

1.  app中对一个店铺进行了位置采集，点击这个店铺的导航按键时，我们就可以使用高德或百度地图的UrlScheme打开地图应用并导航。
    
        //打开百度地图导航
        UrlScheme ='baidumap://map/direction?origin=&destination='
    
    [百度api文档 - 点击跳转][api_ -]
2.  公司开发的两个应用，从一个应用中启动另一个应用的某个功能，并且实现用户免登录。  
    使用UrlScheme 方式打开应用并传递操作参数和用户token。  
    获取操作参数和用户token，根据操作参数打开对应功能页面。
3.  使用离线消息推送的时候，点击消息只能打开应用，没有办法自定义后续逻辑，如：打开应用后跳转到对应资讯的详情页面。  
    这个时候就需要使用配置点击消息跳转到指定的url，我们将url页面上配置一个跳转UrlScheme的动作。  
    如：`baidumap://map/direction?origin=&destination=...`；  
    就可以实现点击消息打开百度地图并按照传递的参数进如导航页面。

# 三、UrlSchemes 开发 #

以下，将已使用DCloud公司的uni-app应用+HBuilder X为例，对UrlScheme 的使用进行详细讲解。

> 其他原生开发方式整体思路雷同。

## 1、注册UrlSchemes ##

#### 配置UrlSchemes 协议 ####

在HBuilder X 中打开项目的manifest.json文件，在“App常用其他设置”中分别配置Android和iOS系统的UrlScheme。

*  建议两个平台的UrlScheme值统一。
 *  配置完成后需要打包才能生效，其他应用就可以通过UrlScheme值唤醒我们的应用了。

#### 获取UrlSchemes 参数 ####

通常，只唤醒应用是不够的，还唤醒后还应当有对应的操作。  
这个时候就需要我们在App.vue的onShow事件中添加获取厂商和相应处理逻辑代码。

//获取第三方程序调用时传递给程序的参数
    let args = plus.runtime.arguments;
    if (args) { 
    	// 处理args参数的逻辑代码，如直达到某新页面等
    }

[官方文档：iOS平台设置UrlSchemes - 点击跳转][iOS_UrlSchemes -]  
[官方文档：Android平台设置UrlSchemes - 点击跳转][Android_UrlSchemes -]

## 2、访问UrlSchemes ##

在H5+环境下调用其他应用程序：

//打开第应用信息
    let appInf = { 
    	pname: 'com.xxx.xx', //仅Android，第三方程序包名
    	extra: { 'do':'showinfo','id':'500120'}, //仅Android，参数json格式
    	action: 'xxx://do/showinfo?id=500120' //UrlScheme 地址
    };
    
    //监测待打开应用是否安装
    if (plus.runtime.isApplicationExist(appInf)) { 
    	//调用第三方程序
    	plus.runtime.launchApplication(appInf, function(e) { 
    		plus.nativeUI.alert('打开某某应用失败!提示信息：'+e.message, function(){ }, 'nativeUI', 'OK');
    	});
    } else { 
    	plus.nativeUI.confirm('检测到您未安装某某应用，是否去下载安装？', function(e){ 
    		//使用第三方应用打开下载页面网址
    		if (e.index == 0)
    		plus.runtime.openURL('在此填入某某应用的发行页面地址', function(e) { 
    			plus.nativeUI.toast(e.message); //打开某某应用下载页面失败
    		});
    	},{ 
    		"buttons":["下载","取消"]
    	});
    }

[官方文档：调用第三方程序 - 点击跳转][-]

## 3、 调试UrlSchemes ##

随便搜索一个在线二维码生成工具，将访问UrlSchemes的值转换为二维码。

*  iOS设备使用自带相机即可扫码。
 *  Android设备使用自带浏览器中的扫码。

现在扫码下方二维码试试效果：(二维码内容：`weixin://`)  
![在这里插入图片描述][20210111105533300.png]

# 四、常见UrlSchemes 整理 #

<table> 
 <tbody> 
  <tr> 
   <th>序号</th> 
   <th>应用名称</th> 
   <th>iOS UrlScheme</th> 
   <th>Android UrlScheme</th> 
   <th>功能</th> 
  </tr> 
  <tr> 
   <td>1</td> 
   <td>微信</td> 
   <td>weixin://</td> 
   <td>weixin://</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>2</td> 
   <td>百度地图</td> 
   <td>baidumap://</td> 
   <td>baidumap://</td> 
   <td>搜索、导航等</td> 
  </tr> 
 </tbody> 
</table>

> 持续累加中…

[api_ -]: http://lbsyun.baidu.com/index.php?title=uri/api/android
[iOS_UrlSchemes -]: https://ask.dcloud.net.cn/article/64
[Android_UrlSchemes -]: https://ask.dcloud.net.cn/article/409
[-]: https://www.html5plus.org/doc/zh_cn/runtime.html#plus.runtime.ApplicationInf
[20210111105533300.png]: /images/20221120/e16d5476ba75431c892a5ef863105ae1.png