网页开发者可以在其 H5 页面中使用快应用官方推荐的点击组件,用于跳转指定快应用。使用点击组件时,必须由用户主动点击方可发起跳转快应用请求。
点击组件样式可自定义,可在页面中使用多个点击组件,具体使用方式如下:
<script
type="text/javascript"
src="//statres.quickapp.cn/quickapp/js/qa_router.min.js"
/>
<qa:router-button>
标签。<qa:router-button
data-package-name="com.hybrid.demo.sample"
data-page="/"
data-params='{"id": 1}'
design-params='{"fontSize": 16,"designWidth": 1080}'
style="height: 2rem"
>
<templates>
<!-- <templates> 中插入布局元素,以下仅为示例,开发者可根据业务需要定制 DOM 及 样式 -->
<div id="container">
<img src="icon.png" ></img>
<button>秒开</button>
</div>
</templates>
<styles>
<!-- <styles> 中插入样式 -->
#container { ... }
img { ... }
button { ... }
</styles>
</qa:router-button>
其中:
data-package-name="com.hybrid.demo.sample"
: 必填,表示要拉起的快应用包名。data-page="/"
: 选填,表示拉起快应用的页面,不填默认拉起首页。data-params='{"id":1}'
: 选填,表示传入快应用的参数。注意 '{"id":1}'
书写需符合 JSON 规范,即使用单引号整体包裹,键值对如果为字符串需用双引号包裹。在对应页面中使用 public
接收,详见deeplink 文档中"快应用获取 key-value"一节。design-params='{"fontSize": 16,"designWidth": 1080}'
: 选填,用于指定设计稿宽度及默认 font-size 大小,以适配使用不同宽度屏幕。开发者可根据设计稿所标尺寸与默认 font-size 计算出元素 rem 单位值。点击组件会根据实际屏幕宽度、 designWidth
值及开发者指定的元素 rem 值重新计算元素实际大小。不填默认 fontSize 为 16、designWidth 为 1080。开发者可能有在 Vue 等响应式框架使用点击组件的需求。H5 点击组件支持 Vue 语法,也就是说开发者可以在点击组件中动态传值,控制传入的参数或 DOM 结构:
<div v-for="(item, index) in items">
<qa:router-button
:data-package-name="item.name"
:data-page="item.page"
:data-params="item.params"
design-params='{"fontSize": 16,"designWidth": 1080}'
style="height: 2rem"
>
<templates>
<!-- <templates> 中插入布局元素,以下仅为示例,开发者可根据业务需要定制 DOM 及 样式 -->
<div id="container">
<img src="item.icon" :class="item.classType" ></img>
<button>秒开</button>
</div>
</templates>
<styles>
<!-- <styles> 中插入样式 -->
#container { ... }
img { ... }
button { ... }
</styles>
</qa:router-button>
</div>