如何用Deeplink为快应用提供多个快速直达入口

开发者将快应用上架应用市场后,希望能有多个入口直达快应用,从而提高其快应用的曝光率,带来更多的流量。而快应用开放的标准deeplink能力可以满足开发者的需求。

应用场景

Deeplink可以应用在如下场景:

  • 社交分享

将快应用的Deeplink链接,通过社交软件进行分享,用户点击链接就可以直接打开快应用。

  • 广告推广

将快应用的Deeplink链接,放入广告推广页面,用户点击链接就可以直接打开快应用。

  • 运营活动

进行运营活动时,如果使用快应用来吸引用户参与到活动中,可以将快应用的Deeplink链接嵌入到运营活动宣传页面,从而方便用户的参与。

格式支持

快应用Deeplink支持以下链接格式:

推荐使用

hap://app/<package>/[path][?key=value]
https://hapjs.org/app/<package>/[path][?key=value]

仅适用于华为手机

hwfastapp://<package>/[path][?key=value]
  • package:应用包名,必选。
  • path:应用内页面的path,可选,不填写的话,默认为首页。
  • key-value:需要传给页面的参数,可选,可以有多个。传递的参数值有可能被其他应用获取,建议不要传递安全敏感度较高的数据。

开发过程

以下我们以跳转包名为com.huawei.quickapp的快应用demo为例,讲解Deeplink的使用。

通过快应用demo的manifest.json文件,我们可以获得如下信息:

  • 包名:com.huawei.quickapp。
  • 应用名称:demo。
  • 页面:包含Hello和Detail两个页面,其中Hello为首页。

在这里插入图片描述

在快应用中调用Deeplink打开快应用demo的示例代码如下:

import router from '@system.router'
router.push({
uri: 'hap://app/com.huawei.quickapp’
})

在网页中通过点击链接打开快应用demo的示例代码如下:

<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <body>
       <a href=“hap://app/com.huawei.quickapp”>跳转到快应用demo</a>
   </body>
</html>

以上例子没有配置跳转的具体页面,所以默认进入快应用demo的首页Hello,如果想调整到Detail页面,代码可以修改为:

import router from '@system.router'
router.push({
uri: 'hap://app/com.huawei.quickapp/Detail’
})

如果还需要向Detail页面传递参数,可以将参数以key-value形式拼接在后面,多个参数使用&连接。假设向Detail页面传递source和name参数,则代码修改为:

import router from '@system.router'
router.push({
         uri: 'hap://app/com.huawei.quickapp/Detail?source=net&name=aa’
})

接入Detail页面后获取参数值的代码如下:

onShow: function () {
         var nameValue=this.name;
         var sourceValue=this.source;
}

开发完,可以在本地对Deeplink进行测试,从而验证跳转链接的准确性。

注意:测试前,请确保华为快应用加载器中有目标快应用的使用记录。

测试

方法一:使用 android adb 命令(电脑需配置好adb环境)

adb shell am start -a android.intent.action.VIEW -d hap://app/com.huawei.quickapp/Detail

注意:使用命令测试不适用传递多个参数的场景。

方法二:在一个本地网页中添加需测试的Deeplink超链接

<!DOCTYPE html>
<html>   
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
  
    <body>
         <script type="text/javascript">
             window.location.href="hap://app/com.huawei.quickapp/Detail?source=net&name=aa";
        </script>  
  </body>
</html>

欲了解更多详情,请参阅:

快应用开发指导文档:https://developer.huawei.com/consumer/cn/doc/development/quickApp-Guides/quickapp-whitepaper

Deeplink接入指南:https://developer.huawei.com/consumer/cn/doc/development/quickApp-Guides/quickapp-develop-deeplink

参与开发者讨论请到Reddit社区:https://www.reddit.com/r/HMSCore/

下载demo和示例代码请到Github:https://github.com/HMS-Core

解决集成问题请到Stack Overflow:https://stackoverflow.com/questions/tagged/huawei-mobile-services?tab=Newest


原文链接:https://developer.huawei.com/consumer/cn/forum/topicview?tid=0203357572509390834&fid=18
作者:鼓楼赵又廷

阅读 1.5k

推荐阅读
华为开发者论坛
用户专栏

华为开发者论坛是一个为开发者提供信息传播、开发交流、技术分享的交流空间。开发者可以在此获取技术干...

9 人关注
79 篇文章
专栏主页