H5 点击组件

网页开发者可以在其 H5 页面中使用快应用官方推荐的点击组件，用于跳转指定快应用。使用点击组件时，必须由用户主动点击方可发起跳转快应用请求。

点击组件样式可自定义，可在页面中使用多个点击组件，具体使用方式如下：

1. 首先在网页嵌入如下 js：

<script
  type="text/javascript"
  src="//statres.quickapp.cn/quickapp/js/qa_router.min.js"
/>

1. 在页面合适位置插入 <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>

其中：

1. data-package-name="com.hybrid.demo.sample": 必填，表示要拉起的快应用包名。
2. data-page="/": 选填，表示拉起快应用的页面，不填默认拉起首页。
3. data-params='{"id":1}': 选填，表示传入快应用的参数。注意 '{"id":1}' 书写需符合 JSON 规范，即使用单引号整体包裹，键值对如果为字符串需用双引号包裹。在对应页面中使用 public 接收，详见deeplink 文档中"快应用获取 key-value"一节。
4. 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>