uni-app使用前的调研和开发心得
背景
之前的工時系統是原生的小程序實現,由于產品邏輯需要優化,代碼混亂又僅限微信平臺使用,公司致力于想給工時系統重構后支持多平臺,并對外開放使用,使之成為一款真正的商業產品。經過前期調研后,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.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);
登陸邏輯需要用在模版里插入條件編譯,邏輯里需要注入不同的登陸方法
非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使用前的调研和开发心得的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: gRPC Web使用指南
- 下一篇: 技术人写作和写代码一样重要