快应用 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"
})

Tags

• 快应用