多端泛濫、精力有限,是很多前端開發(fā)者每日的夢魘。
uni-app遵循Vue.js語法規(guī)范,一套代碼,多端發(fā)行,切實解決了眾多開發(fā)者的痛點;
故自8月份發(fā)布以來,已有上萬名開發(fā)人員擁抱uni-app,目前已累計創(chuàng)建了數(shù)萬個應(yīng)用,活躍的開發(fā)者們每天在QQ群中產(chǎn)生數(shù)萬條交流記錄。
奔跑的腳步不會停止,歷時一個多月的打磨,uni-app 1.2版本正式發(fā)布,支持發(fā)行到H5平臺。
至此,uni-app實現(xiàn)了iOS、Android、小程序、H5主流四端 全覆蓋!
另外,uni-app 自1.2版本開始,正式開源(GitHub搜索),歡迎大家 star 鼓勵。
掃碼體驗
感興趣的同學(xué)可以關(guān)注微信公眾賬號:DCloud,掃碼體驗。
快速上手
uni-app支持通過 HBuilderX可視化界面、vue-cli命令行兩種方式快速創(chuàng)建項目,兩種模式運行到H5平臺后,都支持熱重載。
通過 HBuilderX 可視化界面
可視化的方式比較簡單,HBuilderX內(nèi)置處理了相關(guān)環(huán)境依賴,適合懶人操作。
1.下載HBuilderX,并安裝、啟動
2.新建項目,選擇uni-app類型,并選擇 Hello uni-app 模板
3.點擊頂部菜單,運行到chrome瀏覽器
4.之后HBuilderX開始編譯,并將信息輸出到控制臺
5.編譯完成后,HBuilderX會自動打開chrome瀏覽器并加載H5頁面
tips:
若chrome已提前打開,則需開發(fā)者手動將chrome切換為手機(jī)調(diào)試模式
若chrome未打開,HBuilderX會嘗試自動將chrome切換為調(diào)試模式,但這個切換存在延時,若頁面顯示不正常,需手動刷新
通過vue-cli命令行
習(xí)慣cli腳手架的同學(xué),可以通過vue-cli創(chuàng)建uni-app項目。
1.全局安裝vue-cli
npm install -g @vue/cli
2.創(chuàng)建uni-app項目
vue create -p dcloudio/uni-preset-vue my-project
此時,會提示選擇項目模板,初次體驗建議選擇 hello uni-app 項目模板,如下所示:
3.進(jìn)入目錄并運行
cd my-projectnpm run serve
運行成功后,控制臺會輸出H5網(wǎng)站訪問地址,如下:
4.啟動chromel瀏覽器并切換為手機(jī)調(diào)試模式,訪問如上地址即可體驗。
tips:
目前cli腳手架僅支持編譯為H5網(wǎng)站,下版本將支持編譯到微信小程序平臺;
現(xiàn)階段若需運行到微信小程序或App,則需將項目根目錄下的src文件夾,拖拽到HBuilderX中,點擊“運行”菜單執(zhí)行
H5端配置
uni-app在發(fā)行到H5端時,采用的是SPA模式,支持下列配置:
自定義頁面模板,支持簡單的SEO配置及百度統(tǒng)計
支持 hash/history 兩種路由跳轉(zhuǎn)模式
支持自定義頁面js加載組件
本次發(fā)版的其它更新
uni-app 1.2版本,還包括如下更新:
新增 條件編譯 #ifndef 代表非此平臺的條件編譯(如代表非H5平臺,也就是uni-app目前支持的App及小程序平臺)
新增 API tabBar支持設(shè)置紅點和角標(biāo)
新增 API 監(jiān)聽網(wǎng)絡(luò)狀態(tài)變化
新增 button 組件的 open-type 屬性支持 feedback 值域
新增 manifest.json 配置 navigateToMiniProgramAppIdList 節(jié)點,可配置需需跳轉(zhuǎn)的小程序列表
新增 nvue 支持第三方weex ui庫
新增 nvue 支持 bindingx
新增 nvue 支持頂部原生導(dǎo)航的 onNavigationBarButtonTap 事件
修復(fù) uni.request method 為 PUT、DELETE 時,參數(shù)信息丟失的問題
修復(fù) picker 組件 cancel 事件不觸發(fā)的問題
修復(fù) 復(fù)雜場景下組件數(shù)據(jù)渲染異常的問題
修復(fù) uni.canvasToTempFilePath 方法設(shè)置參數(shù)destWidth、destHeight不生效的問題
修復(fù) nvue 初始化時得不到 storage 的問題
修復(fù) nvue Android平臺 不支持 Websocket 功能的問題
修復(fù) nvue Android平臺 頁面未設(shè)置 titleNView 時可能顯示不正常的問題
修復(fù) nvue iOS平臺 彈出軟鍵盤后收回區(qū)域可能不對的問題
修復(fù) nvue iOS平臺使用 uni.request 不能設(shè)置data的問題
優(yōu)化 web-view 組件 增加網(wǎng)頁加載進(jìn)度條
優(yōu)化 web-view 組件 標(biāo)題與頁面 title 同步
優(yōu)化 input 組件 type="number" 在 App 端支持輸入小數(shù)點
未來計劃
uni-app會繼續(xù)保持高速迭代,在繼續(xù)完善已覆蓋的四端情況下,補(bǔ)充百度、支付寶小程序的兼容。
更多需求計劃,參考[uni-app需求墻]
申請創(chuàng)業(yè)報道，分享創(chuàng)業(yè)好點子。點擊此處，共同探討創(chuàng)業(yè)新機(jī)遇！
