1. 用weex實現(xiàn)頁面跳轉(zhuǎn)虫溜？
1.1 使用vue-router
position: fixed/sticky 的元素，在切換頁面后不會消失
image.png
1.2 使用navigator 作為跳轉(zhuǎn)方案
通過谷歌、百度出來都方案, 都比較復(fù)雜康栈，折騰了兩天未實現(xiàn)辆苔。
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, 不支持內(nèi)聯(lián)布局display: inline/float
例如下面的 文字加粗 效果無法實現(xiàn)
image.png
2.4 不支持align-self: stretch, 無法實現(xiàn)兩列等高布局
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
<div @click.native>
<div @click.stop>
3.3 clss不支持常規(guī)寫法
# bad
<div :calss="{'is-active': isActive }">
# good
<div :class="[isActive && 'is-active']">
3.4 不支持觸發(fā)/監(jiān)聽原生事件
# bad
this.$on('click', () => {})
this.$emit('click', '啦啦啦')
# good
this.$on('btnClick', () => {})
this.$emit('btnClick', '啦啦啦')
3.5 不支持組件緩存
# bad
<keep-alive>
<my-component />
</keep-alive>
3.6 不支持定時器setInterval, 只能用setTimeout模擬
4. 支持加載網(wǎng)絡(luò)圖片,不支持加載本地圖片, 如需支持, 需要先在android 和 ios 端代碼中分別實現(xiàn)。
5. 縱向scroller不能嵌套同向scroller或list忿族，例：縱向scroller不能嵌套同向scroller或list
6. list組件, ios要設(shè)置高度锣笨，否則不顯示
<list style="height: 1000px;">...</list>
7. eslint的waining要解決調(diào)，否則打包失敗
8. 內(nèi)置組件如slider, 樣式只能通過特定的css屬性修改
# 修改輪播圖小點的顏色
.base-slider__indicator {
item-color: #cdcfd0;
item-selected-color: #00ae66;
}
9. 所有文字必須用<text> 包裹道批，否則樣式在真機上不生效错英。text不能再包含其他標(biāo)簽。
# bad
<div>大師兄隆豹，師傅被妖怪抓走了</div>
# bad
<text>
<text>大師兄椭岩，二師兄被妖怪抓走了<text>
</text>
# good
<text>大師兄，我被妖怪抓走了<text>
10. 社區(qū)不活躍璃赡，資料不足判哥，文檔簡單，第三方支持太弱碉考。出了問題找不到解決方案塌计。
11. 不支持的api，調(diào)試工具不報錯侯谁，無法定位問題锌仅。
好的地方
- 自動做響應(yīng)式布局, 開發(fā)過程只需要按照設(shè)計稿尺寸寫像素值px
- image組件支持默認(rèn)圖片, 支持圖片自適應(yīng)
- css屬性lines, 簡化多行超出點點點的實現(xiàn)
- refresh支持下拉刷新
- slider 輪播圖組件
- scroll、list 滾動組件
- modal 彈框組件
- animation 轉(zhuǎn)場動畫
- 其他app原生能力
