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

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"
})