背景

之前的工時系統是原生的小程序實現，由于產品邏輯需要優化，代碼混亂又僅限微信平臺使用，公司致力于想給工時系統重構后支持多平臺，并對外開放使用，使之成為一款真正的商業產品。經過前期調研后，uni-app對于多平臺的支持最好，且易于上手，于是采用該框架對工時系統進行改造。

?

uni-app介紹

uni，讀 you ni，是統一的意思。

很多人以為小程序是微信先推出的，其實，DCloud才是這個行業的開創者。

DCloud于2012年開始研發小程序技術，優化webview的功能和性能，并加入W3C和HTML5中國產業聯盟，推出了HBuilder開發工具，為后續產業化做準備。

2015年，DCloud正式商用了自己的小程序，產品名為“流應用”，它不是B/S模式的輕應用，而是能接近原生功能、性能的動態App，并且即點即用。為將該技術發揚光大，DCloud將技術標準捐獻給工信部旗下的HTML5中國產業聯盟，并推進各家流量巨頭接入該標準，開展小程序業務。

?

在2015年9月，DCloud推進微信團隊開展小程序業務，演示了流應用的秒開應用、掃碼獲取應用、分享鏈接獲取應用等眾多場景案例，以及分享了webview體驗優化的經驗。微信團隊經過分析，于2016年初決定上線小程序業務，但其沒有接入聯盟標準，而是訂制了自己的標準。

?

DCloud持續在業內普及小程序理念，推進各大流量巨頭，包括手機廠商，陸續上線類似小程序/快應用等業務。部分公司接入了聯盟標準，但更多公司因利益紛爭嚴重，標準難以統一。技術是純粹的，不應該因為商業利益而分裂。開發者面對如此多的私有標準不是一件正確的事情。

既然各巨頭無法在標準上達成一致，那么就通過這個框架為開發者抹平各平臺差異。

這，就是uni-app的由來。

• 因為多年積累，所以DCloud擁有300多萬開發者，并不意外

• 因為DCloud一直都有小程序的iOS、Android引擎，所以uni-app的App端和小程序端保持高度一致，并不意外

• 因為DCloud在引擎上的持續投入，所以uni-app的App端功能、性能比大多數小程序引擎都優秀，并不意外

• 因為DCloud對各家小程序太了解了，所以做好抹平各端差異的跨端框架，并不意外

現在，uni-app已經是業內最風靡的應用框架，支撐著6億手機用戶的龐大生態。

?

較其它跨平臺框架的優勢

• 跨端數量更多

• 平臺能力不受限

• 性能體驗更優秀

• 周邊生態豐富

• 學習成本低

• 開發成本低

幾大跨平臺開發框架性能和兼容性對比：微信原生版、wepy版、mpvue版、taro版、uni-app版、chalemeon版 https://github.com/dcloudio/test-framework

?

前置條件

基本上是Vue和微信小程序的結合，看了uni-app的介紹和背景，就知道為什么小程序的接口組件命名和uni-app幾乎一樣了

• 頁面組件我們要遵循Vue 單文件組件 (SFC) 規范

• 組件標簽靠近微信小程序規范

• 接口能力（JS API）靠近微信小程序規范

• 數據綁定及事件處理靠近?Vue.js?規范，同時補充了App及頁面的生命周期

• 為兼容多端運行，建議使用flex布局進行開發

?

開發工具

HBuilderX?（輕如編輯器，強如IDE），官方IDE下載地址

可視化的方式比較簡單，HBuilderX?內置相關環境，開箱即用，無需配置node?，內置瀏覽器及時預覽，更多功能可通過插件實現

如果你之前習慣了使用其它的如VS code、Sublime Text編輯器，在工具欄里可以選擇預設快捷鍵方案切換里選擇對應的工具類型，幾乎無成本就上手了

工具里內嵌了強大的代碼塊功能，通過預設的變量生成某一段代碼，還支持自定義，可以通過自定義代碼塊教程學習如何生成你自己的代碼塊，可以節省很多的時間

創建項目時可以選擇你的應用類型，生成默認模版

第一次運行時，在工具欄的運行-> 運行到小程序模擬器 -> 微信開發者工具，首次需要配置微信開發者工具的安裝路徑，然后點擊運行即可調起微信開發者工具（如果出現調不起來的情況，請到微信開發者工具設置菜單->安全設置里把服務端口開啟）；新建項目目錄不是選擇uni-app的項目根目錄，選擇的是根目錄下面的unpackage->dist->dev->mp-weixin，運行的是編譯后的代碼

建議平時開發選擇內嵌瀏覽器進行及時預覽，修改及生效，還可以通過掃描地址欄上方的二維碼在手機上預覽（必須連的是同一個局域網），調試和瀏覽器一樣打開審查元素

?

強大的開發者生態

uni-app擁有豐富的插件市場，這里都是開發者貢獻的插件，讓開發更高效，不必重復造輪子，當然你也可以為開源貢獻參與其中，詳情見插件開發指南，同時兼容 NPM 包管理系統 uni-app完整支持 NPM ，活躍的社區氛圍，有問題或者交流可以去社區發帖

如何實現優雅的跨端

不同平臺特有的API支持條件編譯，在 C 語言中，通過 #ifdef、#ifndef 的方式，為 windows、mac 等不同 os 編譯不同的代碼，uni-app 參考這個思路，為 uni-app 提供了條件編譯手段，在一個工程里優雅的完成了平臺個性化實現 。

