uni-app 1.2釋出，iOS、Android、小程式、H5主流四端全覆蓋

崔紅保發表於2018-11-27
APPiOSAndroidH5

多端氾濫、精力有限，是很多前端開發者每日的夢魘。

uni-app遵循Vue.js語法規範，一套程式碼，多端發行，切實解決了眾多開發者的痛點；

故自8月份釋出以來，已有上萬名開發人員擁抱uni-app，目前已累計建立了數萬個應用，活躍的開發者們每天在QQ群中產生數萬條交流記錄。

奔跑的腳步不會停止，歷時一個多月的打磨，uni-app 1.2版本正式釋出，支援發行到H5平臺。

至此，uni-app實現了iOS、Android、小程式、H5主流四端全覆蓋！
圖片描述
另外，uni-app 自1.2版本開始，正式開源(傳送門)，歡迎大家 star 鼓勵。

掃碼體驗

例項說話，依次掃描如下4個二維碼，對比體驗一下：

注：Appstore不能提交簡單demo，所以iOS版補充了一些其他功能。

快速上手

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-project
npm 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 代表非此平臺的條件編譯（如<!-- #ifndef H5 -->代表非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需求牆

相關文章