1. 移動(dòng)端跨平臺(tái)開發(fā)方案介紹
(1) 流行框架比較
(2) 框架共同點(diǎn)：每個(gè)框架幾乎都包含以下特性
- 使用 HTML5 + CSS + JavaScript 開發(fā)墓塌；
- 跨平臺(tái)重用代碼羹铅；
- 豐富的UI庫霞捡；
- 提供訪問設(shè)備原生API的 JavaScript API 包裝器坐漏；
- 解決原生開發(fā)中機(jī)型適配的難題；
- 提供打包、部署的工具或服務(wù)赊琳；
- 都需要學(xué)習(xí)自身封裝的 JavaScript API街夭；
(3) 選擇框架的要求
- 性能：運(yùn)行速度快；
- UI：提供接近原生的UI體驗(yàn)躏筏；
- 插件多板丽，文檔豐富，開發(fā)效率高趁尼，容易擴(kuò)展和維護(hù)埃碱；
- 滿足業(yè)務(wù)需求；
2. uni-app推出背景(當(dāng)前跨平臺(tái)開發(fā)的主要問題)
github地址：uni-app-github
- 多端泛濫
當(dāng)前是一個(gè)多端泛濫的時(shí)代,除了原有的Android弱卡、IOS乃正、H5、小程序平臺(tái),支付寶婶博、百度瓮具、淘寶、今日頭條等都陸續(xù)發(fā)布了自己的小程序和快應(yīng)用規(guī)范,用戶被眾多平臺(tái)分散,為了覆蓋更多的用戶,開發(fā)者需要更多的學(xué)習(xí)凡人、適配和維護(hù)成本名党。 - 體驗(yàn)不好
過去的跨平臺(tái)框架在app上的體驗(yàn)并不好。 - 生態(tài)不豐富
過去的跨平臺(tái)框架在周邊的生態(tài)一直不豐富,開發(fā)者很難獲取更好更多的SDK挠轴。
選擇uniapp進(jìn)行跨平臺(tái)開發(fā)的原因：
- 資金：uniapp開源免費(fèi)传睹。
APICloud閉源，免費(fèi)版有限制岸晦；AppCan閉源欧啤，商業(yè)化產(chǎn)品，免費(fèi)版限制太多启上。- 技術(shù)及生態(tài)：uniapp使用了流行的vue.js開發(fā)邢隧，生態(tài)強(qiáng)大，h5開發(fā)效率高冈在。
Ionic使用AngularJS倒慧，學(xué)習(xí)曲線陡峭；React Native學(xué)習(xí)成本高包券；Flutter使用Dart纫谅，屬于小眾語言，一切都要重新學(xué)習(xí)（不利于后續(xù)維護(hù)和個(gè)人發(fā)展）溅固。- 性能及兼容：uni-app多端發(fā)布付秕，無限制；若無特殊需求侍郭，基本可以完成原生APP90%的任務(wù)盹牧。
另外俩垃，Cordova使用前端框架 famous 或 Framework7励幼，生態(tài)成熟汰寓，有很多工具可搭配使用，開源代碼可自由定制苹粟；DCloud使用前端框架MUI有滑，國產(chǎn)開源免費(fèi)，性能不錯(cuò)嵌削，并提供云服務(wù)幫助打包和部署毛好、測試，降低了技術(shù)門檻和提升了開發(fā)效率苛秕，而且擁有插件市場肌访，生態(tài)豐富，也可以自己開發(fā)插件艇劫。這兩種也是不錯(cuò)的選擇方案吼驶，可根據(jù)具體情況來選擇。
3. uni-app介紹
uni-app 是一個(gè)使用 Vue.js 開發(fā)跨平臺(tái)應(yīng)用的前端框架店煞，開發(fā)者編寫一套代碼,可編譯到Android蟹演、iOS、H5顷蟀、小程序等多個(gè)平臺(tái)酒请。uni-app在跨端數(shù)量、拓展能力鸣个、性能體驗(yàn)羞反、周邊生態(tài)、學(xué)習(xí)成本囤萤、開發(fā)成本等6大關(guān)鍵指標(biāo)上擁有極強(qiáng)的競爭優(yōu)勢,解決了現(xiàn)有跨平臺(tái)框架存在的問題昼窗。
vuejs學(xué)習(xí)-英文版
vuejs學(xué)習(xí)-中文版
4. uni-app主要特征
4.1 跨平臺(tái)更多且不犧牲平臺(tái)特色
(1)真正做到"一套代碼多端發(fā)行":一套代碼可發(fā)布到Android、IOS阁将、H5膏秫、小程序等多個(gè)平臺(tái),不需要對(duì)不同平臺(tái)的代碼進(jìn)行維護(hù)和升級(jí)。
(2)平臺(tái)能力不受限:通過條件編譯+平臺(tái)特有的API調(diào)用,可以優(yōu)雅地在為某平臺(tái)寫個(gè)性化代碼,調(diào)用專有能力而不影響其他平臺(tái)做盅。
4.2 運(yùn)行體驗(yàn)更好
(1)組件和api與微信小程序一致:微信小程序中性能極好的Hybird框架,使加載新頁面速度更快缤削。
(2)兼容weex原生渲染:App端支持weex原生渲染,可支持更流暢的用戶體驗(yàn)。
4.3 通用前端技術(shù)棧,學(xué)習(xí)成本更低
(1)學(xué)習(xí)成本低:基于通用前端技術(shù)棧,采用vue的語法+微信小程序的api
(2)內(nèi)嵌mpvue開源框架:mpvue項(xiàng)目可直接變成uniapp
4.4 開發(fā)生態(tài),組件更豐富
(1)支持通過npm安裝第三方包
(2)支持微信小程序自定義組件及JS SDK
(3)兼容mpvue組件及項(xiàng)目(內(nèi)嵌mpvue開源框架)
(4)App端支持和原生混合編碼
(5)插件豐富,DCloud將發(fā)布插件到市場
5. uni-app功能框架
6.uni-app工程相關(guān)流程
6.1 創(chuàng)建uni-app
(1)打開HBuilderX -> 文件 -> 新建 -> 項(xiàng)目
(2)選擇uni-app -> 填寫項(xiàng)目名稱 -> 選擇模板(以默認(rèn)模板為例) -> 創(chuàng)建完成
(3)新建項(xiàng)目目錄如圖所示
備注:項(xiàng)目目錄結(jié)構(gòu)說明可移步至uin-app工程介紹
6.2 運(yùn)行uni-app
6.3 發(fā)布uni-app
6.3.1 打包為原生app-云打包
(1)在HBuilderX工具欄吹榴，點(diǎn)擊發(fā)行亭敢，選擇原生app-云打包，如下圖：
(2)出現(xiàn)如下界面图筹，點(diǎn)擊打包即可：
(3)云打包成功
(4)控制臺(tái)信息：獲取下載地址并下載apk
備注：HBuilder的云端打包雖然方便帅刀，但不能打超過40M的包让腹。通過HTML5+SDK的本地打包方案可以解決打包大小限制的問題（TML5 Plus SDK，簡稱5+SDK扣溺，是把HTML5+運(yùn)行環(huán)境（5+ runtime）封裝為原生SDK）骇窍。
6.3.2 打包為原生app-(本地)離線打包
(1)在HBuilderX工具欄，點(diǎn)擊發(fā)行锥余，選擇原生app-本地打包腹纳，如下圖，點(diǎn)擊即可生成離線打包資源驱犹。
(2)控制臺(tái)信息：獲取離線打包資源本地路徑
備注：在 HBuilderX 生成離線打包資源后參考 離線打包（或參考其他用戶寫的 離線打包日記）嘲恍，即可進(jìn)行離線打包。實(shí)質(zhì)上最終還是在android開發(fā)平臺(tái)androidStudio中導(dǎo)入離線打包生成的項(xiàng)目代碼并進(jìn)行修改雄驹，這部分的文檔學(xué)習(xí)和修改成本極大佃牛。(3)報(bào)錯(cuò)：uni-app運(yùn)行環(huán)境(sdk)版本和編譯器(HBuilderX)版本不一致的問題
6.3.3 發(fā)布為H5
在HBuilderX工具欄，點(diǎn)擊發(fā)行医舆，選擇網(wǎng)站-H5手機(jī)版俘侠，如下圖，點(diǎn)擊即可生成 H5 的相關(guān)資源文件彬向，保存于 unpackage 目錄兼贡。
6.3.4 發(fā)布為小程序
(1)發(fā)布為微信小程序
(2)發(fā)布為百度小程序
(3)發(fā)布為支付寶小程序
(4)發(fā)布為支付寶小程序
說明：uni--app項(xiàng)目在HBuilderX上發(fā)布為小程序，生成對(duì)應(yīng)小程序項(xiàng)目代碼娃胆，在各小程序開發(fā)平臺(tái)導(dǎo)入生成的小程序項(xiàng)目代碼并測試項(xiàng)目代碼運(yùn)行正常后遍希，按照各平臺(tái)的標(biāo)準(zhǔn)流程進(jìn)行上傳代碼、提交審核等操作里烦，即可完成各小程序的發(fā)布工作凿蒜。
