自定义组件和模块

Vue.registerElement

hippy-vue 提供了 registerElement 方法来注册组件，将 template 中的 tag 和原生组件映射起来。

示例

  1. import Vue from 'vue';
  3. /*
  4.  * 直接注册一个 ComponentName 到终端组件，这里推荐单词首字母大写的拼写。
  5.  * template 里可以直接用 <ComponentName />
  6.  * ComponentName 必须跟终端组件名称一致，且不能包含 Hippy 字符。
  7.  */
  8. Vue.registerElement('MyView');
  10. /*
  11.  * 也可以注册一个小写的 tagname，然后通过参数映射到 ComponentName 终端组件
  12.  * 但是 tagname 忽略大小写后也不能和 ComponentName 相同。(如 tag name 命名为 my-view, component name 不能命名为 MyView)
  13.  * template 里可以直接用 <tagname />，同样会映射 ComponentName 组件上。
  14.  * ComponentName 必须跟终端组件名称一致，不能包含 Hippy 字符。
  15.  */
  16. Vue.registerElement('h-my-view', {
  17.   component: {
  18.     name: 'MyView',
  19.   },
  20. });

绑定终端事件返回值

因为 hippy-vue 采用了和浏览器一致的事件模型，又希望能统一双端的事件（有的时候双端事件返回值不一样），所以采取了手动修改事件返回值的方案，需要显式声明每个事件的返回值。

这一步是在注册组件时通过 processEventData 方法进行处理的，它有三个参数：

  • event: 终端回调函数里接收到的事件实例，需要对它进行修改
  • nativeEventName: 终端的原生事件名称
  • nativeEventParams：终端的原生事件返回体

例如，hippy-vue 的 hi-swiper 组件，它是 swiper 实际渲染的对应节点。

  1. component: {
  2.   name: 'ViewPager',
  3.   processEventData(event, nativeEventName, nativeEventParams) {
  4.     switch (nativeEventName) {
  5.     case 'onPageSelected':
  6.       // 显式将 native 的事件参数 nativeEventParams 的值赋予 hippy-vue 真正绑定的事件 event
  7.       event.currentSlide = nativeEventParams.position;
  8.       break;
  9.     case 'onPageScroll':
  10.       event.nextSlide = nativeEventParams.position;
  11.       event.offset = nativeEventParams.offset;
  12.       break;
  13.     default:
  14.       break;
  15.     }
  16.     return event;
  17.   }
  18. }

Vue.component

当你需要处理更加复杂的交互、事件、生命周期的时候，需要通过 Vue.component 注册一个单独的组件，registerElement 只能做到很基本的元素名称到组件的映射，和基本的参数映射。

详情参考：//cn.vuejs.org/v2/guide/components-registration.html

事件处理

通过 Vue.component 自定义的组件，若需要将终端事件传给组件外层，需要做额外处理，有两种方式：

  • 使用 render 函数（推荐）
  1.   Vue.component('Swiper', {
  2.     /*
  3.      * 可以用 render 函数的方式
  4.      * 'pageScroll'是传输给终端的事件名（传输终端时会被自动转成转成onPageScroll）
  5.      * 'dragging' 是真正暴露给用户使用的事件名
  6.      */
  7.     render(h) {
  8.         const on = {
  9.             pageSelected: evt => this.$emit('dropped', evt),
  10.             pageScroll: evt => this.$emit('dragging', evt),
  11.             pageScrollStateChanged: evt => this.$emit('stateChanged', evt),
  12.         };
  13.         return h('hi-swiper', {
  14.             on,
  15.             ref: 'swiper',
  16.             attrs: {
  17.                 initialPage: this.$initialSlide,
  18.             },
  19.         }, this.$slots.default);
  20.     },
  21. });
  • 使用 template
  1.   Vue.component('Swiper', {
  2.     /*
  3.      * 可以用 template 的方式，HippyVue会在运行时将其转换成 render 函数
  4.      * 'pageScroll'是传输给终端的事件名（传输终端时会被自动转成onPageScroll）
  5.      * 'dragging' 是真正暴露给用户使用的事件名
  6.      */
  7.     template: `
  8.       <hi-swiper
  9.           :initialPage="$initialSlide"
  10.           ref="swiper"
  11.           @pageScroll="$emit('dragging', $event)"
  12.           @pageScrollStateChanged="$emit('stateChanged', $event)"
  13.           @pageSelected="$emit('dropped', $event)"
  14.       >
  15.       <slot />
  16.       </hi-swiper>`,
  17. });

自定义模块

该范例仅可以在 Android 下运行。

hippy-vue 的模块其实只是一个 Vue.Native.callNative 调用，写个 function 即可。

  1. import Vue from 'vue';
  3. function log(msg) {
  4.   Vue.Native.callNative("TestModule", "log", msg)
  5. }
  7. function helloNative(msg) {
  8.   Vue.Native.callNative("TestModule", "helloNative", msg)
  9. }
  11. // 这个是需要终端回调的
  12. function helloNativeWithPromise(msg) {
  13.   return Vue.Native.callNativeWithPromise("TestModule", "helloNativeWithPromise", msg);
  14. }