[實(shí)踐] uni-app 的使用總結(jié)

最近使用 uni-app 的感受。

使用體驗(yàn)

沒(méi)用之前以為真和 Vue 一樣，用了之后才知道。有點(diǎn)類(lèi)似 Vue 和 小程序結(jié)合的感覺(jué)。寫(xiě)類(lèi)似小程序的標(biāo)簽，有著小程序和 Vue 的生命周期鉤子。對(duì)比 uni-app 文檔和微信小程序的文檔，不差多少，只是將 wx => uni，熟悉 Vue 和 小程序可以直接上手。

如果看過(guò)其他小程序的文檔，可以發(fā)現(xiàn)，文檔主要的三大章節(jié)就體現(xiàn)在框架、組件、API 。

uni-app 需要注意看注意事項(xiàng)，文檔給出了和 Vue 使用的區(qū)別。例如動(dòng)態(tài)的 Class 與 Style 綁定，在 H5 能用，APP 和小程序的體現(xiàn)就不一樣。

配置項(xiàng)跟著文檔來(lái)，開(kāi)發(fā)環(huán)境也是現(xiàn)成的，下載 HBuilderX 導(dǎo)入項(xiàng)目就能運(yùn)行，日常開(kāi)發(fā)習(xí)慣了 VSCode，所以 HBuilderX 的主要作用就是用來(lái)打包 APK 和起各個(gè)端的服務(wù)，coding 的話當(dāng)然還是用 VSCode。

路由

uni-app 的路由全部配置在 pages.json 文件里，就會(huì)導(dǎo)致多人開(kāi)發(fā)的時(shí)候，路由無(wú)法拆分，如果處理的不好，就會(huì)發(fā)生沖突。

導(dǎo)航

導(dǎo)航欄需要注意的一個(gè)問(wèn)題就是不同端的展示形式會(huì)不同，所以要處理兼容問(wèn)題，導(dǎo)航欄可以自定義，用原生，框架，插件但是兼容性都不同，多端需求一定要在不同設(shè)備跑一下看效果。

例如在小程序和 APP 中，原生導(dǎo)航欄取消不了，就不能用自定義的導(dǎo)航欄，要在 pages.json 中配置原生導(dǎo)航欄。

兼容方法就是用 uni-app 提供的條件編譯，處理各端不同的差異，我們支付的業(yè)務(wù)邏輯也是通過(guò)條件編譯，區(qū)分不同端調(diào)用不同的支付方式。

生命周期

分為 應(yīng)用的生命周期、頁(yè)面的生命周期、組件的生命周期。寫(xiě)過(guò)小程序和 Vue 的很好理解，大致上和 Vue 的還是差不多的，頁(yè)面生命周期針對(duì)當(dāng)前的頁(yè)面，應(yīng)用生命周期針對(duì)小程序、APP。這些過(guò)程可能都要踩一下！

網(wǎng)絡(luò)請(qǐng)求和環(huán)境配置

官方的 uni.request 雖然封裝好了基本的請(qǐng)求，但是沒(méi)有攔截，我們開(kāi)始也是自己在這基礎(chǔ)上加了層殼，簡(jiǎn)單的封裝發(fā)送請(qǐng)求。當(dāng)然也可以選擇第三方庫(kù)的使用，如 flyio、axios。

我們是前端自己封裝了 HTTP 請(qǐng)求，并且統(tǒng)一接口的請(qǐng)求方式，所有的接口放到 api.js 文件中進(jìn)行統(tǒng)一管理。這樣大家在頁(yè)面請(qǐng)求接口的時(shí)候風(fēng)格才統(tǒng)一，包括約定好請(qǐng)求攔截和響應(yīng)攔截，具體攔截的參數(shù)和后臺(tái)約定好。

資源優(yōu)化

• 暫時(shí)接觸不到 Webpack 之類(lèi)的資源打包優(yōu)化，但是文檔中有提到資源預(yù)取、預(yù)加載、treeShaking 只需要在配置文件中設(shè)置即可，或者在開(kāi)發(fā)工具勾上。小程序也是勾選自動(dòng)壓縮混淆。
• 刪除沒(méi)用到文件和圖片資源，因?yàn)榇虬臅r(shí)候是會(huì)算進(jìn)去的，比如 static 目錄下的資源文件都會(huì)被打包，而且圖片資源太大也不好。
• uni-app 運(yùn)行時(shí)的框架主庫(kù) chunk-vendors.js 文件是經(jīng)過(guò)處理的，部署做 gzip。

