前言

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

從最早發布的微信小程序，到后來的支付寶小程序、字節跳動小程序、百度小程序、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地址：https://github.com/dcloudio/uni-app/

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

總結

以上是生活随笔為你收集整理的uniapp开发实例github_跨端开发痛点？送你一款Vue最流行的跨端框架——uni-app的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。