网页开发者可以在其 H5 页面中使用快应用官方推荐的点击组件，用于跳转指定快应用。使用点击组件时，必须由用户主动点击方可发起跳转快应用请求。
点击组件样式可自定义，可在页面中使用多个点击组件，具体使用方式如下：
1.首先在网页嵌入如下 js：
<script
type="text/javascript"
src="//statres.quickapp.cn/quickapp/js/qa_router.min.js"
/>
2.在页面合适位置插入 <qa-router-button> 标签。
<qa-router-button
data-package-name="com.hybrid.demo.sample"
data-page="/"
data-params='{"id": 1}'
data-design-params='{"fontSize": 16,"designWidth": 1080}'
data-click-event='{"eventName": "handleClickEvent", "eventParams": "anyString"}'
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>
<script>
function handleClickEvent() { /* 点击回调执行的方法 */ }
</script>
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| data-package-name | String | 是 | 配置跳转快应用的包名，包名和 manifest.json 的"package"属性保持一致。 |
| data-page | String | 否 | 配置跳转的页面路径，对应 manifest.json 中 router 下 page 的 path 字段。 如果不传 path 值或 path 值为空字符串，跳转时会打开首页 详情请参见manifest 文档的"router.page"一节 |
| data-params | String | 否 | 配置透传给快应用页面的参数。 通过 params 传入的参数值，会赋值到当前快应用页面的 public 同名字段 详情请参见deeplink 文档中"快应用获取 key-value"一节 |
| data-design-params | String | 否 | 用于指定设计稿宽度及默认 font-size 大小，以适配使用不同宽度屏幕。开发者可根据设计稿所标尺寸与默认 font-size 计算出元素 rem 单位值。点击组件会根据实际屏幕宽度、 designWidth 值及开发者指定的元素 rem 值重新计算元素实际大小。不填默认 fontSize 为 16、designWidth 为 1080。 |
| data-click-event | String | 否 | 配置用户点击后回调执行的方法，可用于数据上报；eventName: click 事件回调执行的方法名称；eventParams: 回调方法传入的参数 |
在通用框架使用点击组件需做少量配置：
// Vue 2.x
Vue.config.ignoredElements = [/^qa-router-button|templates|styles/]
开发者可以在点击组件中动态传值，控制传入的参数或 DOM 结构：
// xxx.vue
<div v-for="(item, index) in items">
<qa-router-button
:data-package-name="item.name"
:data-page="item.page"
:data-params="item.params"
data-design-params='{"fontSize": 16,"designWidth": 1080}'
data-click-event='{"eventName": "handleClickEvent", "eventParams": "anyString"}'
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>
// index.html
<script>
function handleClickEvent() { /* 点击回调执行的方法 */ }
</script>
React 中使用点击组件时，需在 <templates> 中使用内联样式定制样式。
// xxx.js
function App() {
return (
<div className="App">
<qa-router-button
data-package-name="com.hybrid.demo.sample"
data-page="/"
data-params="{"id": 1}"
data-design-params="{"fontSize": 161,"designWidth": 10380}"
data-click-event="{"eventName": "handleClickEvent", "eventParams": "anyString"}"
style={{ height: '2rem' }}
>
<templates is="x3d">
<div id="container">
<button style={{ backgroundColor: 'red' }}>秒开</button>
</div>
</templates>
</qa-router-button>
</div>
)
}
// index.html
<script>
function handleClickEvent() { /* 点击回调执行的方法 */ }
</script>