weex 踩坑

1. 用weex实现页面跳转？

1.1 使用vue-router

position: fixed/sticky 的元素，在切换页面后不会消失

image.png

1.2 使用navigator 作为跳转方案

通过谷歌、百度出来都方案, 都比较复杂，折腾了两天未实现。

2. css支持性

2.1 选择器只支持单个类名选择器

# bad
.the-article .title {}

# good
.the-articel__title {}

2.2 css单位不支持em,rem,百分比

# bad
.the-article {
  width: 100%;
}
# good
.the-articel {
  width: 750px;
}

2.3 布局只能使用Flexbox, 不支持内联布局display: inline/float

例如下面的 文字加粗 效果无法实现

image.png

2.4 不支持align-self: stretch, 无法实现两列等高布局

2.5 不支持负边距

# bad
.the-image {
  margin-left: -10px;
}
# good 
.the-image {
  transform: translateX(-10px);
}

2.6 不支持z-index, 没有层级概念, 靠后都元素层级更高

2.7 伪类选择器只支持active focus disabled enabled

# bad
.list-item:first-of-type {}
.list-item:last-of-type {}
.list-item:before {}
.list-item:after {}

# good 
.list-item--first {}
.list-item--last {}

2.8 不支持背景图片

background-image: url(***);

3. js & vue 的支持性

3.1 不支持按需加载

# bad
const Home = () => import('@/pages/home')

# good
const Home = require('@/pages/home')
# or
import Home from '@/pages/home' 

3.2 不支持事件修饰符

# bad

3.3 clss不支持常规写法

# bad

# good

3.4 不支持触发/监听原生事件

# bad
this.$on('click', () => {})
this.$emit('click',  '啦啦啦')

# good
this.$on('btnClick', () => {})
this.$emit('btnClick', '啦啦啦')

3.5 不支持组件缓存

# bad

    

3.6 不支持定时器setInterval, 只能用setTimeout模拟

4. 支持加载网络图片,不支持加载本地图片, 如需支持, 需要先在android 和 ios 端代码中分别实现。

5. 纵向scroller不能嵌套同向scroller或list，例：纵向scroller不能嵌套同向scroller或list

6. list组件, ios要设置高度，否则不显示

...

7. eslint的waining要解决调，否则打包失败

8. 内置组件如slider, 样式只能通过特定的css属性修改

# 修改轮播图小点的颜色
.base-slider__indicator {
  item-color: #cdcfd0;
  item-selected-color: #00ae66;
}

9. 所有文字必须用 包裹，否则样式在真机上不生效。text不能再包含其他标签。

# bad
大师兄，师傅被妖怪抓走了

# bad

  大师兄，二师兄被妖怪抓走了


# good
大师兄，我被妖怪抓走了

10. 社区不活跃，资料不足，文档简单，第三方支持太弱。出了问题找不到解决方案。

11. 不支持的api，调试工具不报错，无法定位问题。

---

好的地方

1. 自动做响应式布局, 开发过程只需要按照设计稿尺寸写像素值px
2. image组件支持默认图片, 支持图片自适应
3. css属性lines, 简化多行超出点点点的实现
4. refresh支持下拉刷新
5. slider 轮播图组件
6. scroll、list 滚动组件
7. modal 弹框组件
8. animation 转场动画
9. 其他app原生能力