hippy差异化整理

storage

官方文档：weex-storage

官方文档：hippy-AsyncStorage

setItem 方法相同(缺少callback)

// weex的存储
setItem(key, value, callback)
// hippy存储
Native.AsyncStorage.setItem(key, value)

getItem 方法需要修改

// wee的取值
getItem(key, callback)
// hippy的取值
Native.AsyncStorage.storage.getItem(key)

// ❗ 和前者相比无回调 原封装的方法已修改 详见 storage.js
调用方法： storage.getStorage("test", "缓存过期，存入默认值");

removeItem 方法相同

自定义组件

官方文档：直接写tag不需要另外注册

官方文档：hippy-components

hippy注册组件

// 简单注册
  registerElement(customComponent,{
    component: {
      name: customComponent,
    }
  });
// 复杂注册（需要生命周期，回调...） 就得和vue2中的注册组件流程一样
// 用Vue.component注册组件

modal/toast

由于tv屏上用的modal/toast较少，先引入空挂载

官方文档：weex-modal

官方文档：hippy-react-modal (无vue版本)

requireModule 调用终端能力 自定义组件

已封装好调用方法，详见vod_module.js（待与终端联调验证）

官方文档：weex-requireModule

官方文档：hippy-Native.callNative

// weex
var vod = weex.requireModule("kmvod");
// hippy
Native.callNative('kmvod', 'xxx', this.$root.$options.rootViewId, this.bundleUrl);

设备基础信息调用

官方文档：weex-WXEnvironment

官方文档：hippy-Native

替换方案WXEnvironment <=> Native

• hippy-Navive的所有返回值

• Native.Dimensions.screen所有返回值

Native.Dimensions.screen =>{
fontScale: 1.5
height: 1280
navigatorBarHeight: 0
scale: 1.5
statusBarHeight: 0
width: 720
}

weex中WXEnvironment的能力

-   `weexVersion`: WeexSDK 的版本。
-   `appName`: 应用的名称。
-   `appVersion`: 应用的版本。
-   `platform`: 运行平台，可能的值是 `Web` 、`Android` 、`iOS` 之一。
-   `osName`: 系统的名称。
-   `osVersion`: 系统版本。
-   `deviceWidth`: 设备宽度。
-   `deviceHeight`: 设备高度。

---

文本节点：text

• hippy中要求所有文本元素必须包裹在  或其他文本类标签中
• 倘若直接写在 <div> 中则文本不渲染

    ✔<text>我是文本组件:text</text> // vue3中不可用

    ✔<span>我是文本组件:span</span>

    ✔<p>我是文本组件:p</p>

    ✔<label>我是文本组件:label</label>

   错误示范 <div>我是文本组件:div</div>    

---

全局事件eventbus

由于官方文档对于vue2的用法说的不清不楚，这里额外补充

// 引入getApp()
import { getApp } from '@/util';

// 发送方 a.js
this.app = getApp();
this.app.$emit(actionName, hippyAniAction);

// 接收方 b.vue
mounted() { // 挂载时订阅
    getApp().$on(actionName, (e) => {
      this.busActions = e
    });
  },
beforeDestroy() { // 销毁前取消订阅❗
    getApp().$off(actionName);
  },

演示的util存放于src目录下，不是src/utils/下的工具类

动画效果

官文

• 由于beforeLoadStyle对动画中的偏移量没有做处理，所以在设置偏移量时需要进行换算（乘与$vRatio），例子如下

mounted() {
  this.setAniconf()
},
methods: {
  // 换算
  setAniconf() {
    const vRatio = Vue.prototype.$vRatio;
    const flyAciton1 = {
      transform: {
        translateX: [
          {
            startValue: -1280 * vRatio,
            toValue: 1280 * vRatio,
            duration: 500,
            repeatCount: 0,
          },
        ],
      },
    };
   }

终端回调

weex的JScallback

• callback.invokeAndKeepAlive(map); 该方法可以调用多次
• callback.invoke(map); 该方法只会调用一次。

hippy的Promise

• resolve
• reject

css和H5的差异

不生效-导致崩溃

    Inherit（继承）：从父元素传递值

超出省略

// 错误示范 
.ann-singername{
  // 面写法请统统删掉
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  display: block;
  line-clamp: 2; /* 控制显示的行数 */
  -webkit-line-clamp: ; /* Safari */
  box-orient: vertical;
    lines: 1;
}
    
✔正确示范： 设置numberOfLines属性
<span  :numberOfLines="1" >很长长长长长长长长长长长长长长长长长长长长长长长长</span>

用kebab-case写法

错误示范：
.user-wrapper {
  background: #FF4A8F;
  background: url('baidu.png')
}    
    
✔正确示范：
.user-wrapper {
  background-color: #FF4A8F;
  background-image: url('baidu.png')
}

不支持vh、vw、rem

• 但可通过beforeLoadStyle对其做处理