Web-View 組件

在 uni-app 中使用 Web-View，可以使用本地的資源和網(wǎng)絡(luò)的資源，不同平臺(tái)也是有差異的，小程序不支持本地 HTML，且小程序端 Web-View 組件一定有原生導(dǎo)航欄。

需要注意的是網(wǎng)頁(yè)向應(yīng)用 postMessage 的時(shí)候需要引入 uni.web-view.js，不然是沒(méi)辦法通信拿不到數(shù)據(jù)。

TODO: 這個(gè)坑后面再詳細(xì)總結(jié)下！

全局狀態(tài)

最開(kāi)始是直接使用類(lèi)似小程序的 globalData 來(lái)管理我們的全局狀態(tài)，但是后面發(fā)現(xiàn)需求一多，加了各種東西之后，需要取這個(gè)狀態(tài)的時(shí)候就很痛苦，做為程序猿嘛，都想偷懶吖，每次都得引入一下 getApp().globalData.data 這樣很繁瑣可不行，就替換成了 Vuex，需要取這個(gè)變量的時(shí)候，直接 this.vuex_xxxx 就能拿到這個(gè)值。

有段時(shí)間重寫(xiě)了 HTTP 請(qǐng)求部分和全局狀態(tài)管理部分。

小程序中要在每一個(gè)頁(yè)面中添加使用共有的數(shù)據(jù)，可以有三種方式解決。

Vue.prototype

它的作用是可以掛載到 Vue 的所有實(shí)例上，供所有的頁(yè)面使用。

// main.js Vue.prototype.$globalVar = "Hello";

然后在 pages/index/index 中使用：

<template><view>{{ useGlobalVar }}</view> </tempalte> <script> export default {data (){return {useGlobalVar: $globalVar}} } </script>

globalData

