最近使用 Uni-App 的感受。
從團隊成員和成本來考慮，團隊從 React 轉向了 Vue 技術棧。
使用體驗
沒用之前以為真和 Vue 一樣，用了之后才知道。這喵的是 Vue 和 小程序的結合體吖。寫類似小程序的標簽，Vue 的語法。對比 Uni-App 文檔和微信小程序的文檔，不差多少，只是將 wx => uni，熟悉 Vue 和 小程序可以直接上手。
需要注意看注意事項，給出了和 Vue 使用的區別。例如動態的 Class 與 Style 綁定，在 H5 能用，APP 和小程序就掛了。
路由
Uni-App 的路由全部配置在 pages.json 文件里，就會導致多人開發的時候，路由無法拆分，如果處理的不好，經常發生沖突。
里面其他的配置項，見官方文檔就可以處理了。
導航
導航欄需要注意的一個問題就是不同端的展示形式會不同，所以要處理兼容問題，導航欄可以自定義，用原生，框架，插件但是兼容性都不同，多端需求一定要在不同設備跑一下看效果。
例如在小程序和 APP 中，原生導航欄取消不了，就不能用自定義的導航欄，要在 pages.json 中配置原生導航欄。
兼容方法就是用 Uni-App 提供的條件編譯，處理各端不同的差異。支付的業務也是通過條件編譯，區分不同端調用不同的支付方式。
生命周期
分 應用的生命周期、頁面的生命周期、組件的生命周期。大致上和 Vue 的差不多，頁面生命周期針對當前的頁面，應用生命周期針對小程序、APP。這些坑的過程都要踩一下！
網絡請求
官方的 uni.request 雖然封裝好了基本的請求，但是沒有攔截，我們開始也是自己在這基礎上加了層殼，簡單的封裝發送請求。后面是選擇了第三方庫的使用，如 flyio、axios。
資源優化
- 不涉及 Webpack 之類的資源打包優化，但是文檔中有提到資源預取、預加載、treeShaking 只需要在配置文件中設置即可，或者在開發工具勾上。小程序也是勾選自動壓縮混淆。
- 刪除沒用到文件和圖片資源，因為打包的時候是會算進去的，比如
static目錄下的資源文件都會被打包，而且圖片資源太大也不好。 - Uni-App 運行時的框架主庫
chunk-vendors.js文件是經過處理的，部署做gZip。
Web-View
在 Uni-App 中使用 WebView，可以使用本地的資源和網絡的資源，不同平臺也是有差異的，小程序不支持本地 HTML，且小程序端 WebView 組件一定有原生導航欄。
需要注意的是網頁向應用 postMessage 的時候需要引入 uni.web-view.js，不然是沒辦法通信拿不到數據。
全局狀態
小程序中要在每一個頁面中添加使用共有的數據，可以有三種方式解決。
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?？梢杂镁W約車來比喻，三種類型分別對應：專車、快車、順風車。都足夠靈活，表現在代碼里：一處導入，處處可用。
再分別說明：
new Vue() 就像滴滴的禮橙專車，官方運營，安全可靠。表現在代碼里，就是只有 Vue 官方維護的庫才能使用這種方式。
Vue.use() 就像快車，必須符合滴滴的規范，才能成為專職司機。表現在代碼中，就是導入的插件（或者庫）必須符合 Vue 的寫法（即封裝了 Vue 插件寫法）。
Vue.prototype 像順風車，要求沒上面兩個那么嚴，符合一般 js 寫法就行，就像順風車的準入門檻稍稍低一點。
當然，Uni-App 的項目里還有可以用 globalData 定義全局變量，非要比喻，可以用地鐵，首先比 vue-bus 更好管理維護，想象地鐵是不是比公交更可靠；其次比 Vuex 更簡單，因為 globalData 真的就是簡單的定義一些變量。
globalData 是微信小程序發明的，Vue 項目好像沒有對應的概念，但是在 Uni-App 中一樣可用。
上面說到，這種分類方式不嚴謹，主要體現在原理上，并不是簡單的并列關系或包含關系。
插件市場
用得比較好的組件：
ColorUI-UniApp：是個樣式庫，不是組件庫。
答題模版：左右滑答題模版，單選題、多選項，判斷題，填空題，問答題。基于 ColorUI 做的。
uCharts 高性能跨全端圖表：
最后：各端的差異性，很多東西，H5 挺好的，上真機就掛了，真機好著的，換小程序就飄了，不同小程序之間也有差異，重點是仔細閱讀文檔。
云打包限制，云打包(打 APK) 的每天做了限制，超出次數需要購買。
雖然可能一些原生可以實現的功能 Uni-App 實現不了，不過整體開發下來還行，很多的坑還是因為多端不兼容，除了寫起來麻煩一點，基本上都還是有可以解決的策略。比之前用 Weex 寫 APP 開發體驗好一點。
