前言
今天來聊一下前端必備技能——小程序開發。
從最早發布的微信小程序，到后來的支付寶小程序、字節跳動小程序、百度小程序、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規范，同時補充了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 的更多信息可以參考官方文檔 uni-app - 多端開發框架 ，或者直接前往 GitHub 倉庫 uni-app 查看 uni-app 文檔及相關資料。歡迎前去 star 或是提 issue 哈。github地址：https://github.com/dcloudio/uni-app/
PS：我現在在寫一個 ui 庫，接下來我應該會寫一些如何從零實現一個 ui 庫方面的文章，歡迎有這方面經驗的小伙伴們相互交流一下。