背景

之前的工時(shí)系統(tǒng)是原生的小程序?qū)崿F(xiàn)，由于產(chǎn)品邏輯需要優(yōu)化，代碼混亂又僅限微信平臺(tái)使用，公司致力于想給工時(shí)系統(tǒng)重構(gòu)后支持多平臺(tái)，并對(duì)外開放使用，使之成為一款真正的商業(yè)產(chǎn)品。經(jīng)過前期調(diào)研后，uni-app對(duì)于多平臺(tái)的支持最好，且易于上手，于是采用該框架對(duì)工時(shí)系統(tǒng)進(jìn)行改造。

?

uni-app介紹

uni，讀 you ni，是統(tǒng)一的意思。

很多人以為小程序是微信先推出的，其實(shí)，DCloud才是這個(gè)行業(yè)的開創(chuàng)者。

DCloud于2012年開始研發(fā)小程序技術(shù)，優(yōu)化webview的功能和性能，并加入W3C和HTML5中國(guó)產(chǎn)業(yè)聯(lián)盟，推出了HBuilder開發(fā)工具，為后續(xù)產(chǎn)業(yè)化做準(zhǔn)備。

2015年，DCloud正式商用了自己的小程序，產(chǎn)品名為“流應(yīng)用”，它不是B/S模式的輕應(yīng)用，而是能接近原生功能、性能的動(dòng)態(tài)App，并且即點(diǎn)即用。為將該技術(shù)發(fā)揚(yáng)光大，DCloud將技術(shù)標(biāo)準(zhǔn)捐獻(xiàn)給工信部旗下的HTML5中國(guó)產(chǎn)業(yè)聯(lián)盟，并推進(jìn)各家流量巨頭接入該標(biāo)準(zhǔn)，開展小程序業(yè)務(wù)。

?

在2015年9月，DCloud推進(jìn)微信團(tuán)隊(duì)開展小程序業(yè)務(wù)，演示了流應(yīng)用的秒開應(yīng)用、掃碼獲取應(yīng)用、分享鏈接獲取應(yīng)用等眾多場(chǎng)景案例，以及分享了webview體驗(yàn)優(yōu)化的經(jīng)驗(yàn)。微信團(tuán)隊(duì)經(jīng)過分析，于2016年初決定上線小程序業(yè)務(wù)，但其沒有接入聯(lián)盟標(biāo)準(zhǔn)，而是訂制了自己的標(biāo)準(zhǔn)。

?

DCloud持續(xù)在業(yè)內(nèi)普及小程序理念，推進(jìn)各大流量巨頭，包括手機(jī)廠商，陸續(xù)上線類似小程序/快應(yīng)用等業(yè)務(wù)。部分公司接入了聯(lián)盟標(biāo)準(zhǔn)，但更多公司因利益紛爭(zhēng)嚴(yán)重，標(biāo)準(zhǔn)難以統(tǒng)一。技術(shù)是純粹的，不應(yīng)該因?yàn)樯虡I(yè)利益而分裂。開發(fā)者面對(duì)如此多的私有標(biāo)準(zhǔn)不是一件正確的事情。

既然各巨頭無法在標(biāo)準(zhǔn)上達(dá)成一致，那么就通過這個(gè)框架為開發(fā)者抹平各平臺(tái)差異。

這，就是uni-app的由來。

• 因?yàn)槎嗄攴e累，所以DCloud擁有300多萬開發(fā)者，并不意外

• 因?yàn)镈Cloud一直都有小程序的iOS、Android引擎，所以u(píng)ni-app的App端和小程序端保持高度一致，并不意外

• 因?yàn)镈Cloud在引擎上的持續(xù)投入，所以u(píng)ni-app的App端功能、性能比大多數(shù)小程序引擎都優(yōu)秀，并不意外

• 因?yàn)镈Cloud對(duì)各家小程序太了解了，所以做好抹平各端差異的跨端框架，并不意外

現(xiàn)在，uni-app已經(jīng)是業(yè)內(nèi)最風(fēng)靡的應(yīng)用框架，支撐著6億手機(jī)用戶的龐大生態(tài)。

?

較其它跨平臺(tái)框架的優(yōu)勢(shì)

• 跨端數(shù)量更多

• 平臺(tái)能力不受限

• 性能體驗(yàn)更優(yōu)秀

• 周邊生態(tài)豐富

• 學(xué)習(xí)成本低

• 開發(fā)成本低

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

?

前置條件

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

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

• 組件標(biāo)簽靠近微信小程序規(guī)范

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

