跨端開發痛點？送你一款Vue最流行的跨端框架——uni-app

前言

今天來聊一下前端必備技能——小程序開發。

從最先發布的微信小程序，到後來的支付寶小程序、字節跳動小程序、百度小程序、QQ小程序，還有最近發佈的360小程序，面對這麼多套的代碼，開發者該如何開發呢？

當業務要求同時在不一樣的端都要展示時候，針對不一樣的端去編寫多套代碼的成本顯然很是高。這時候只需編寫一套代碼，就可以適配多端的能力就顯得尤其須要。

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

uni-app 框架簡介

uni-app 是一個使用 Vue.js 開發跨平臺應用的前端框架，可編譯到 iOS、Android、H5、以及各類小程序（微信/支付寶/百度/頭條/QQ/釘釘）等平臺。

uni-app 在開發者數量、案例、跨端抹平度、擴展靈活性、性能體驗、周邊生態、學習成本、開發成本等 6 大關鍵指標上擁有極強的競爭優點：

• 開發者/案例數量更多
• 跨端抹平度/擴展靈活性(經過條件編譯，調用專有能力而不影響其餘平臺)
• 性能體驗更優秀(App 端支持 weex 渲染，帶來更流暢的用戶體驗。)
• 周邊生態豐富(推出插件市場，可以提供較多的組件和模板，真正作到開箱即用)
• 學習成本低(採用Vue.js 語法 + 小程序 API)
• 開發成本低(不止開發成本，招聘、管理、測試各方面成本都大幅降低。)

雖然不一樣端框架環境變幻無窮，不管各種小程序、Weex、React-Native、Flutter、快應用，它們萬變不離其宗的是MVVM架構設計思想。uni-app但願既能用一套代碼完成全部端需求，將相同的業務邏輯完成收斂到同一層系統裏面，又不會由於項目的抽象一致致使可維護性變差。

開發工具

經過 HBuilderX 可視化界面， HBuilderX 內置相關環境，開箱即用，無需配置 nodejs。

開發語言

使用Vue.js + 小程序 API，進行開發。

• 數據綁定及事件處理同 Vue.js 規範，同時補充了 App 及頁面的生命週期。

• uni-app 幫咱們把不一樣平臺的小程序API 幾乎都封裝了 ，只須要將前綴替換爲 uni 便可 舉例說明：

在微信中發送 request 請求：

wx.request({
  url: "https://www.example.com/request", //僅爲示例，並不是真實接口地址
  success: res => {
    console.log(res.data);
  }
});
複製代碼

在 uni-app中發送 request 請求：

uni.request({
  url: "https://www.example.com/request", //僅爲示例，並不是真實接口地址
  success: res => {
    console.log(res.data);
  }
});
複製代碼

瞭解微信小程序的你，是否是感受很簡單呢？無非就是把 wx 前綴 換成了 uni 而已，並且uni.request是全端通用的 ajax 請求 API 哦，最大程度的下降開發者的學習成本。

如何解決跨端兼容問題

每一個平臺有本身的一些特性，所以會存在一些沒法跨平臺的狀況。

uni-app 提供了條件編譯手段，在一個工程裏優雅的完成了平臺個性化實現。

<view class="content">
  <! -- #ifdef MP-WEIXIN -->
  <view>只會編譯到微信小程序</view>
  <! -- #endif -->
  <! -- #ifdef APP-PLUS -->
  <view>只會編譯到app</view>
  <! -- #endif -->
</view>
複製代碼

nvue 模式

uni-app 里根據編譯配置不一樣，可使用 weex 的組件，也可使用小程序組件(即uni-app組件)。編寫頁面時頁面後綴名爲 .nvue (native vue 的縮寫)

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

nvue 至關於給 weex 補充了大量 uni-app 的組件和 api，以及豐富的 Plus API、Native.js、原生插件。瞭解更多 nvue

官方 ui 庫，uni-ui

uni-ui是DCloud提供的一個跨端ui庫，它是基於vue組件的、flex 佈局的、無 dom 的跨全端 ui 庫。

web 開發中有的開發者習慣用一個ui庫完成全部開發，但在uni-app體系中，推薦開發者首先使用性能更高的基礎組件，而後按需引入必要的擴展組件。GitHub 地址：uni-ui

看到這裏你是否是以爲特別心動了呢？彆着急，讓咱們看一下uni-app的開發規範。

uni-app 開發規範

爲了實現多端兼容，綜合考慮編譯速度、運行性能等因素，uni-app 約定了以下開發規範：

• 頁面文件遵循 Vue 單文件組件 (SFC) 規範
• 組件標籤靠近小程序規範，詳見uni-app 組件規範
• 接口能力（JS API）靠近微信小程序規範，但需將前綴 wx 替換爲 uni，詳見uni-app接口規範
• 數據綁定及事件處理同 Vue.js 規範，同時補充了 App 及頁面的生命週期
• 爲兼容多端運行，建議使用 flex 佈局進行開發

關於各端的管理規則須要耐心學習

uni-app 並不難學，但咱們注意到不少新人在適應各個平臺的規則限制時很焦躁。

uni-app 跨了不少端，雖然代碼層面能夠開發一次，生成多端。但注意每一個端，有每一個端的管理規則，這與開發無關，但每一個開發者仍然要耐心掌握這些規則限制。

• 好比 H5 端的瀏覽器有跨域限制；
• 好比微信小程序會強制要求 https 連接，而且全部要聯網的服務器域名都要配到微信的白名單中；
• 好比 App 端，iOS 對隱私控制和虛擬支付控制很是嚴格；
• 好比 App 端，Android、國產 rom 各類兼容性差別，尤爲是由於谷歌服務被牆，致使的 push、定位等開發混亂的坑；
• 若是你的 App 要使用三方 sdk，好比定位、地圖、支付、推送...還要遵循他們的規則和限制；

總結

uni-ui 對比其餘框架主要有兩個優點

• 如何在有限前端團隊人數下搞定更多平臺，是須要首要考慮的緣由，跨端方面uni-app更成熟。
• 團隊裏熟悉vue技術棧的同窗多一點，則使用uni-app內部培訓時間短、風險低。

開發須要注意的點

• 注意各端的差別性，不少東西，h5 是對的，上真機就錯了，真機好着的，換小程序就錯了，不一樣小程序之間還有差別，總之就是考慮好不一樣的狀況，重點是仔細閱讀文檔。

• 因爲 uni-app 框架集成了5+API，一些須要原生功能 uniapp 也能夠經過5+API去進行實現。

• 不少的坑仍是由於多端不兼容，除了寫起來麻煩一點，基本上都仍是有能夠解決的策略。

關於 uni-app 的更多信息能夠參考官方文檔 uni-app - 多端開發框架 ，或者直接前往 GitHub 倉庫 uni-app 查看 uni-app 文檔及相關資料。歡迎前去 star 或是提 issue 哈。github地址：github.com/dcloudio/un…

PS：我如今在寫一個 ui 庫，接下來我應該會寫一些如何從零實現一個 ui 庫方面的文章，歡迎有這方面經驗的小夥伴們相互交流一下。