教程 框架 组件 接口 工具 其他

H5 点击组件

网页开发者可以在其 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-nameString配置跳转快应用的包名,包名和 manifest.json 的"package"属性保持一致。
data-pageString配置跳转的页面路径,对应 manifest.json 中 router 下 page 的 path 字段。
如果不传 path 值或 path 值为空字符串,跳转时会打开首页
详情请参见manifest 文档的"router.page"一节
data-paramsString配置透传给快应用页面的参数。
通过 params 传入的参数值,会赋值到当前快应用页面的 public 同名字段
详情请参见deeplink 文档中"快应用获取 key-value"一节
data-design-paramsString用于指定设计稿宽度及默认 font-size 大小,以适配使用不同宽度屏幕。开发者可根据设计稿所标尺寸与默认 font-size 计算出元素 rem 单位值。点击组件会根据实际屏幕宽度、 designWidth 值及开发者指定的元素 rem 值重新计算元素实际大小。不填默认 fontSize 为 16、designWidth 为 1080。
data-click-eventString配置用户点击后回调执行的方法,可用于数据上报;eventName: click 事件回调执行的方法名称;eventParams: 回调方法传入的参数

补充

在通用框架使用点击组件需做少量配置:

Vue

// 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

React 中使用点击组件时,需在 <templates> 中使用内联样式定制样式。

// xxx.js
function App() {
  return (
    <div className="App">
      <qa-router-button
        data-package-name="com.hybrid.demo.sample"
        data-page="/"
        data-params="{&quot;id&quot;: 1}"
        data-design-params="{&quot;fontSize&quot;: 161,&quot;designWidth&quot;: 10380}"
        data-click-event="{&quot;eventName&quot;: &quot;handleClickEvent&quot;, &quot;eventParams&quot;: &quot;anyString&quot;}"
        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>

条匹配 "" 的结果

    没有搜索到与 "" 相关的内容