點(diǎn)擊右上方紅色按鈕關(guān)注“web秀”，讓你真正秀起來

了解 Uni-App

uni-app 是一個使用 Vue.js 開發(fā)所有前端應(yīng)用的框架，開發(fā)者編寫一套代碼，可發(fā)布到iOS、Android、H5、以及各種小程序（微信/支付寶/百度/頭條/QQ/釘釘）等多個平臺。

即使不跨端，uni-app同時也是更好的小程序開發(fā)框架。

uni-app 是由 DCloud 公司打造的，DCloud公司擁有340萬開發(fā)者用戶，旗下uni-app有5萬 案例、600 插件、50 微信/qq群、更高的百度指數(shù)，可以放心選擇。

Vue.js 一套代碼，發(fā)布到iOS、Android、H5、以及各種小程序

為什么要用 Uni-App

uni-app在開發(fā)者數(shù)量、案例、跨端抹平度、擴(kuò)展靈活性、性能體驗(yàn)、周邊生態(tài)、學(xué)習(xí)成本、開發(fā)成本等8大關(guān)鍵指標(biāo)上擁有更強(qiáng)的優(yōu)勢。

1、開發(fā)者/案例數(shù)量更多： 5萬 案例、600 插件、50 微信/qq群、更高的百度指數(shù)，跨端完善度更高，真正落地的提高生產(chǎn)力

2、平臺能力不受限： 在跨端的同時，通過條件編譯 平臺特有API調(diào)用，可以優(yōu)雅的為某平臺寫個性化代碼，調(diào)用專有能力而不影響其他平臺。支持原生代碼混寫和原生sdk集成。

3、性能體驗(yàn)優(yōu)秀：體驗(yàn)更好的Hybrid框架，加載新頁面速度更快。App端支持weex原生渲染，可支撐更流暢的用戶體驗(yàn)。小程序端的性能優(yōu)于市場其他框架。

4、周邊生態(tài)豐富：豐富的插件市場，各種模板拿來即用。支持NPM、支持小程序組件和SDK、兼容mpvue組件和項(xiàng)目、兼容weex組件。微信生態(tài)的各種sdk可直接用于跨平臺App。

5、學(xué)習(xí)成本低： 基于通用的前端技術(shù)棧，采用vue語法 微信小程序api，無額外學(xué)習(xí)成本。

Vue.js 一套代碼，發(fā)布到iOS、Android、H5、以及各種小程序

快速開始

一、HBuilderX 下載安裝

可視化的方式比較簡單，HBuilderX內(nèi)置相關(guān)環(huán)境，開箱即用，無需配置nodejs。

開始之前，開發(fā)者需先下載安裝如下工具：

HBuilderX：HBuilderX-高效極客技巧

HBuilderX是通用的前端開發(fā)工具，但為uni-app做了特別強(qiáng)化。

二、創(chuàng)建項(xiàng)目

在點(diǎn)擊工具欄里的文件 -> 新建 -> 項(xiàng)目：

Vue.js 一套代碼，發(fā)布到iOS、Android、H5、以及各種小程序

選擇uni-app，輸入工程名，并且你可以從模板里的 你喜歡的模板 即可體驗(yàn)官方示例。最后點(diǎn)擊創(chuàng)建，即可成功創(chuàng)建 uni-app 項(xiàng)目。

Vue.js 一套代碼，發(fā)布到iOS、Android、H5、以及各種小程序

官方模板地址：DCloud 插件市場

Vue.js 一套代碼，發(fā)布到iOS、Android、H5、以及各種小程序

我這里選擇“電商模板min-amll”創(chuàng)建項(xiàng)目

三、運(yùn)行uni-app項(xiàng)目

1、瀏覽器運(yùn)行：進(jìn)入項(xiàng)目，點(diǎn)擊工具欄的運(yùn)行 -> 運(yùn)行到瀏覽器 -> 選擇瀏覽器，即可在瀏覽器里面體驗(yàn)uni-app 的 H5 版。

Vue.js 一套代碼，發(fā)布到iOS、Android、H5、以及各種小程序

預(yù)覽圖：

Vue.js 一套代碼，發(fā)布到iOS、Android、H5、以及各種小程序

2、真機(jī)運(yùn)行：連接手機(jī)，開啟USB調(diào)試，進(jìn)入項(xiàng)目，點(diǎn)擊工具欄的運(yùn)行 -> 真機(jī)運(yùn)行 -> 選擇運(yùn)行的設(shè)備，即可在該設(shè)備里面體驗(yàn)uni-app。

