使用 uni-app 開發遇到的問題

想法：

• 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才能適配。

引用方案：

導航欄高度 = 膠囊按鈕高度 + 狀態欄到膠囊按鈕間距 * 2                                                              

Android導航欄高度 = 32px + 8px * 2 = 48px

iOS導航欄高度 = 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提供的條件編譯解決

由此方案能夠比較完美解決自定義導航欄適配問題。

參考： http://www.javashuo.com/article/p-awwbaxhk-gm.html

 

問題二：原生 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 // 監聽第一次數據綁定
 } }