<!-- App.vue --> <script>export default {globalData:{data:1}onShow() {getApp().globalData.data; // 使用getApp().globalData.data = 1; // 更新}; </script>

Vuex

Vuex 是 Vue 專用的狀態(tài)管理模式。能夠集中管理其數(shù)據(jù)，并且可觀測(cè)其數(shù)據(jù)變化，以及流動(dòng)。

之前看到一個(gè)通俗化比喻：用交通工具來(lái)比喻項(xiàng)目中這幾種描述全局變量的方式。

下面列舉這些方式通俗的理解狀態(tài)：

Vue 插件 vue-bus 可以來(lái)管理一部分全局變量（叫應(yīng)用狀態(tài)吧），學(xué)習(xí)后發(fā)現(xiàn)，bus（中文意思：公交車(chē)）這名字取得挺形象的。

先羅列一下這些方式，不過(guò)這種分類(lèi)并不嚴(yán)謹(jǐn)。

1、VueBus：公交車(chē) 2、Vuex：飛機(jī) 3、全局 import

• a.new Vue()：專車(chē)；
• b.Vue.use：快車(chē)；
• c.Vue.prototype：順風(fēng)車(chē)。

4、globalData：地鐵

首先 VueBus，像公交車(chē)一樣靈活便捷，隨時(shí)都可以乘坐；表現(xiàn)在代碼里，很輕便，召之即來(lái)，缺點(diǎn)就是不好維護(hù)，沒(méi)有一個(gè)專門(mén)的文件去管理這些變量。想象平時(shí)等公交車(chē)的心情，知道它回來(lái)，但不知道它什么時(shí)候來(lái)，給人一種很不安的感覺(jué)。

而 Vuex，它像飛機(jī)，很莊重，塔臺(tái)要協(xié)調(diào)飛機(jī)運(yùn)作暢順，飛機(jī)隨時(shí)向地面報(bào)告自己的位置，適合用在大型項(xiàng)目。表現(xiàn)代碼中，就是集中式管理所有狀態(tài)，并且以可預(yù)測(cè)的方式發(fā)生變化。也對(duì)應(yīng)著飛機(jī)絕對(duì)不能失聯(lián)的特點(diǎn)。

第三種方式是全局 import，分三種類(lèi)型，分別是：new Vue()、Vue.use()、Vue.prototype。可以用網(wǎng)約車(chē)來(lái)比喻，三種類(lèi)型分別對(duì)應(yīng)：專車(chē)、快車(chē)、順風(fēng)車(chē)。都足夠靈活，表現(xiàn)在代碼里：一處導(dǎo)入，處處可用。

再分別說(shuō)明：

new Vue() 就像滴滴的禮橙專車(chē)，官方運(yùn)營(yíng)，安全可靠。表現(xiàn)在代碼里，就是只有 Vue 官方維護(hù)的庫(kù)才能使用這種方式。

Vue.use() 就像快車(chē)，必須符合滴滴的規(guī)范，才能成為專職司機(jī)。表現(xiàn)在代碼中，就是導(dǎo)入的插件（或者庫(kù)）必須符合 Vue 的寫(xiě)法（即封裝了 Vue 插件寫(xiě)法）。

Vue.prototype 像順風(fēng)車(chē)，要求沒(méi)上面兩個(gè)那么嚴(yán)，符合一般 js 寫(xiě)法就行，就像順風(fēng)車(chē)的準(zhǔn)入門(mén)檻稍稍低一點(diǎn)。

當(dāng)然，uni-app 的項(xiàng)目里還有可以用 globalData 定義全局變量，非要比喻，可以用地鐵，首先比 vue-bus 更好管理維護(hù)，想象地鐵是不是比公交更可靠；其次比 Vuex 更簡(jiǎn)單，因?yàn)?globalData 真的就是簡(jiǎn)單的定義一些變量。

globalData 是微信小程序發(fā)明的，Vue 項(xiàng)目好像沒(méi)有對(duì)應(yīng)的概念，但是在 uni-app 中一樣可用。

上面說(shuō)到，這種分類(lèi)方式不嚴(yán)謹(jǐn)，主要體現(xiàn)在原理上，并不是簡(jiǎn)單的并列關(guān)系或包含關(guān)系。

插件市場(chǎng)

uni-app 的主要特色也源自于它的插件市場(chǎng)十分豐富。

用得比較好的組件：

uView：我們用了這個(gè)庫(kù)的骨架屏。這個(gè)庫(kù)還是有很多技巧可以學(xué)到的。

https://www.uviewui.com/js/intro.html

ColorUI-UniApp：是個(gè)樣式庫(kù)，不是組件庫(kù)。

https://ext.dcloud.net.cn/plugin?id=239

答題模版：左右滑答題模版，單選題、多選項(xiàng)，判斷題，填空題，問(wèn)答題。基于 ColorUI 做的。

https://ext.dcloud.net.cn/plugin?id=451

uCharts 高性能跨全端圖表：

https://ext.dcloud.net.cn/plugin?id=271

最后：各端的差異性，很多東西，H5 挺好的，上真機(jī)就掛了，真機(jī)好著的，換小程序就飄了，不同小程序之間也有差異，重點(diǎn)是仔細(xì)閱讀文檔。

云打包限制，云打包(打 APK) 的每天做了限制，超出次數(shù)需要購(gòu)買(mǎi)。

雖然可能一些原生可以實(shí)現(xiàn)的功能 uni-app 實(shí)現(xiàn)不了，不過(guò)整體開(kāi)發(fā)下來(lái)還行，很多的坑還是因?yàn)槎喽瞬患嫒?#xff0c;除了寫(xiě)起來(lái)麻煩一點(diǎn)，基本上都還是有可以解決的策略。比之前用 Weex 寫(xiě) APP 開(kāi)發(fā)體驗(yàn)好一點(diǎn)，比 React Native 的編譯雞肋一點(diǎn)（這點(diǎn)體驗(yàn)不是很好），至于 Flutter 還沒(méi)有試過(guò)，有機(jī)會(huì)的話會(huì)試一下。

總結(jié)

以上是生活随笔為你收集整理的uni app 调用网络打印机_uni-app 的使用体验总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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