從最早發(fā)布的微信小程序，到后來的支付寶小程序、字節(jié)跳動(dòng)小程序、百度小程序、QQ小程序，還有最近發(fā)布的360小程序，面對(duì)這么多套的代碼，開發(fā)者該如何開發(fā)呢？

當(dāng)業(yè)務(wù)要求同時(shí)在不同的端都要展現(xiàn)時(shí)候，針對(duì)不同的端去編寫多套代碼的成本顯然非常高。這時(shí)候只需編寫一套代碼，就能夠適配多端的能力就顯得尤為需要。

今天就來給大家介紹一款，使用Vue的跨端框架——uni-app

uni-app 框架簡(jiǎn)介

uni-app 是一個(gè)使用 Vue.js 開發(fā)跨平臺(tái)應(yīng)用的前端框架，可編譯到 iOS、Android、H5、以及各種小程序（微信/支付寶/百度/頭條/QQ/釘釘）等平臺(tái)。

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

• 開發(fā)者/案例數(shù)量更多
• 跨端抹平度/擴(kuò)展靈活性(通過條件編譯，調(diào)用專有能力而不影響其他平臺(tái))
• 性能體驗(yàn)更優(yōu)秀(App 端支持 weex 渲染，帶來更流暢的用戶體驗(yàn)。)
• 周邊生態(tài)豐富(推出插件市場(chǎng)，能夠提供較多的組件和模板，真正做到開箱即用)
• 學(xué)習(xí)成本低(采用Vue.js 語(yǔ)法 + 小程序 API)
• 開發(fā)成本低(不止開發(fā)成本，招聘、管理、測(cè)試各方面成本都大幅下降。)

雖然不同端框架環(huán)境千變?nèi)f化，無論各類小程序、Weex、React-Native、Flutter、快應(yīng)用，它們?nèi)f變不離其宗的是MVVM架構(gòu)設(shè)計(jì)思想。uni-app希望既能用一套代碼完成所有端需求，將相同的業(yè)務(wù)邏輯完成收斂到同一層系統(tǒng)里面，又不會(huì)因?yàn)轫?xiàng)目的抽象一致導(dǎo)致可維護(hù)性變差。

開發(fā)工具

通過 HBuilderX 可視化界面， HBuilderX 內(nèi)置相關(guān)環(huán)境，開箱即用，無需配置 nodejs。

開發(fā)語(yǔ)言

使用Vue.js + 小程序 API，進(jìn)行開發(fā)。

• 數(shù)據(jù)綁定及事件處理同 Vue.js 規(guī)范，同時(shí)補(bǔ)充了 App 及頁(yè)面的生命周期。

• uni-app 幫我們把不同平臺(tái)的小程序API 幾乎都封裝了 ，只需要將前綴替換為 uni 即可 舉例說明：

在微信中發(fā)送 request 請(qǐng)求：

wx.request({
  url: "https://www.example.com/request", //僅為示例，并非真實(shí)接口地址
  success: res => {
    console.log(res.data);
  }
});
復(fù)制代碼

在 uni-app中發(fā)送 request 請(qǐng)求：

uni.request({
  url: "https://www.example.com/request", //僅為示例，并非真實(shí)接口地址
  success: res => {
    console.log(res.data);
  }
});
復(fù)制代碼

了解微信小程序的你，是不是感覺很簡(jiǎn)單呢？無非就是把 wx 前綴 換成了 uni 而已，而且uni.request是全端通用的 ajax 請(qǐng)求 API 哦，最大程度的降低開發(fā)者的學(xué)習(xí)成本。

如何解決跨端兼容問題

每個(gè)平臺(tái)有自己的一些特性，因此會(huì)存在一些無法跨平臺(tái)的情況。

uni-app 提供了條件編譯手段，在一個(gè)工程里優(yōu)雅的完成了平臺(tái)個(gè)性化實(shí)現(xiàn)。

<view class="content">
  <! -- #ifdef MP-WEIXIN -->
  <view>只會(huì)編譯到微信小程序</view>
  <! -- #endif -->
  <! -- #ifdef APP-PLUS -->
  <view>只會(huì)編譯到app</view>
  <! -- #endif -->
</view>
復(fù)制代碼

nvue 模式

uni-app 里根據(jù)編譯配置不同，可以使用 weex 的組件，也可以使用小程序組件(即uni-app組件)。編寫頁(yè)面時(shí)頁(yè)面后綴名為 .nvue (native vue 的縮寫)

