在2019新年到來之際,uni-app 1.4版本正式發布,新增支持百度、支付寶小程序,開放插件市場,同時注入更多優秀特性,為開發者送上了一份新年大禮!
支持更多小程序平臺uni-app 1.4 版本新增支持百度、支付寶小程序,從此一次開發,可發布小程序(微信/支付寶/百度)、H5、App(iOS/Android)6大平臺!
uni-app 在HBuilderX開發工具中有非常友好高效的支持,提供可視化操作菜單,發行各家小程序簡單便利詳情,這裡不再贅述;本文主要說明如何通過vue-cli編譯發行各家小程序。
使用cli編譯到各家小程序之前,需先安裝vue-cli並創建uni-app項目,主要命令如下:
# npm script# 全局安裝vue-cli$ npm install -g @vue/cli# 創建uni-app項目,會提示選擇項目模板$ vue create -p dcloudio/uni-preset-vue my-project# 進入項目目錄$ cd my-projectTips:如果之前已使用過老版本的uni-app cli插件,則通過npm將uni-app升級到最新版,即可獲得將原有uni-app項目轉換到各家小程序的能力
支持支付寶小程序使用如下命令進行支付寶小程序的編譯預覽及發行打包
# npm script# dev 模式,編譯預覽$ npm run dev:mp-alipay# build 模式,發行打包$ npm run build:mp-alipay發行到支付寶小程序,需要你下載並打開支付寶小程序開發者工具,然後選擇項目編譯目錄(dev模式、build 模式編譯目錄不同,見下方說明)進行預覽或發行。
dev模式 和 build 模式的區別:
dev 模式編譯目錄為項目根目錄下的 /dist/dev/ 目錄
build 模式編譯目錄為項目根目錄下的 /dist/build/ 目錄
dev 模式有 SourceMap 可以方便的進行斷點調試
build 模式會將代碼將會進行壓縮,體積更小更適合發布為正式版應用
目前hello uni-app 已上線支付寶小程序,可以打開支付寶,掃描以下二維碼進行體驗:
支持百度智能小程序百度智能小程序的編譯方式與支付寶小程序一致,簡單替換平臺標識(mp-baidu)即可。
你可以使用如下命令進行百度智能小程序編譯預覽及打包:
# npm script# dev 模式,編譯預覽$ npm run dev:mp-baidu# build 模式,發行打包$ npm run build:mp-baidu發行到百度智能小程序,需要你下載並打開百度開發者工具,然後選擇項目編譯目錄進行預覽或發行。
Tips:dev 模式、build模式差異同支付寶小程序
支持通過 cli 命令行編譯到微信小程序平臺uni-app 很早就支持發行到微信小程序,但需在 HBuilderX 開發工具中操作;uni-app 1.4版本支持通過vue-cli 編譯到微信小程序,方式同支付寶小程序。
你可以使用如下命令進行微信小程序編譯預覽及打包:
# npm script# dev 模式,編譯預覽$ npm run dev:mp-weixin# build 模式,發行打包$ npm run build:mp-weixin同樣,發行到微信小程序,需要你下載並打開微信開發者工具,然後選擇項目編譯目錄進行預覽或發行。
其它功能特性uni-app 插件市場上線了!支持前端組件、js sdk、頁面模板、項目模板、原生插件等多種類型,還支持原生插件的雲打包,詳情。
插件市場作為輪子的需求者和製造者之間的對接平臺,將提升所有 uni-app 開發者的效率和重用程度。
另外,uni-app 1.4版本在條件編譯、H5平臺等方面也有大量改建,詳見如下:
新增 條件編譯 static 支持平臺目錄,不同平臺可定義自己的獨有靜態文件 詳情
新增 條件編譯 支持多平臺「或」運算符:||。例如: // #ifdef MP-WEIXIN || MP-BAIDU 代表在微信小程序和百度小程序均生效
新增 條件編譯 pages.json 支持條件編譯。pages.json裡不引用的頁面不會打包,可以更自由的管理不同平臺文件的打包策略。
修復 條件編譯 使用 ifndef 導致編譯錯誤的問題
新增 manifest.json 中(mp-weixin 節點下) 新增 permission 配置,用於微信小程序接口權限相關設置
新增 藍牙相關API 詳情
新增 低功耗藍牙相關API 詳情
新增 iBeacon相關API 詳情
優化 css 編譯報錯提示
修復 v-for item 部分寫法編譯失敗的問題
H5平臺 新增 canvas 組件和相關 API
H5平臺 優化 導航欄自定義按鈕支持 float 屬性
H5平臺 修復 uni.showModal 內容過多顯示超出屏幕的問題
H5平臺 修復 picker 組件未設置 value 屬性值時報錯的問題
H5平臺 修復 TabBar 頁面 onHide 鉤子函數不觸發的問題
H5平臺 修復 map 組件中 marker 圖像不顯示的問題
H5平臺 修復 AudioContext 事件監聽報錯的問題
H5平臺 修復 swiper 組件動態設置 current 後 swiper 不切換的問題
H5平臺 修復 swiper 組件設置屬性 previous-margin、next-margin 顯示異常的問題
H5平臺 修復 picker 組件顯示的選中項不正確的問題 #103
H5平臺 修復 picker 組件動態設置高度後顯示異常的問題
H5平臺 修復 radio 組件設置 color 屬性不生效的問題 #119
H5平臺 修復 picker 組件 columnchange 事件不觸發的問題
未來規劃uni-app 將儘快適配字節跳動小程序,並進一步抹平H5、各家小程序之間的平臺差異,讓開發者儘可能的一套代碼,順滑的發行到多個平臺。
uni-app 在小程序端,引用和改造了mpvue及Megalo,感謝美團點評團隊、網易考拉團隊對開源社區的貢獻!
uni-app會在開源的路上繼續前行,為幫助uni-app更好的成長,更好的服務開發者,歡迎您給uni-app反饋改進意見,或 Star 鼓勵。