點選右上方紅色按鈕關注“web秀”，讓你真正秀起來
了解 Uni-App
uni-app 是一個使用 Vue.js 開發所有前端應用的架構，開發者編寫一套代碼，可釋出到iOS、Android、H5、以及各種小程式(微信/支付寶/百度/頭條/QQ/釘釘)等多個平台。
即使不跨端，uni-app同時也是更好的小程式開發架構。
uni-app 是由 DCloud 公司打造的，DCloud公司擁有340萬開發者使用者，旗下uni-app有5萬+案例、600+插件、50+微信/qq群、更高的百度指數，可以放心選擇。
Vue.js 一套代碼，釋出到iOS、Android、H5、以及各種小程式
為什麼要用 Uni-App
uni-app在開發者數量、案例、跨端抹平度、擴充靈活性、性能體驗、周邊生态、學習成本、開發成本等8大關鍵名額上擁有更強的優勢。
1、開發者/案例數量更多： 5萬+案例、600+插件、50+微信/qq群、更高的百度指數，跨端完善度更高，真正落地的提高生産力
2、平台能力不受限： 在跨端的同時，通過條件編譯+平台特有API調用，可以優雅的為某平台寫個性化代碼，調用專有能力而不影響其他平台。支援原生代碼混寫和原生sdk內建。
3、性能體驗優秀：體驗更好的Hybrid架構，加載新頁面速度更快。App端支援weex原生渲染，可支撐更流暢的使用者體驗。小程式端的性能優于市場其他架構。
4、周邊生态豐富：豐富的插件市場，各種模闆拿來即用。支援NPM、支援小程式元件和SDK、相容mpvue元件和項目、相容weex元件。微信生态的各種sdk可直接用于跨平台App。
5、學習成本低： 基于通用的前端技術棧，采用vue文法+微信小程式api，無額外學習成本。
Vue.js 一套代碼，釋出到iOS、Android、H5、以及各種小程式
快速開始
一、HBuilderX 下載下傳安裝
可視化的方式比較簡單，HBuilderX内置相關環境，開箱即用，無需配置nodejs。
開始之前，開發者需先下載下傳安裝如下工具：
HBuilderX：HBuilderX-高效極客技巧
HBuilderX是通用的前端開發工具，但為uni-app做了特别強化。
二、建立項目
在點選工具欄裡的檔案 -> 建立 -> 項目：
Vue.js 一套代碼，釋出到iOS、Android、H5、以及各種小程式
選擇uni-app，輸入工程名，并且你可以從模闆裡的 你喜歡的模闆 即可體驗官方示例。最後點選建立，即可成功建立 uni-app 項目。
Vue.js 一套代碼，釋出到iOS、Android、H5、以及各種小程式
官方模闆位址：DCloud 插件市場
Vue.js 一套代碼，釋出到iOS、Android、H5、以及各種小程式
我這裡選擇“電商模闆min-amll”建立項目
三、運作uni-app項目
1、浏覽器運作：進入項目，點選工具欄的運作 -> 運作到浏覽器 -> 選擇浏覽器，即可在浏覽器裡面體驗uni-app 的 H5 版。
Vue.js 一套代碼，釋出到iOS、Android、H5、以及各種小程式
預覽圖：
Vue.js 一套代碼，釋出到iOS、Android、H5、以及各種小程式
2、真機運作：連接配接手機，開啟USB調試，進入項目，點選工具欄的運作 -> 真機運作 -> 選擇運作的裝置，即可在該裝置裡面體驗uni-app。
(1)、android手機，USB連接配接後，打開開發者模式
(2)、ios 手機，電腦先下載下傳 iTunes ，然後USB連接配接電腦，添加信任裝置即可。
Vue.js 一套代碼，釋出到iOS、Android、H5、以及各種小程式
這裡我們以ios為例。
3、手機上面已經安裝了一個名叫“HBuilder”的APP了，這時候點選是打不開的，需要我們ios手機 -> 設定 -> 通用 -> 裝置管理 -> 添加信任。為什麼要這樣？因為ios必須要證書，正在釋出的時候，就需要去apple申請證書，上線後，就不需要這樣操作了。
Vue.js 一套代碼，釋出到iOS、Android、H5、以及各種小程式
4、我們可以打開手機上面的APP了
Vue.js 一套代碼，釋出到iOS、Android、H5、以及各種小程式
這就是手機上面打開的樣子，是不是感覺非常nice了？
體驗原生功能
掃碼
通過上圖，我們看到左上角有一個掃描，但是模闆隻寫了事件，并沒有實作，是以我們添加功能進去。
pages/index/index.vue
//點選導航欄 buttons 時觸發onNavigationBarButtonTap(e) {const index = e.index;if (index === 0) {this.$api.msg('點選了掃描');} else if (index === 1) {// #ifdef APP-PLUSconst pages = getCurrentPages();const page = pages[pages.length - 1];const currentWebview = page.$getAppWebview();currentWebview.hideTitleNViewButtonRedDot({index});// #endifuni.navigateTo({url: '/pages/notice/notice'})}}
閱讀：uni-app官網api，裝置 - 掃碼 文檔。操作很簡單
uni.scanCode(OBJECT)// 調起用戶端掃碼界面，掃碼成功後傳回對應的結果。
OBJECT:
(1)、onlyFromCameraBoolean否是否隻能從相機掃碼，不允許從相冊選擇圖檔頭條小程式不支援
(2)、scanTypeArray否掃碼類型，參數類型是數組，二維碼是'qrCode'，一維碼是'barCode'，DataMatrix是‘datamatrix’，pdf417是‘pdf417’。頭條小程式不支援
(3)、successFunction否接口調用成功的回調，傳回内容詳見傳回參數說明。
(4)、failFunction否接口調用失敗的回調函數(識别失敗、使用者取消等情況下觸發)
(5)、completeFunction否接口調用結束的回調函數(調用成功、失敗都會執行)
onNavigationBarButtonTap(e) {const index = e.index;if (index === 0) {this.$api.msg('點選了掃描');uni.scanCode({success: (result) => {this.$api.msg('掃描成功' + result);},fail: (res) => {this.$api.msg('掃描成功' + res);}})} else if (index === 1) {...}}
這樣就能調起掃描功能了。
Vue.js 一套代碼，釋出到iOS、Android、H5、以及各種小程式
是不是很簡單了？想嘗試的小夥伴可以去試試。
總結
Dcloud公司下面的産品也是非常多，uni-app、wap2app(m站快速轉app)、 mui(前端UI架構)、5+Runtime(原生40萬API随意調用)等等，感覺還是很強大的。
現今，移動端混合開發架構也是非常多，Flutter、React Native、Weex、Wex5等等，如何從中選擇最優的架構？主要還是看看你的需求，已經他們的生态，還有周邊，如果遇到問題，網絡上或者官方能不能及時幫助你解決問題。
喜歡小編或者覺得小編文章對你有幫助的，可以點選一波關注哦！同時，要源碼的小夥伴可以點選下方“了解更多”。