请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册
搜索

技术分享 # 快应用ROUTER接口的多种使用姿势

0
回复
114
查看
[复制链接]

7

主题

81

帖子

740

积分

 楼主| 2019-12-26 17:49:09 显示全部楼层 |阅读模式
本帖最后由 dadong 于 2019-12-26 17:48 编辑

router接口在快应用中是个很强大的接口,可以实现很多神奇的操作,比起小程序里的路由来不知高到哪里去了(逃。只是目前快应用生态社区内容还不够丰富,示例代码和相关开源项目也比较少,因此萌生了下一篇博客专门记录在实战开发中使用router接口的方法。

拉起原生应用

在移动web开发中,有一个常见需求就是拉起手机中原生的应用,一般这个需求的实现方式有两种,一种是直接在a标签中写好对应的scheme,一种是直接对window.location赋值对应原生APP的scheme。以上两种方式都有一些限制,比如在某些浏览器中失效,难以判断是否成功拉起等。

关于scheme的说明

一般来说,scheme一般是这个样子的

  1. [scheme]://[host]/[path]?[query]
复制代码


各个项目的解释:

- scheme:判别启动的App
- host:按需写入
- path:传值时必须的key,可不传
- query:获取值的Key和Value,可不传

http或者https其实也是一种scheme,不同的原生应用则规定了自己的scheme,所以我们只要按照对应于的规则拼接出来,就可以拉起对应的APP,实现不同的逻辑。

快应用中的使用

在快应用中,拉起原生应用的需求可以直接用router接口来实现,既可以规避浏览器屏蔽拉起,也可以轻松判断是否成功拉起。话不多说,直接上代码。


  1. import router from "@system.router"
  2. export default {
  3.     turnToNativeApp() {
  4.         const res = router.push({
  5.             uri: "taobao://item.taobao.com?pid=xxxxxxx"
  6.         })
  7.         if(res !== "success") {
  8.             router.push({
  9.                 uri: "https://www.taobao.com"
  10.             })
  11.         }
  12.     }
  13. }
复制代码


上面这段代码中的`turnToNativeApp`方法,调用即可拉起淘宝的原生APP,如果手机内没有淘宝的APP则拉起失败,`router`会返回拉起结果,如果返回结果是字符串`success`,通过判断这个值,来处理对应的逻辑,上面代码是判断拉起失败,则拉起淘宝的H5页面。

如果你要拉起手机中其他原生APP,只需要更改传入uri值,替换为对应APP的scheme。

比如想要拉起京东则可以这样操作:

  1. router.push({
  2.     uri: "openapp.jdmoble://m.jd.com"
  3. })
复制代码


下面列举一些常见APP的scheme:

   
APP名称
   
   
scheme
   
   
包名
   
  
QQ
  
  
mqq://
  
  
微信
  
  
weixin://
  
  
淘宝
  
  
taobao://
  
  
支付宝
  
  
alipay://
  
  
微博
  
  
sinaweibo://
  
  
uc浏览器
  
  
dolphin://
  
  
com.dolphin.browser.iphone.chinese
  
  
QQ浏览器
  
  
mqqbrowser://
  
  
com.tencent.mttlite
  
  
百度地图
  
  
baidumap://
  
  
com.baidu.map
  
  
搜狗浏览器
  
  
SogouMSE://
  
  
com.sogou.SogouExplorerMobile
  
  
京东
  
  
openapp.jdmoble://
  
  
美团
  
  
imeituan://
  
  
知乎
  
  
zhihu://
  
  
网易云音乐
  
  
orpheus://
  
  
点评
  
  
dianping://
  


其他姿势

搞明白了拉起原生APP的方法和scheme的概念,那么router的其他操作就是水到渠成,一点就通的事情了。说白了就是替换不同的scheme,达到不同的操作。

打开网页

  1. sheme: https://[host]/[path]?[query]   http://[host]/[path]?[query]
  2. router.push({
  3.     uri: "https://www.google.com"
  4. })
复制代码


打电话

  1. sheme: tel:[telephoneNumber]
  2. router.push({
  3.     uri: "tel:12345"
  4. })
复制代码


发短信

发送短信多了一个参数`body`,这个参数用于传递发送的短信内容。

  1. sheme: sms:[telephoneumber]
  2. router.push({
  3.     uri: "tel:10086",
  4.     params: {
  5.         body: '给我充值一个亿!'
  6.     }
  7. })
复制代码


跳转快应用

  1. sheme: hap://app/[packageName]/[path]?[query]
  2. router.push({
  3.     uri: "hap://app/com.quickapp.center"
  4. })
复制代码


跳转快应用时query的值可以在跳转页面中获取到,一般来讲query的形式是`?key=value`。要在跳转过去的快应用中获取key和value,只需采取方式`this[key]`,即可获取。前提是要在跳转对应的path页面中才可以。还是上代码说明:

跳转的代码

  1. router.push({
  2.     uri: "hap://app/com.example.quickapp/index?content={text:'奥利给'}"
  3. })
复制代码


跳转对应的index.ux页面的代码

  1. <template>
  2.     <div>
  3.       <text>{{content.text}}</text>
  4.     </div>
  5. </template>
  6. <script>
  7.     export default {
  8.         data: {
  9.             content: ''
  10.         },
  11.         onInit() {
  12.             try { // 防止传入的值不能被序列化为JSON而报错
  13.                 this.content = JSON.parse(this.content);
  14.             } catch(e) {
  15.                 console.log(e);
  16.             }
  17.         }
  18.     }
  19. </script>
  20. <style></style>
复制代码


在拉起成功之后,页面的content值会被onInit中的方法初始化为`{text:"奥利给"}`,所以页面上会显示`奥利给`的文本内容。当然也可以不明确的在data中声明content属性,但是建议声明一下,可以提高代码的可维护性,免得后面自己都不知道这个content是哪里来的。

打开系统WIFI设置页(需要引擎版本大于1040)

  1. router.push({
  2.     uri: "hap://settings/wlan_manager"
  3. })
复制代码


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册