前言

工作中接到開(kāi)發(fā)混合app的需求，以前沒(méi)有接觸過(guò)，做了一段時(shí)間調(diào)研，也寫個(gè)幾個(gè)項(xiàng)目，就過(guò)程中遇到的問(wèn)題，談?wù)勏敕ā?/p>

調(diào)研階段

經(jīng)過(guò)一陣google搜索，大致了解了幾種方案，按照類別可以分成以下幾類：

注：并未考慮原生 APP。

各種方案的優(yōu)缺點(diǎn)，網(wǎng)上有很多詳細(xì)的文章，這里就不一一敘述了，大家可自行搜索。

實(shí)踐階段

1. React-Native

接下來(lái)就是一個(gè)一個(gè)的嘗試，最早接觸過(guò)React-Native開(kāi)發(fā)，就先說(shuō)說(shuō)它。

React-Native提供了常用的組件，JSX語(yǔ)法，生態(tài)圈也比較繁榮，有很多插件。

坑也比較多：

• 前期對(duì)windows平臺(tái)以及android平臺(tái)支持不太友好，在此平臺(tái)上搭建環(huán)境簡(jiǎn)直想哭，建議mac；
• list組件存在性能問(wèn)題，初入門的面對(duì)一大堆英文文檔研究性能問(wèn)題，還是有一點(diǎn)點(diǎn)勉強(qiáng)的；
• 打包要兼顧ios和android，需要一定的原生基礎(chǔ)，但不多；
• 鍵盤遮擋問(wèn)題；
• navigator不是太好用；

2. Ionic

稍微嘗試了下Ionic框架，簡(jiǎn)單理解就是，Ionic提供UI框架，angular作為mvvm渲染框架，cordova作為中間件，并負(fù)責(zé)打包。

Ionic的UI組件豐富，大大方便了前端的開(kāi)發(fā)工作，但是UI設(shè)計(jì)嚴(yán)格要求的話，還是需要自己定制的。

3. Dcloud

dcloud提供了hbuilder開(kāi)發(fā)工具，mui框架，以及5+sdk，致力于提高HTML5性能體驗(yàn)。

mui不僅提供的UI組件豐富，還提供了事件管理、網(wǎng)絡(luò)請(qǐng)求等功能，真的是一應(yīng)俱全，而且有相關(guān)的完整demo。

坑：

• 普遍反映社區(qū)不活躍，官方論壇回復(fù)也很慢。
• 對(duì)于熟悉mvvm模式的開(kāi)發(fā)而言，不算好消息，dcloud采用的是類似jquery操作dom的方式
• 項(xiàng)目比較散亂，代碼冗余，和目前流行的前端項(xiàng)目工程化還是有差距的
• vue + mui 集成，相對(duì)比較困難，但是本人還是成功了。
• 客戶端反映，集成復(fù)雜，權(quán)限問(wèn)題嚴(yán)重。

4. weex

感覺(jué)還有待提高，對(duì)初學(xué)者很不友好。

從環(huán)境搭建，到建立項(xiàng)目工程，再到調(diào)試打包，沒(méi)有一份合理的指導(dǎo)，入坑需謹(jǐn)慎。

坑：

• weex-toolkit 升級(jí)后不再支持init命令
• npm需要> 5.0
• 使用vue-router需要將項(xiàng)目改造成單頁(yè)面，即修改webpack配置文件為單入口
• vue-router需要設(shè)置默認(rèn)值，否則會(huì)顯示空白
• navigator方式跳轉(zhuǎn)在web端不行，需要使用playground調(diào)試
• 在自己編寫的組件中使用v-for指令，playground中調(diào)試一直報(bào)錯(cuò)，Web正常。
• flex-direction默認(rèn)不是row

5. webview嵌套

前端工程可自行架構(gòu)，但要注意和客戶端商量好交互方式。

單頁(yè)面和多頁(yè)面都是可以的。

單頁(yè)面有一些注意的地方，重定向最好不要用，replace比push更好用。

webview就相當(dāng)于瀏覽器，如果從原生跳轉(zhuǎn)到嵌套SPA頁(yè)面，再跳轉(zhuǎn)到原生，可以像瀏覽器一樣正常逐級(jí)返回。

從原生跳轉(zhuǎn)到SPA頁(yè)面，首先要跳轉(zhuǎn)到SPA項(xiàng)目的路由入口才能繼續(xù)向下一級(jí)跳轉(zhuǎn)。