（1）、android手機(jī)，USB連接后，打開開發(fā)者模式

（2）、ios 手機(jī)，電腦先下載 iTunes ，然后USB連接電腦，添加信任設(shè)備即可。

Vue.js 一套代碼，發(fā)布到iOS、Android、H5、以及各種小程序

這里我們以ios為例。

3、手機(jī)上面已經(jīng)安裝了一個名叫“HBuilder”的APP了，這時候點(diǎn)擊是打不開的，需要我們ios手機(jī) -> 設(shè)置 -> 通用 -> 設(shè)備管理 -> 添加信任。為什么要這樣？因?yàn)閕os必須要證書，正在發(fā)布的時候，就需要去apple申請證書，上線后，就不需要這樣操作了。

Vue.js 一套代碼，發(fā)布到iOS、Android、H5、以及各種小程序

4、我們可以打開手機(jī)上面的APP了

Vue.js 一套代碼，發(fā)布到iOS、Android、H5、以及各種小程序

這就是手機(jī)上面打開的樣子，是不是感覺非常nice了？

體驗(yàn)原生功能

掃碼

通過上圖，我們看到左上角有一個掃描，但是模板只寫了事件，并沒有實(shí)現(xiàn)，所以我們添加功能進(jìn)去。

pages/index/index.vue

//點(diǎn)擊導(dǎo)航欄 buttons 時觸發(fā)onNavigationBarButtonTap(e) { const index = e.index; if (index === 0) { this.$api.msg(‘點(diǎn)擊了掃描’); } else if (index === 1) { // #ifdef APP-PLUS const pages = getCurrentPages(); const page = pages[pages.length – 1]; const currentWebview = page.$getAppWebview(); currentWebview.hideTitleNViewButtonRedDot({ index }); // #endif uni.navigateTo({ url: ‘/pages/notice/notice’ }) }}

閱讀：uni-app官網(wǎng)api，設(shè)備 – 掃碼 文檔。操作很簡單

uni.scanCode(OBJECT)// 調(diào)起客戶端掃碼界面，掃碼成功后返回對應(yīng)的結(jié)果。

OBJECT:

(1)、onlyFromCamera Boolean 否 是否只能從相機(jī)掃碼，不允許從相冊選擇圖片 頭條小程序不支持

(2)、scanType Array 否 掃碼類型，參數(shù)類型是數(shù)組，二維碼是’qrCode’，一維碼是’barCode’，DataMatrix是‘datamatrix’，pdf417是‘pdf417’。 頭條小程序不支持

(3)、success Function 否 接口調(diào)用成功的回調(diào)，返回內(nèi)容詳見返回參數(shù)說明。

(4)、fail Function 否 接口調(diào)用失敗的回調(diào)函數(shù)（識別失敗、用戶取消等情況下觸發(fā)）

(5)、complete Function 否 接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）

onNavigationBarButtonTap(e) { const index = e.index; if (index === 0) { this.$api.msg(‘點(diǎn)擊了掃描’); uni.scanCode({ success: (result) => { this.$api.msg(‘掃描成功’ result); }, fail: (res) => { this.$api.msg(‘掃描成功’ res); } }) } else if (index === 1) { … }}

這樣就能調(diào)起掃描功能了。

Vue.js 一套代碼，發(fā)布到iOS、Android、H5、以及各種小程序

是不是很簡單了？想嘗試的小伙伴可以去試試。

總結(jié)

Dcloud公司下面的產(chǎn)品也是非常多，uni-app、wap2app(m站快速轉(zhuǎn)app)、 mui(前端UI框架)、5 Runtime(原生40萬API隨意調(diào)用)等等，感覺還是很強(qiáng)大的。

現(xiàn)今，移動端混合開發(fā)框架也是非常多，F(xiàn)lutter、React Native、Weex、Wex5等等，如何從中選擇最優(yōu)的框架？主要還是看看你的需求，已經(jīng)他們的生態(tài)，還有周邊，如果遇到問題，網(wǎng)絡(luò)上或者官方能不能及時幫助你解決問題。

喜歡小編或者覺得小編文章對你有幫助的，可以點(diǎn)擊一波關(guān)注哦！同時，要源碼的小伙伴可以點(diǎn)擊下方“了解更多”。