weex css单位,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，调试工具不报错，无法定位问题。

好的地方

自动做响应式布局, 开发过程只需要按照设计稿尺寸写像素值px

image组件支持默认图片, 支持图片自适应

css属性lines, 简化多行超出点点点的实现

refresh支持下拉刷新

slider 轮播图组件

scroll、list 滚动组件

modal 弹框组件

animation 转场动画

其他app原生能力