想法：
- uni-app 給我的感覺就像是把微信小程序的API，組件和vue的語法揉捏在一起所組成框架，沒有原生小程序和vue那種流暢感，官方的 uni-ui 組件庫不夠成熟，坑比較多。
問題一：自定義導航欄適配
- 使用自定義導航欄以后手機頂部狀態欄區域會被頁面內容覆蓋，這是因為窗體是沉浸式的原因，即全屏可寫內容。官方給出了一個 --status-bar-height 的css變量,此時可以使用一個高度為 --status-bar-height 的 view 放在頁面頂部，避免頁面內容出現在狀態欄。雖然解決了狀態欄的適配，但是沒有解決小程序里面膠囊高度的問題。
解決：
- 在網上查找發現，Android跟iOS在導航欄與膠囊上有差異，可以通過uni.getSystemInfoSync()來獲取手動獲取狀態欄的高度（微信小程序對應wx.getSystemInfoSync()），測試以后發現iOS膠囊按鈕與狀態欄之間距離為：6px， Android為8px，由於膠囊是原生組件，必須使用px才能適配。
引用方案：
導航欄高度 = 膠囊按鈕高度 + 狀態欄到膠囊按鈕間距 * 2Android導航欄高度 = 32px + 8px * 2 = 48pxiOS導航欄高度 = 32px + 6px * 2 = 44px
template:
<view class="nav">
<view class="status" :style="{ height: statusHeight + 'px' }"></view>
<view class="bar":style="{ height: navHeight + 'px' }"></view>
</view>
javascript:
setNavSize: function() { var sysinfo = uni.getSystemInfoSync(),// 這里最好調用異步 getSystemInfo statusHeight = sysinfo.statusBarHeight, isiOS = sysinfo.system.indexOf('iOS') > -1, navHeight; if (!isiOS) { navHeight = 48; } else { navHeight = 44; } this.statusHeight = statusHeight; this.navHeight = navHeight; }
需要注意的是支付寶小程序自定義導航欄和微信小程序有差異，可以通過uni-app提供的條件編譯解決
由此方案可以比較完美解決自定義導航欄適配問題。
問題二：原生 scroll-view 組件布局
- 原生的 scroll-view 組件不支持 flex 布局
- 導航欄小於五項時居中顯示
解決
- 暫無較好的辦法，只能在scroll-view組件里面再加一層view實現flex布局
- scroll-view + justify-content: space-around；判斷總項數是否小於五，小於五動態添加class
問題三：uni-ui 組件不能修改樣式
- 在使用抽屜組件的時候出現了樣式問題，因為使用了自定義導航，所以抽屜組件占滿了全屏，在其它組件修改抽屜組件的class不起作用。
解決
- 方法一：在app.vue中修改class，此方法可以全局修改樣式
- 方法二：修改組件源碼，因為組件考慮的不是特別周全，可以修改組件的源碼來實現自己想要的效果
- 方法三： /deep/ .class { } 使用 uni-app 的 css 深度選擇器
問題四：修飾符失效
解決
- uni-app 雖然是vue語法，但是並沒有使用vue的修飾符，而是選擇小程序的修飾符
問題五：使用支付寶開發工具無法識別項目
解決
- 等待支付寶小程序開發者工具啟動后，在支付寶小程序開發者工具中打開：uniapp/unpackage/dist/dev/mp-alipay，然后在HBuilderX中修改文件並保存，會自動刷新支付寶小程序開發者工具
問題六：在不同平台顯示不同樣式
解決
- uni-app 中提供了條件編譯，完美解決了這個問題
問題七：動態傳值監聽數據改變
解決
- 使用 vue 中的 watch 可以滿足需求
watch: { downtime: { handler(newVal,oldVal) { this.date = newVal; }, immediate: true // 監聽第一次數據綁定 } }