uni-app App 端內(nèi)置 weex 渲染引擎，提供了原生渲染能力，讓uni-app在App端有更好的表現(xiàn)。

nvue 相當(dāng)于給 weex 補(bǔ)充了大量 uni-app 的組件和 api，以及豐富的 Plus API、Native.js、原生插件。

官方 ui 庫(kù)，uni-ui

uni-ui是DCloud提供的一個(gè)跨端ui庫(kù)，它是基于vue組件的、flex 布局的、無 dom 的跨全端 ui 庫(kù)。

web 開發(fā)中有的開發(fā)者習(xí)慣用一個(gè)ui庫(kù)完成所有開發(fā)，但在uni-app體系中，推薦開發(fā)者首先使用性能更高的基礎(chǔ)組件，然后按需引入必要的擴(kuò)展組件。

看到這里你是不是覺得特別心動(dòng)了呢？別著急，讓我們看一下uni-app的開發(fā)規(guī)范。

uni-app 開發(fā)規(guī)范

為了實(shí)現(xiàn)多端兼容，綜合考慮編譯速度、運(yùn)行性能等因素，uni-app 約定了如下開發(fā)規(guī)范：

• 頁(yè)面文件遵循 Vue 單文件組件 (SFC) 規(guī)范
• 組件標(biāo)簽靠近小程序規(guī)范，詳見uni-app 組件規(guī)范
• 接口能力（JS API）靠近微信小程序規(guī)范，但需將前綴 wx 替換為 uni，詳見uni-app接口規(guī)范
• 數(shù)據(jù)綁定及事件處理同 Vue.js 規(guī)范，同時(shí)補(bǔ)充了 App 及頁(yè)面的生命周期
• 為兼容多端運(yùn)行，建議使用 flex 布局進(jìn)行開發(fā)

關(guān)于各端的管理規(guī)則需要耐心學(xué)習(xí)

uni-app 并不難學(xué)，但我們注意到很多新人在適應(yīng)各個(gè)平臺(tái)的規(guī)則限制時(shí)很焦躁。

uni-app 跨了很多端，雖然代碼層面可以開發(fā)一次，生成多端。但注意每個(gè)端，有每個(gè)端的管理規(guī)則，這與開發(fā)無關(guān)，但每個(gè)開發(fā)者仍然要耐心掌握這些規(guī)則限制。

• 比如 H5 端的瀏覽器有跨域限制；
• 比如微信小程序會(huì)強(qiáng)制要求 https 鏈接，并且所有要聯(lián)網(wǎng)的服務(wù)器域名都要配到微信的白名單中；
• 比如 App 端，iOS 對(duì)隱私控制和虛擬支付控制非常嚴(yán)格；
• 比如 App 端，Android、國(guó)產(chǎn) rom 各種兼容性差異，尤其是因?yàn)楣雀璺?wù)被墻，導(dǎo)致的 push、定位等開發(fā)混亂的坑；
• 如果你的 App 要使用三方 sdk，比如定位、地圖、支付、推送...還要遵循他們的規(guī)則和限制；

總結(jié)

uni-ui 對(duì)比其他框架主要有兩個(gè)優(yōu)勢(shì)

• 如何在有限前端團(tuán)隊(duì)人數(shù)下搞定更多平臺(tái)，是需要首要考慮的原因，跨端方面uni-app更成熟。
• 團(tuán)隊(duì)里熟悉vue技術(shù)棧的同學(xué)多一點(diǎn)，則使用uni-app內(nèi)部培訓(xùn)時(shí)間短、風(fēng)險(xiǎn)低。

開發(fā)需要注意的點(diǎn)

• 注意各端的差異性，很多東西，h5 是對(duì)的，上真機(jī)就錯(cuò)了，真機(jī)好著的，換小程序就錯(cuò)了，不同小程序之間還有差異，總之就是考慮好不同的情況，重點(diǎn)是仔細(xì)閱讀文檔。

• 由于 uni-app 框架集成了5+API，一些需要原生功能 uniapp 也可以通過5+API去進(jìn)行實(shí)現(xiàn)。

• 很多的坑還是因?yàn)槎喽瞬患嫒?，除了寫起來麻煩一點(diǎn)，基本上都還是有可以解決的策略。