多端泛濫、精力有限，是很多前端開(kāi)發(fā)者每日的夢(mèng)魘。

uni-app遵循Vue.js語(yǔ)法規(guī)范，一套代碼，多端發(fā)行，切實(shí)解決了眾多開(kāi)發(fā)者的痛點(diǎn)；

故自8月份發(fā)布以來(lái)，已有上萬(wàn)名開(kāi)發(fā)人員擁抱uni-app，目前已累計(jì)創(chuàng)建了數(shù)萬(wàn)個(gè)應(yīng)用，活躍的開(kāi)發(fā)者們每天在QQ群中產(chǎn)生數(shù)萬(wàn)條交流記錄。

奔跑的腳步不會(huì)停止，歷時(shí)一個(gè)多月的打磨，uni-app 1.2版本正式發(fā)布，支持發(fā)行到H5平臺(tái)。

至此，uni-app實(shí)現(xiàn)了iOS、Android、小程序、H5主流四端全覆蓋！

跨端.png

掃碼體驗(yàn)

實(shí)例說(shuō)話(huà)，依次掃描如下4個(gè)二維碼，對(duì)比體驗(yàn)一下：

image

注：Appstore不能提交簡(jiǎn)單demo，所以iOS版補(bǔ)充了一些其他功能。

快速上手

uni-app支持通過(guò) HBuilderX可視化界面、vue-cli命令行兩種方式快速創(chuàng)建項(xiàng)目，兩種模式運(yùn)行到H5平臺(tái)后，都支持熱重載。

通過(guò) HBuilderX 可視化界面

可視化的方式比較簡(jiǎn)單，HBuilderX內(nèi)置處理了相關(guān)環(huán)境依賴(lài)，適合懶人操作。

1.下載HBuilderX（地址），并安裝、啟動(dòng)
2.新建項(xiàng)目，選擇uni-app類(lèi)型，并選擇 Hello uni-app 模板

image

image

image

image

tips:

• 若chrome已提前打開(kāi)，則需開(kāi)發(fā)者手動(dòng)將chrome切換為手機(jī)調(diào)試模式
• 若chrome未打開(kāi)，HBuilderX會(huì)嘗試自動(dòng)將chrome切換為調(diào)試模式，但這個(gè)切換存在延時(shí)，若頁(yè)面顯示不正常，需手動(dòng)刷新

通過(guò)vue-cli命令行

習(xí)慣cli腳手架的同學(xué)，可以通過(guò)vue-cli創(chuàng)建uni-app項(xiàng)目。

1.全局安裝vue-cli

npm install -g @vue/cli

2.創(chuàng)建uni-app項(xiàng)目

vue create -p dcloudio/uni-preset-vue my-project

此時(shí)，會(huì)提示選擇項(xiàng)目模板，初次體驗(yàn)建議選擇 hello uni-app 項(xiàng)目模板，如下所示：

image

3.進(jìn)入目錄并運(yùn)行

cd my-project
npm run serve

運(yùn)行成功后，控制臺(tái)會(huì)輸出H5網(wǎng)站訪(fǎng)問(wèn)地址，如下：

image

4.啟動(dòng)chromel瀏覽器并切換為手機(jī)調(diào)試模式，訪(fǎng)問(wèn)如上地址即可體驗(yàn)。

image

tips：

• 目前cli腳手架僅支持編譯為H5網(wǎng)站，下版本將支持編譯到微信小程序平臺(tái)；
• 現(xiàn)階段若需運(yùn)行到微信小程序或App，則需將項(xiàng)目根目錄下的src文件夾，拖拽到HBuilderX中，點(diǎn)擊“運(yùn)行”菜單執(zhí)行

H5端配置

uni-app在發(fā)行到H5端時(shí)，采用的是SPA模式，支持下列配置：

• 自定義頁(yè)面模板，支持簡(jiǎn)單的SEO配置及百度統(tǒng)計(jì)
• 支持 hash/history 兩種路由跳轉(zhuǎn)模式
• 支持自定義頁(yè)面js加載組件

本次發(fā)版的其它更新

uni-app 1.2版本，還包括如下更新：

• 新增 條件編譯 #ifndef 代表非此平臺(tái)的條件編譯（如代表非H5平臺(tái)，也就是uni-app目前支持的App及小程序平臺(tái)）
• 新增 API tabBar支持設(shè)置紅點(diǎn)和角標(biāo)
• 新增 API 監(jiān)聽(tīng)網(wǎng)絡(luò)狀態(tài)變化
• 新增 button 組件的 open-type 屬性支持 feedback 值域
• 新增 manifest.json 配置 navigateToMiniProgramAppIdList 節(jié)點(diǎn)，可配置需需跳轉(zhuǎn)的小程序列表
• 新增 nvue 支持第三方weex ui庫(kù)
• 新增 nvue 支持 bindingx
• 新增 nvue 支持頂部原生導(dǎo)航的 onNavigationBarButtonTap 事件
• 修復(fù) uni.request method 為 PUT、DELETE 時(shí)，參數(shù)信息丟失的問(wèn)題
• 修復(fù) picker 組件 cancel 事件不觸發(fā)的問(wèn)題
• 修復(fù) 復(fù)雜場(chǎng)景下組件數(shù)據(jù)渲染異常的問(wèn)題
• 修復(fù) uni.canvasToTempFilePath 方法設(shè)置參數(shù)destWidth、destHeight不生效的問(wèn)題
• 修復(fù) nvue 初始化時(shí)得不到 storage 的問(wèn)題
• 修復(fù) nvue Android平臺(tái) 不支持 Websocket 功能的問(wèn)題
• 修復(fù) nvue Android平臺(tái) 頁(yè)面未設(shè)置 titleNView 時(shí)可能顯示不正常的問(wèn)題
• 修復(fù) nvue iOS平臺(tái) 彈出軟鍵盤(pán)后收回區(qū)域可能不對(duì)的問(wèn)題
• 修復(fù) nvue iOS平臺(tái)使用 uni.request 不能設(shè)置data的問(wèn)題
• 優(yōu)化 web-view 組件 增加網(wǎng)頁(yè)加載進(jìn)度條
• 優(yōu)化 web-view 組件 標(biāo)題與頁(yè)面 title 同步
• 優(yōu)化 input 組件 type="number" 在 App 端支持輸入小數(shù)點(diǎn)

未來(lái)計(jì)劃

uni-app會(huì)繼續(xù)保持高速迭代，在繼續(xù)完善已覆蓋的四端情況下，補(bǔ)充百度、支付寶小程序的兼容。

更多需求計(jì)劃，參考uni-app需求墻