背景
之前的工時系統是原生的小程序實現，由於產品邏輯需要優化，代碼混亂又僅限微信平臺使用，公司致力於想給工時系統重構後支持多平臺，並對外開放使用，使之成爲一款真正的商業產品。經過前期調研後，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版
前置條件
基本上是 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也是支持釘釘小程序的，調試工具用的是支付寶開發者工具，在運行菜單裏原本沒有釘釘這一項，需要增加拓展
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 = reqVue.prototype.$util = uti
引用的時候
<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.textuni-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，運行的基礎路徑，就是域名解析對應的服務器上項目的目錄
思考及感想
之前聽過一個大佬的一句話：如果我只能給其他程序員一個建議，那就是編寫小的代碼塊，你要多寫小方法、小功能、小程序。寫完不斷思考如何精簡你的代碼，如何完善你的邏輯，只有基本功紮實了，你才能在大的系統和程序裏遊刃有餘。