域名預(yù)訂/競(jìng)價(jià)，好“米”不錯(cuò)過(guò)

多端泛濫、精力有限,是很多前端開(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主流四端 全覆蓋!

另外,uni-app 自1.2版本開(kāi)始,正式開(kāi)源(GitHub搜索),歡迎大家 star 鼓勵(lì)。

掃碼體驗(yàn)

感興趣的同學(xué)可以關(guān)注微信公眾賬號(hào):DCloud,掃碼體驗(yàn)。

快速上手

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 模板

3.點(diǎn)擊頂部菜單,運(yùn)行到chrome瀏覽器

4.之后HBuilderX開(kāi)始編譯,并將信息輸出到控制臺(tái)

5.編譯完成后,HBuilderX會(huì)自動(dòng)打開(kāi)chrome瀏覽器并加載H5頁(yè)面

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)目模板,如下所示:

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

cd my-projectnpm run serve

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

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

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需求墻]

申請(qǐng)創(chuàng)業(yè)報(bào)道，分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處，共同探討創(chuàng)業(yè)新機(jī)遇！