uni-app 1.4 發布,一套代碼,發行多個平臺

2021-01-16 開源中國

在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-project

Tips:如果之前已使用過老版本的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 鼓勵。

相關焦點

  • 多端開發框架uni-app 1.2發布
    uni-app遵循Vue.js語法規範,一套代碼,多端發行,切實解決了眾多開發者的痛點;故自8月份發布以來,已有上萬名開發人員擁抱uni-app,目前已累計創建了數萬個應用,活躍的開發者們每天在QQ群中產生數萬條交流記錄。  奔跑的腳步不會停止,歷時一個多月的打磨,uni-app 1.2版本正式發布,支持發行到H5平臺。
  • 一套前端代碼編譯到iOS、安卓、H5、小程序多個平臺
    uni-app 是一個使用 Vue.js 開發跨平臺應用的前端框架,開發者編寫一套代碼,可編譯到iOS、Android、H5、小程序等多個平臺。一套代碼編到5個平臺,難以置信嗎?uni-app實現了一套代碼,同時運行到多個平臺;如下圖所示,一套代碼,同時運行到iOS模擬器、Android模擬器、微信開發者工具、支付寶小程序Studio、百度開發者工具、H5(底部6個終端選項卡代表6個終端模擬器):實際運行效果如下:為什麼要選擇uni-app?
  • uni-app黑魔法:小程序自定義組件運行到H5平臺
    業內也已有不少成熟方案,從場景上來說,大致分為三類:基於跨端框架,從頭開發,一套代碼,發行多個平臺,比如DCloud出品的uni-app、京東凹凸實驗室的taro復用H5代碼,轉換H5代碼在小程序環境中執行;適用於有H5平臺沉澱,未開發小程序或小程序完善度較低的開發者;美團的
  • uni-app 1.2發布,iOS、Android、小程序、H5全覆蓋
    uni-app遵循Vue.js語法規範,一套代碼,多端發行,切實解決了眾多開發者的痛點;故自 8 月份發布以來,已有上萬名開發人員擁抱uni-app,目前已累計創建了數萬個應用,活躍的開發者們每天在QQ群中產生數萬條交流記錄。奔跑的腳步不會停止,歷時一個多月的打磨,uni-app 1. 2 版本正式發布,支持發行到H5 平臺。
  • uni-app學習筆記(一)-- uni-app簡介
    簡單的說:你寫出一套代碼,然後可以根據需要打包出 web應用、安卓app、IOSapp、微信小程序、支付寶小程序、頭條小程序、百度小程序......趕緊去官網看一下介紹,感受一下它牛逼的氣息。時支持所有vue的語法;發布到App和小程序時,由於平臺限制,無法實現全部vue語法,但uni-app仍是是對vue語法支持度最高的跨端框架。
  • uni-app 2.2 發布,大幅度優化 H5 端性能體驗|技術頭條
    作者 | uni-app團隊責編 | 伍杏玲uni-app 自發布以來,已經服務了幾十萬開發者。但讓我們意外,有大量開發者用uni-app只編寫H5版,並沒有多端發布。這其實也符合uni-app的初衷,uni-app的定位並不是需要多端發布時才用uni-app。uni-app是一個使用vue.js開發所有前端應用的統一框架。
  • uni-app 2.2 發布,大幅優化 H5 端性能體驗
    讓我們意外,或者說驚喜的是,有大量開發者用uni-app只編寫H5版,並沒有多端發布(可參考案例)。這其實也符合uni-app的初衷,uni-app的定位並不是需要多端發布時才用uni-app。uni-app是一個使用vue.js開發所有前端應用的統一框架。對於一個前端工程師來說,使用uni-app做多端效率更高,做單一端也沒問題,並在各端有不少出彩的地方。
  • uni-app學習筆記(二)——uni-app詳解
    uni-app (一套代碼,多端發行)如果你會使用Vue那咱們繼續吧!什麼是uni-app?uni-app 是一個使用 Vue.js 開發所有前端應用的框架,開發者編寫一套代碼,可發布到iOS、Android、H5、以及各種小程序(微信/支付寶/百度/頭條/QQ/釘釘)等多個平臺。
  • 萬能前端框架uni app初探01:搭建開發環境
    前言:從本節開始,我來帶領大家學習uni app,這是一款逆天的前端框架,基於vue.js,同一套代碼,可發布到iOS、Android、H5、以及各種小程序等多個平臺,本節,我們部署在微信小程序和一、基礎知識1.uni app簡介​uni-app​ 是一個使用 Vue.js 開發所有前端應用的框架,開發者編寫一套代碼,可發布到iOS、Android、H5、以及各種小程序(微信/支付寶/百度/頭條/QQ/
  • 風靡業內的跨端開源框架 uni-app 入駐 CODE.CHINA
    一套代碼編到10個平臺,對uni-app來說,早已不是夢想。>https://codechina.csdn.net/dcloud/uni-app項目簡介:uni-app 是一個使用 Vue.js 開發所有前端應用的框架,可實現開發一套代碼同時發布到iOS、Android、H5、以及各種小程序(微信/支付寶/百度/頭條/QQ/
  • HBuilderX 1.0正式發布!uni-app實現裡程碑突破!
    l  更穩定: HBuilderX提供了比其他開發工具更完善的代碼保護,不再怕崩潰、斷電丟代碼。 HBuilderX1.0發布的另一個重磅的就是uni-app uni-app被定義為終極跨平臺開發框架,隨著HBuilderX1.0的發布,同樣迎來了裡程碑突破!
  • uni-app開發注意事項總結
    一、HBuilderX - uni-app發布1、uni-app發布為H51、在 manifest.json2、uni-app發布為小程序1、申請微信小程序AppID2、在HBuilderX中頂部菜單依次點擊 "發行" => "小程序-微信",輸入小程序名稱和appid點擊發行即可在 unpackage/dist/build/mp-weixin 生成微信小程序項目代碼。
  • uni-app小程序開發指南
    安裝完畢需要修改運行配置中正確的微信開發者工具安裝路徑推薦插件:NPM,內置終端,uni-app編譯,eslint-js,js壓縮,css壓縮,less編譯,scss/sass編譯3.開發前的準備3.1 小程序帳號註冊到微信公眾平臺註冊小程序帳號。3.1 開發環境搭建Node.js:下載並安裝Node.js及npm。
  • uni-app打包編譯成安卓及ios包並上傳發布測試版
    個人公眾號:微信搜索:前端速成記uni-app是vue黨開發一套代碼編譯(8個)各種平臺的解決方案 官網:(https://uniapp.dcloud.io/)開發特點:1.是一套ui(及簡單)及api基本滿足開發.
  • uni-app實現簡單API攔截
    今天我們簡單了解一下uni-app:官網的解釋時uni-app 是一個使用 Vue.js 開發跨平臺應用的前端框架,可以讓開發者編寫一套代碼,便可以編譯到iOS、Android、H5、小程序等多個平臺。當然框架儘可能的處理各端差異,保證我們使用一致性,所以使用起來感覺還不錯,畢竟誰想反覆的開發同一個項目到不同平臺呢。
  • LR.APP:一款基於uni-app開發的多端APP/小程序系統
    使用技術 LR.APP是基於uni-app開發的多端APP/小程序系統,設計理念是解決多端開發問題,使用時,開發者僅需一套代碼,即可編譯到iOS、Android、H5、小程序等多個平臺。
  • LR.APP:一款基於uni-app開發的多端APP/小程序系統
    使用技術LR.APP是基於uni-app開發的多端APP/小程序系統,設計理念是解決多端開發問題,使用時,開發者僅需一套代碼,即可編譯到iOS、Android、H5、小程序等多個平臺。LR.APP封裝了跨端兼容的組件和api,如果你不熟悉uni-app框架,可以直接使用 Vue.js 的開發模式進行二次開發,以 .vue 單文件的形式來編寫每一個App 頁面。為降低上手難度,基於Vue.js的LR.APP支持組件化開發,且內置了 Vuex 等常用工具庫。
  • Android uni-app 封裝原生插件
    這邊文章圖文講解一下怎麼封裝原生插件,並且在下一章uni-app實現音視頻通話。1.uni-app是什麼?一個使用Vue.js開發所有前端應用框架,開發者編寫一套代碼,可發布到ios、Android、H5、以及各種小程序(微信/支付寶/百度/頭條/QQ/釘釘)等多個平臺。
  • uni-app跨平臺框架對微信小程序的無障礙支持探索
    uni-app是一個使用Vue.js開發所有前端應用的框架,開發者編寫一套代碼,可發布到iOS、Android、H5、以及各種小程序(微信/支付寶/百度/頭條/QQ/釘釘/淘寶)、快應用等多個平臺。今天,我們來體驗uni-app對微信小程序的無障礙支持情況。
  • uni-app從零開發影視小程序1——搭建開發環境構建項目
    前兩天抓包了幾個影視小程序的接口了,現在我準備用抓取的接口開發一個自己的影視小程序或app,並給大家分享一下如何從零開發一個小程序或app;在這裡我將使用uniapp進行開發,uniapp是一個前端開發框架,可以一套代碼兼容全平臺小程序以及app,這應該大家都有所了解吧,如果不了解的可以自行搜索一下哦,我這裡就不做詳細介紹了!