快应用 router 接口的多种使用姿势

快应用 Dec 26, 2019

router

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

拉起原生应用

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

关于 scheme 的说明

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

[scheme]://[host]/[path]?[query]

各个项目的解释:

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

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

快应用中的使用

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

import router from "@system.router"
export default {
    turnToNativeApp() {
        const res = router.push({
            uri: "taobao://item.taobao.com?pid=xxxxxxx"
        })
        if(res !== "success") {
            router.push({
                uri: "https://www.taobao.com"
            })
        }
    }
}

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

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

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

router.push({
    uri: "openapp.jdmoble://m.jd.com"
})

下面列举一些常见 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,达到执行不同操作的目的。

打开网页

sheme: https://[host]/[path]?[query]   http://[host]/[path]?[query]
router.push({
    uri: "https://www.google.com"
})

打电话

sheme: tel:[telephoneNumber]
router.push({
    uri: "tel:12345"
})

发短信

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

sheme: sms:[telephoneumber]
router.push({
    uri: "tel:10086",
    params: {
        body: '给我充值一个亿!'
    }
})

跳转快应用

sheme: hap://app/[packageName]/[path]?[query]
router.push({
    uri: "hap://app/com.quickapp.center"
})

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

跳转的代码

router.push({
    uri: "hap://app/com.example.quickapp/index?content={text:'奥利给'}"
})

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

<template>
    <div>
      <text>{{content.text}}</text>
    </div>
</template>
<script>
    export default {
        data: {
            content: ''
        },
        onInit() {
            try { // 防止传入的值不能被序列化为JSON而报错
                this.content = JSON.parse(this.content);
            } catch(e) {
                console.log(e);
            }
        }
    }
</script>
<style></style>

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

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

router.push({
    uri: "hap://settings/wlan_manager"
})

vivo developer

快应用引擎、工具开发者、快应用生态拓展达人(vivo)。

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.