weex踩坑记录

weex 踩坑记录

样式

  • flex 布局中，在父元素宽高固定的情况下，子元素设置 width 超出父元素时，不会自适应缩放，h5 则会等分缩放
  • android 不支持 box-shadow 属性，采用背景图方式制作阴影
  • 不支持 z-index 属性，所以越靠后写的展示在最上层
  • 线性渐变 iOS 颜色单位不支持 rgb(修正：换行导致，竖中指。。。)
  • v-if 频繁控制显示隐藏，采用 opacity、visibility 替代（定位元素设置 opacity 会影响其他层点击事件，visibility 不会）
  • 如果定位元素超过容器边界，在 Android 下，超出部分将不可见，原因在于 Android 端元素 overflow 默认值为 hidden，但目前 Android 暂不支持设置 overflow: visible（使用固定定位 fixed，还可以设置全屏高度，nice ～）

安卓、iOS 差异

getItem 取值

  • 存入对象后取值，安卓返回字符串，iOS 返回对象
  • 处理：1、统一存入字符串 2、封装方法兼容处理(统一返回对象或字符串)

input 组件

  • 安卓添加 click 事件有用，iOS 没用
  • type 为 date 时，安卓可以通过 input、change 获取值，iOS 只可以通过 change
  • 动态修改 type 时，安卓由 password 改为 text 失效，iOS 正常问题解决
  • 安卓唤起键盘页面不能滚动，iOS 可以

image 组件

  • iOS 不支持单独设圆角，只支持 4 个圆角一起配置（套一层 div）

slider 组件

  • 轮播图 iOS 需要显式声明图片宽度，安卓不需要

scroller 组件

  • iOS 需要显式声明宽度，不支持 border 设置（套一层 div）

loading 组件

  • 设置display效果不一致，需要区别设置

模块

dom

  • list、scroller 使用 scrollToElement 滚动到指定节点（list 需要配置 ref 到 cell 标签）
  • 使用 getComponentRect 获取节点信息

其他

支持 async、await

配置.babelrc

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "presets": ["es2015", "stage-0"],
  "plugins": [
    [
      "transform-runtime",
      {
        "helpers": false,
        "polyfill": false,
        "regenerator": true,
        "moduleName": "babel-runtime"
      }
    ]
  ]
}

支持 sass

1
2
npm install node-sass;
npm install sass-loader; //依赖node-sass

配置 webpack.common.conf.js

1
2
3
4
5
6
7
8
9
10
...
module: {
    rules: [
      {
        test: /\.scss$/,
        loader: "css!sass",
        exclude: /node_modules/
      }
    ]
  },