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