條件編譯是利用注釋實現的，在不同語法里注釋寫法不一樣：

js使用?// 注釋

css 使用?/* 注釋 */

vue/nvue 模板里使用?<!-- 注釋 -->

?

uni-app也是支持釘釘小程序的，調試工具用的是支付寶開發者工具，在運行菜單里原本沒有釘釘這一項，需要增加拓展，方法參見https://ask.dcloud.net.cn/article/36353

?

uni-app開發較原生開發對比

優勢

目錄結構清晰，頁面文件由原來的wxml，wxss，json，js四個文件變成現在的一個vue文件

支持scss和less寫法，通過它的變量、繼承、嵌套、運算等特性和函數增加css開發效率，減少代碼量

在uni-app中可以通過vuex插件來全局管理數據

劣勢

編譯調試比較麻煩，編譯時間長，編譯一次本地緩存數據被清除，需要登陸和緩存的過程對于調試增加了時間成本

多平臺發布需要多寫一些條件編譯代碼，要了解各平臺的差異性

原生開發定義全局變量和方法可在app.js中直接定義，全局變量一般用globalData表示，uni-app中幾種常見的實現方式有：

公用模塊

定義一個公用的模塊，用來組織和管理這些全局的變量，在需要的頁面引入，一般放在根目錄下common目錄里，然后用的時候在頁面中引入該模塊，這種方式維護起來比較方便，但是用的時候每次都得引入

掛載到Vue.prototype

在main.js中掛載屬性/方法

import req from './api/index' import util from './utils/util' Vue.prototype.api = 'http://uniapp.dcloud.io' Vue.prototype.now = Date.now || function () {return new Date().getTime(); }; Vue.prototype.$api = req Vue.prototype.$util = util

引用的時候

<script> export default { data() { return {}; }, onLoad(){console.log('now:' + this.now());}, methods: {getProjectWorktime(userId, workDay) {this.$api.wktime.getWktimeStatus(userId,{workDay: workDay}).then(res => {console.log(res)})}} </script>

globalData定義全局變量

小程序中有個globalData概念，可以在 App 上聲明全局變量。Vue 之前是沒有這類概念的，但 uni-app 引入了globalData概念，并且在包括H5、App等平臺都實現了。在 App.vue 可以定義 globalData ，也可以使用 API 讀寫這個值。

<script> export default { globalData: { text: 'text' }} </script>

在其它頁面中取值的方式

getApp().globalData.text

uni-app的本地存儲

uni.storage的鍵值對存儲，這個是全端支持的。

uni-app的Storage在不同端的實現不同，uni.storage在app側，映射為plus.storage；h5側映射為localstorage；各個小程序平臺映射為其自帶的storage鍵值對存儲：

• H5端為localStorage，瀏覽器限制5M大小，是緩存概念，可能會被清理

• App端為原生的plus.storage，無大小限制，不是緩存，持久化

• 各個小程序端為其自帶的storage api，數據存儲生命周期跟小程序本身一致，即除用戶主動刪除或超過一定時間被自動清理，否則數據都一直可用。

• 微信小程序單個 key 允許存儲的最大數據長度為 1MB，所有數據存儲上限為 10MB。

• 支付寶小程序單條數據轉換成字符串后，字符串長度最大200*1024。同一個支付寶用戶，同一個小程序緩存總上限為10MB。

• 百度、頭條小程序文檔未說明大小限制

?

常見的平臺差異處理（目前僅對微信小程序和H5）

H5頁面底部菜單是包含在頁面高度內的，如果postion置為fixed的話，bottom: 0;?需要寫成bottom: var(--window-bottom);

登陸邏輯需要用在模版里插入條件編譯，邏輯里需要注入不同的登陸方法

<!-- #ifdef H5 --> H5登陸 <!-- #endif --> <!-- #ifndef H5 --> 其它平臺登陸 <!-- #endif -->

非H5端默認并未啟用 scoped，如需要隔離組件樣式可以在 style 標簽增加 scoped 屬性，H5端為了隔離頁面間的樣式默認啟用了 scoped

在所有的tabbar頁面跳轉都要用navigateto,來確保tabbar的list不發生任何改變，而小程序不受影響（出現的異常是在h5中tabbar頁面用redirect跳轉到非tabbar頁面，底部菜單仍存在）

?

發布注意事項

uni-app各端能運行的是編譯后的代碼，文件位于根目錄下unpackage->dist->build/dev，build目錄是發布的代碼，dev是本地預覽的代碼

H5端發布：

點擊發行->網站-H5手機版，需要配置網站域名，編譯到代碼中解決接口請求跨域的問題

根目錄下manifest.json文件關于h5配置，注意選擇路由模式，hash和history，運行的基礎路徑，就是域名解析對應的服務器上項目的目錄

?

思考及感想

之前聽過一個大佬的一句話：如果我只能給其他程序員一個建議，那就是編寫小的代碼塊，你要多寫小方法、小功能、小程序。寫完不斷思考如何精簡你的代碼，如何完善你的邏輯，只有基本功扎實了，你才能在大的系統和程序里游刃有余。

總結

以上是生活随笔為你收集整理的uni-app使用前的调研和开发心得的全部內容，希望文章能夠幫你解決所遇到的問題。

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