uni app 调用网络打印机_uni-app 的使用体验总结
[實踐] uni-app 的使用總結
最近使用 uni-app 的感受。
使用體驗
沒用之前以為真和 Vue 一樣，用了之后才知道。有點類似 Vue 和 小程序結合的感覺。寫類似小程序的標簽，有著小程序和 Vue 的生命周期鉤子。對比 uni-app 文檔和微信小程序的文檔，不差多少，只是將 wx => uni，熟悉 Vue 和 小程序可以直接上手。
如果看過其他小程序的文檔，可以發現，文檔主要的三大章節就體現在框架、組件、API 。
uni-app 需要注意看注意事項，文檔給出了和 Vue 使用的區別。例如動態的 Class 與 Style 綁定，在 H5 能用，APP 和小程序的體現就不一樣。
配置項跟著文檔來，開發環境也是現成的，下載 HBuilderX 導入項目就能運行，日常開發習慣了 VSCode，所以 HBuilderX 的主要作用就是用來打包 APK 和起各個端的服務，coding 的話當然還是用 VSCode。
路由
uni-app 的路由全部配置在 pages.json 文件里，就會導致多人開發的時候，路由無法拆分，如果處理的不好，就會發生沖突。
導航
導航欄需要注意的一個問題就是不同端的展示形式會不同，所以要處理兼容問題，導航欄可以自定義，用原生，框架，插件但是兼容性都不同，多端需求一定要在不同設備跑一下看效果。
例如在小程序和 APP 中，原生導航欄取消不了，就不能用自定義的導航欄，要在 pages.json 中配置原生導航欄。
兼容方法就是用 uni-app 提供的條件編譯，處理各端不同的差異，我們支付的業務邏輯也是通過條件編譯，區分不同端調用不同的支付方式。
生命周期
分為 應用的生命周期、頁面的生命周期、組件的生命周期。寫過小程序和 Vue 的很好理解，大致上和 Vue 的還是差不多的，頁面生命周期針對當前的頁面，應用生命周期針對小程序、APP。這些過程可能都要踩一下！
網絡請求和環境配置
官方的 uni.request 雖然封裝好了基本的請求，但是沒有攔截，我們開始也是自己在這基礎上加了層殼，簡單的封裝發送請求。當然也可以選擇第三方庫的使用，如 flyio、axios。
我們是前端自己封裝了 HTTP 請求，并且統一接口的請求方式，所有的接口放到 api.js 文件中進行統一管理。這樣大家在頁面請求接口的時候風格才統一，包括約定好請求攔截和響應攔截，具體攔截的參數和后臺約定好。
資源優化
- 暫時接觸不到 Webpack 之類的資源打包優化，但是文檔中有提到資源預取、預加載、treeShaking 只需要在配置文件中設置即可，或者在開發工具勾上。小程序也是勾選自動壓縮混淆。
- 刪除沒用到文件和圖片資源，因為打包的時候是會算進去的，比如 static 目錄下的資源文件都會被打包，而且圖片資源太大也不好。
- uni-app 運行時的框架主庫 chunk-vendors.js 文件是經過處理的，部署做 gzip。
Web-View 組件
在 uni-app 中使用 Web-View，可以使用本地的資源和網絡的資源，不同平臺也是有差異的，小程序不支持本地 HTML，且小程序端 Web-View 組件一定有原生導航欄。
需要注意的是網頁向應用 postMessage 的時候需要引入 uni.web-view.js，不然是沒辦法通信拿不到數據。
TODO: 這個坑后面再詳細總結下！全局狀態
最開始是直接使用類似小程序的 globalData 來管理我們的全局狀態，但是后面發現需求一多，加了各種東西之后，需要取這個狀態的時候就很痛苦，做為程序猿嘛，都想偷懶吖，每次都得引入一下 getApp().globalData.data 這樣很繁瑣可不行，就替換成了 Vuex，需要取這個變量的時候，直接 this.vuex_xxxx 就能拿到這個值。
有段時間重寫了 HTTP 請求部分和全局狀態管理部分。
小程序中要在每一個頁面中添加使用共有的數據，可以有三種方式解決。
Vue.prototype
它的作用是可以掛載到 Vue 的所有實例上，供所有的頁面使用。
// 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 專用的狀態管理模式。能夠集中管理其數據，并且可觀測其數據變化，以及流動。
之前看到一個通俗化比喻：用交通工具來比喻項目中這幾種描述全局變量的方式。
下面列舉這些方式通俗的理解狀態：
Vue 插件 vue-bus 可以來管理一部分全局變量（叫應用狀態吧），學習后發現，bus（中文意思：公交車）這名字取得挺形象的。
先羅列一下這些方式，不過這種分類并不嚴謹。
1、VueBus：公交車 2、Vuex：飛機 3、全局 import
- a.new Vue()：專車；
- b.Vue.use：快車；
- c.Vue.prototype：順風車。
4、globalData：地鐵
首先 VueBus，像公交車一樣靈活便捷，隨時都可以乘坐；表現在代碼里，很輕便，召之即來，缺點就是不好維護，沒有一個專門的文件去管理這些變量。想象平時等公交車的心情，知道它回來，但不知道它什么時候來，給人一種很不安的感覺。
而 Vuex，它像飛機，很莊重，塔臺要協調飛機運作暢順，飛機隨時向地面報告自己的位置，適合用在大型項目。表現代碼中，就是集中式管理所有狀態，并且以可預測的方式發生變化。也對應著飛機絕對不能失聯的特點。
第三種方式是全局 import，分三種類型，分別是：new Vue()、Vue.use()、Vue.prototype。可以用網約車來比喻，三種類型分別對應：專車、快車、順風車。都足夠靈活，表現在代碼里：一處導入，處處可用。
再分別說明：
new Vue() 就像滴滴的禮橙專車，官方運營，安全可靠。表現在代碼里，就是只有 Vue 官方維護的庫才能使用這種方式。
Vue.use() 就像快車，必須符合滴滴的規范，才能成為專職司機。表現在代碼中，就是導入的插件（或者庫）必須符合 Vue 的寫法（即封裝了 Vue 插件寫法）。
Vue.prototype 像順風車，要求沒上面兩個那么嚴，符合一般 js 寫法就行，就像順風車的準入門檻稍稍低一點。
當然，uni-app 的項目里還有可以用 globalData 定義全局變量，非要比喻，可以用地鐵，首先比 vue-bus 更好管理維護，想象地鐵是不是比公交更可靠；其次比 Vuex 更簡單，因為 globalData 真的就是簡單的定義一些變量。
globalData 是微信小程序發明的，Vue 項目好像沒有對應的概念，但是在 uni-app 中一樣可用。
上面說到，這種分類方式不嚴謹，主要體現在原理上，并不是簡單的并列關系或包含關系。
插件市場
uni-app 的主要特色也源自于它的插件市場十分豐富。
用得比較好的組件：
uView：我們用了這個庫的骨架屏。這個庫還是有很多技巧可以學到的。
https://www.uviewui.com/js/intro.htmlColorUI-UniApp：是個樣式庫，不是組件庫。
https://ext.dcloud.net.cn/plugin?id=239答題模版：左右滑答題模版，單選題、多選項，判斷題，填空題，問答題。基于 ColorUI 做的。
https://ext.dcloud.net.cn/plugin?id=451uCharts 高性能跨全端圖表：
https://ext.dcloud.net.cn/plugin?id=271最后：各端的差異性，很多東西，H5 挺好的，上真機就掛了，真機好著的，換小程序就飄了，不同小程序之間也有差異，重點是仔細閱讀文檔。
云打包限制，云打包(打 APK) 的每天做了限制，超出次數需要購買。
雖然可能一些原生可以實現的功能 uni-app 實現不了，不過整體開發下來還行，很多的坑還是因為多端不兼容，除了寫起來麻煩一點，基本上都還是有可以解決的策略。比之前用 Weex 寫 APP 開發體驗好一點，比 React Native 的編譯雞肋一點（這點體驗不是很好），至于 Flutter 還沒有試過，有機會的話會試一下。
總結
以上是生活随笔為你收集整理的uni app 调用网络打印机_uni-app 的使用体验总结的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 理解HTML语义化
- 下一篇： 大一计算机引论知识点,计算机引论知识点2