• 數(shù)據(jù)綁定及事件處理靠近?Vue.js?規(guī)范，同時(shí)補(bǔ)充了App及頁面的生命周期

• 為兼容多端運(yùn)行，建議使用flex布局進(jìn)行開發(fā)

?

開發(fā)工具

HBuilderX?（輕如編輯器，強(qiáng)如IDE），官方IDE下載地址

可視化的方式比較簡(jiǎn)單，HBuilderX?內(nèi)置相關(guān)環(huán)境，開箱即用，無需配置node?，內(nèi)置瀏覽器及時(shí)預(yù)覽，更多功能可通過插件實(shí)現(xiàn)

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

工具里內(nèi)嵌了強(qiáng)大的代碼塊功能，通過預(yù)設(shè)的變量生成某一段代碼，還支持自定義，可以通過自定義代碼塊教程學(xué)習(xí)如何生成你自己的代碼塊，可以節(jié)省很多的時(shí)間

創(chuàng)建項(xiàng)目時(shí)可以選擇你的應(yīng)用類型，生成默認(rèn)模版

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

建議平時(shí)開發(fā)選擇內(nèi)嵌瀏覽器進(jìn)行及時(shí)預(yù)覽，修改及生效，還可以通過掃描地址欄上方的二維碼在手機(jī)上預(yù)覽（必須連的是同一個(gè)局域網(wǎng)），調(diào)試和瀏覽器一樣打開審查元素

?

強(qiáng)大的開發(fā)者生態(tài)

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

如何實(shí)現(xiàn)優(yōu)雅的跨端

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

條件編譯是利用注釋實(shí)現(xiàn)的，在不同語法里注釋寫法不一樣：

js使用?// 注釋

css 使用?/* 注釋 */

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

?

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

?

uni-app開發(fā)較原生開發(fā)對(duì)比

優(yōu)勢(shì)

目錄結(jié)構(gòu)清晰，頁面文件由原來的wxml，wxss，json，js四個(gè)文件變成現(xiàn)在的一個(gè)vue文件

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

在uni-app中可以通過vuex插件來全局管理數(shù)據(jù)

劣勢(shì)

編譯調(diào)試比較麻煩，編譯時(shí)間長(zhǎng)，編譯一次本地緩存數(shù)據(jù)被清除，需要登陸和緩存的過程對(duì)于調(diào)試增加了時(shí)間成本

多平臺(tái)發(fā)布需要多寫一些條件編譯代碼，要了解各平臺(tái)的差異性

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

公用模塊

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

掛載到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

引用的時(shí)候

<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定義全局變量

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

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

在其它頁面中取值的方式

getApp().globalData.text

uni-app的本地存儲(chǔ)

uni.storage的鍵值對(duì)存儲(chǔ)，這個(gè)是全端支持的。

uni-app的Storage在不同端的實(shí)現(xiàn)不同，uni.storage在app側(cè)，映射為plus.storage；h5側(cè)映射為localstorage；各個(gè)小程序平臺(tái)映射為其自帶的storage鍵值對(duì)存儲(chǔ)：

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

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

• 各個(gè)小程序端為其自帶的storage api，數(shù)據(jù)存儲(chǔ)生命周期跟小程序本身一致，即除用戶主動(dòng)刪除或超過一定時(shí)間被自動(dòng)清理，否則數(shù)據(jù)都一直可用。

• 微信小程序單個(gè) key 允許存儲(chǔ)的最大數(shù)據(jù)長(zhǎng)度為 1MB，所有數(shù)據(jù)存儲(chǔ)上限為 10MB。

• 支付寶小程序單條數(shù)據(jù)轉(zhuǎn)換成字符串后，字符串長(zhǎng)度最大200*1024。同一個(gè)支付寶用戶，同一個(gè)小程序緩存總上限為10MB。

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

?

常見的平臺(tái)差異處理（目前僅對(duì)微信小程序和H5）

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

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

<!-- #ifdef H5 --> H5登陸 <!-- #endif --> <!-- #ifndef H5 --> 其它平臺(tái)登陸 <!-- #endif -->

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

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

?

發(fā)布注意事項(xiàng)

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

H5端發(fā)布：

點(diǎn)擊發(fā)行->網(wǎng)站-H5手機(jī)版，需要配置網(wǎng)站域名，編譯到代碼中解決接口請(qǐng)求跨域的問題

根目錄下manifest.json文件關(guān)于h5配置，注意選擇路由模式，hash和history，運(yùn)行的基礎(chǔ)路徑，就是域名解析對(duì)應(yīng)的服務(wù)器上項(xiàng)目的目錄

?

思考及感想

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。