uni-app開發(fā)微信小程序遇到的部分踩坑實戰(zhàn)
記錄一些官方文檔沒有的踩坑點。
一、組件設(shè)置全屏覆蓋
設(shè)置寬度和高度100%是沒用的需要在里面加設(shè)置一層view,并且設(shè)置對應(yīng)寬高分別為vw和vh
<uni-popup> <viewclass="wrap_test"></view> </uni-popup> <stylelang="scss">.wrap_test{ width:100vw; height:100vh; } </style>
二、wx.onNetworkStatusChange、uni.onNetworkStatusChange網(wǎng)絡(luò)狀態(tài)監(jiān)聽不生效問題
1、該方法只能在手機(jī)上進(jìn)行驗證才能生效,小程序開發(fā)工具上面不生效2、該方法只能寫在onLoad方法里面,寫在mounted方法不生效
錯誤寫法?
mounted() { uni.onNetworkStatusChange(function (res) { console.log('onNetworkStatusChange', res); }); },
正確寫法?,手機(jī)上打開關(guān)閉數(shù)據(jù)、切換wifi連接都可以看得到效果
onLoad(data) { wx.onNetworkStatusChange((res) => { console.log('res' , res); }); },
三、接口請求寫在哪里好?(即返回頁面不刷新問題)
1、可以寫在onShow、onLoad、created、mounted
但是:寫在onShow里面最好?
原因:在很多情況下跳轉(zhuǎn)后都需要刷新頁面數(shù)據(jù)。因為onshow是在頁面展示時候觸發(fā),通過uni.navigateTo不會銷毀頁面,返回時候頁面的onLoad不會觸發(fā)。
例如:通過導(dǎo)航欄返回按鈕圖標(biāo)或者uni.navigateTo跳轉(zhuǎn)到指定頁面需要刷新頁面數(shù)據(jù)時候,onShow只要頁面展示了就會請求。
2、需要通過onLoad的參數(shù)來發(fā)起請求怎么辦?
onLoad(data) { this.prePageParams = data; // 先把參數(shù)存起來 }, onShow() { this.fetch(this.prePageParams); // 再拿到參數(shù)發(fā)起請求 },
四、uni-app微信小程序margin-bottom失效(有且只有ios系統(tǒng)上是失效的)
藍(lán)色的區(qū)域是position:fixed。(因為寫了這個,會導(dǎo)致ios上設(shè)置margin-bottom失效無效)圖中圖片需要距離底部,不能被藍(lán)色部分遮住,我寫了margin-bottom,在模擬器上以及安卓手機(jī)是可以的,但是ios系統(tǒng)會不行。
安卓機(jī)型沒問題:
如果是真機(jī)上,ios手機(jī)就會出現(xiàn)這種問題,導(dǎo)致圖片被遮住(這張圖演示ios上失效的示例):
解決辦法?:在底部增加一個空白的view設(shè)置高度即可
五、微信小程序button通過數(shù)組的length判斷disabled無效(數(shù)組length === 0寫法無效)
錯誤寫法?
<button type="default" @click="handleTag" :disabled="selectedKeys.length === 0"> 標(biāo)記 </button>
給selectedKeys.push()進(jìn)數(shù)據(jù)的時候按鈕還是禁用的。失效截圖:
這種寫法是無效的,是微信小程序的一個bug雖然button的組件是由uni-app提供的,在由小程序運(yùn)行時候,會轉(zhuǎn)為小程序的button。
微信開放社區(qū),有個相同的提問,官方回復(fù):
解決辦法,正確寫法?:
1、直接使用length即可(推薦)
<button type="default" @click="handleTag" :disabled="selectedKeys.length"> 標(biāo)記 </button>
2、通過computed計算屬性
<button type="default" @click="handleTag" :disabled="test"> 標(biāo)記 </button> // vue中的computedcomputed: { test() { returnthis.selectedKeys.length === 0; }, },
六、無法動態(tài)引入javascript腳本
不能像web端一樣寫script標(biāo)簽引入,因為不支持動態(tài)加載這種方式 引入,無法解決,你只需要知道即可。
七、swiper無法動態(tài)設(shè)置circular怎么辦?
和問題5有點類似,解決辦法一樣使用computed
<template> <swiper:circular="!canCircular" ></swiper> </template> exportdefault { data() { return { photoListData:[] } }, computed: { canCircular() { returnthis.photoListData.length > 0; } } }
八、IOS蘋果手機(jī)上時間格式化錯誤顯示Invalid Date
只在真機(jī)IOS上面才會出現(xiàn),小程序模擬器上的ios是不會出現(xiàn)的,原因是因為時間格式只要帶有-符號就會(但有個ios機(jī)型卻不會出錯,我用蘋果11測試會出現(xiàn)Invalid Date)。有幾種情況,例如:
1、new Date('2022-01-05')這樣寫,會出錯,變成Invalid Date
2、后端返回這種時間格式:2022-01-05T11:24:04.000+0800,如果使用dayjs格式化dayjs(2022-01-05T11:24:04.000+0800).format( 'MM/DD HH:mm')會同樣顯示錯誤。
解決辦法?(三種):
1、正常的時間格式直接replace掉
let time = "2020-03-30 14:39"letTF = newDate(time.replace(/-/g,'/'))
2、使用moment時間格式化(缺點是它比較大這個包)
moment(2022-01-05T11:24:04.000+0800).format( 'MM/DD HH:mm')
3、如果針對后端返回的那個格式:2022-01-05T11:24:04.000+0800,還想使用dayjs(它包非常小,小程序上面很實用),需要自己轉(zhuǎn)換替換下符號'-'
// 先轉(zhuǎn)換格式constresolveTimeOnIos = (time) => { let data = '0/0/0 00:00'; if (time && time.indexOf('-') !== -1 && time.indexOf('+') !== -1) { const translate = time .replace(/T/g, ' ') .replace(/\.[\d]{3}Z/, '') .replace(/(-)/g, '/'); data = translate.substring(0, translate.indexOf('.')); } return data; } const time = '2022-01-05T11:24:04.000+0800'// 這種格式時間轉(zhuǎn)換const translateTime = resolveTimeOnIos (time) // 先轉(zhuǎn)換dayjs(translateTime ).format( 'MM/DD HH:mm') // 使用dayjs格式換格式復(fù)制代碼
九、px和rpx相加計算不準(zhǔn)確問題(吸頂效果的實現(xiàn)在不同機(jī)型存在間隙誤差問題)
什么時候會碰到這個問題?當(dāng)需要吸頂效果,并且,頭部是自定義的頭部。我用的是在uniapp組件庫下載的一個叫做zhouWei-naeBar的組件,用于自定義頭部(這個組件在源碼里面寫了 92rpx 的高度,記住這是前提)。
吸頂?shù)膖op高度 = 自定義頭部的高度 + 不同機(jī)型的劉海高度。
所以上圖吸頂(圈起來的紅色)top值就為:
top = 92rpx + uni.getSystemInfoSync()['statusBarHeight']
但是由于小程序獲取到的劉海高度是以px像素為單位的,這就很糟糕!會變成
top = 92rpx + 43px // (假設(shè)獲取到是43px)
這樣計算出來的單位是不一致的,通過不同的dpr計算也不行,不同機(jī)型會有吸頂間隙的問題。
解決辦法?:使用calc動態(tài)計算
// statusBarHeight 是劉海高度 <view :style="{ top: `calc(${statusBarHeight}px + 92rpx)` }" > 這是一個吸頂盒子 </view>
十、遇到checkbox、radio組件樣式設(shè)置問題
這個很坑,它們是原生的組件,修改樣式只能在app.vue里面修改,目前只知道這一種解決辦法。如果你的UI給的圖比較特殊,用css寫比較困難,推薦使用圖片代替,請看下面示例+效果圖。
正確設(shè)置?:在App.vue文件里設(shè)置
test.vue文件(這里假設(shè)你使用checkbox或者radio的組件):
<template> <viewclass="custom-checkbox"> <checkbox-group> <checkbox> checkbox </checkbox> </checkbox-group></view> </template>
App.vue文件(這里設(shè)置):
提示:不用引入樣式,全局設(shè)置刷新直接生效.custom-checkbox用于包裹你的組件,只要哪里使用直接包裹就可以生效樣式全局通用。
<style lang="scss"> .custom-checkbox { // 使用一層類名包裹避免全局污染,下面開始設(shè)置選中前的你要樣式//設(shè)置通用樣式 .universal_sty { border: none; width: 42rpx; height: 39rpx; background-color: transparent; background-repeat: no-repeat; background-size: 100%; } //選中前的樣式---------------------------------- checkbox .wx-checkbox-input { background-image: url('./static/choice_no.png'); //替換為你要的圖片樣式 @extend .universal_sty; } //選中前原本的圖標(biāo)樣式-需要把它置空 checkbox .wx-checkbox-input::before { font-size: 0rpx; background: transparent; } //選中后的樣式--------------------------------- checkbox .wx-checkbox-input.wx-checkbox-input-checked { background-image: url('./static/choice_much.png'); //替換為你要的圖片樣式 @extend .universal_sty; } //選中后的圖標(biāo)樣式,需要把它置空 checkbox .wx-checkbox-input.wx-checkbox-input-checked::before { font-size: 0rpx; background: transparent; } } </style>
十一、uni-popup遮罩層組件下頁面會滾動問題
當(dāng)打開遮罩層時候,去滑動底層頁面,底層頁面會滾動。但是我們不想要這種效果,需要優(yōu)化它。滾動問題示例:
解決辦法?:
需要給uni-popup加一層view,給他設(shè)置高度,注意需要在彈窗打開時候設(shè)置高度(否則會導(dǎo)致底層的頁面高度有問題),并且再給它增加阻止冒泡事件:
<view :style="{ height: showModal ? '100vh' : '' }"> <uni-popupref="popupRef"type="bottom" @touchmove.stop.prevent="moveHandle" ><viewclass="wrap_popup"> 遮罩內(nèi)容 </view></uni-popup> </view> <script>exportdefault { data() { return { showModal: false, }; }, methods: { openModal() { this.showModal = true; //彈窗打開前設(shè)置高度this.$refs.popupRef.open(); }, moveHandle() { } }, }; </script>
注意:需要在手機(jī)上查看驗證效果,因為改完后小程序模擬器上驗證一樣會有問題。
十二、text-align:end 在真機(jī)上失效問題
想要輸入框的文字靠右對齊,如果寫text-align:end模擬器上是沒有問題,但是真機(jī)上輸入文字時候會跳到左邊:
?錯誤寫法,例如:
input { text-align:end }
?正確寫法:
input { text-align:right }
這樣就能一靠右顯示,并且輸入時候位置也在右邊
十二、輸入框光標(biāo)在真機(jī)無效(input輸入框, type="text"類型)
場景:使用uni-easyinput組件,例如模擬器上設(shè)置光標(biāo)顏色為藍(lán)色可以生效:
但在真機(jī)上type為text類型設(shè)置光標(biāo)顏色會失效(目前還是無解)
<uni-easyinput type="text"/> <style> // type類型為text最終解析出來的類型是inputinput { caret-color: #51b3ff; // 設(shè)置光標(biāo)顏色 } </style>
如果類型為textarea真機(jī)和模擬器是都可以的。
十三、Promise.allSettled()方法在部分IOS機(jī)型上無效
場景:使用Promise.allSettled并發(fā)請求接口,出現(xiàn)報錯:Promise.allSettled is not a function
<script> exportdefault { methods: { fetchTest() { Promise.allSettled([test1,test2,test3]) }, }; </script>
出現(xiàn)兼容性問題機(jī)型:
解決辦法?:使用Promise.all替代最快
十四、uni.uploadFile上傳文件接口報錯fail方法不觸發(fā)問題
注意: 這個錯誤方法觸發(fā)的時機(jī)是網(wǎng)絡(luò)層出錯才觸發(fā),而不是接口層面的出錯觸發(fā)
uni.uploadFile({ url:'http://www.test.com', //...success(res) { // 接口報錯404、500、502、503等都會走到這里(只要能訪問到) }, fail(err) { // 只有網(wǎng)絡(luò)斷開或者上傳的url服務(wù)器掛了,也是就訪問不到了才會走到這里 } })
總結(jié)
到此這篇關(guān)于uni-app開發(fā)微信小程序遇到踩坑的文章就介紹到這了,更多相關(guān)uni-app開發(fā)微信小程序踩坑內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
javascript制作的網(wǎng)頁側(cè)邊彈出框思路及實現(xiàn)代碼
這篇文章主要介紹了javascript制作的網(wǎng)頁側(cè)邊彈出框思路及實現(xiàn)代碼,需要的朋友可以參考下2014-05-05小程序與內(nèi)嵌webview的數(shù)據(jù)交互方案詳解
這篇文章主要介紹了小程序與內(nèi)嵌webview的數(shù)據(jù)交互方案,為實現(xiàn)H5頁面到小程序的無縫切換,技術(shù)方案包含使用webview交互,特別是低碼C端表單頁面的處理,需要的朋友可以參考下2024-09-09webpack的tree shaking的實現(xiàn)方法
這篇文章主要介紹了webpack的tree shaking的實現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09JavaScript內(nèi)置對象math,global功能與用法實例分析
這篇文章主要介紹了JavaScript內(nèi)置對象math,global功能與用法,結(jié)合實例形式分析了javascript中內(nèi)置對象math與global的基本概念、功能及使用方法,需要的朋友可以參考下2019-06-06BootstrapTable與KnockoutJS相結(jié)合實現(xiàn)增刪改查功能【二】
這篇文章主要介紹了BootstrapTable與KnockoutJS相結(jié)合實現(xiàn)增刪改查功能【二】的相關(guān)資料,非常具有參考價值,感興趣的朋友一起學(xué)習(xí)吧2016-05-05Javascript基于OOP實實現(xiàn)探測器功能代碼實例
這篇文章主要介紹了Javascript基于OOP實實現(xiàn)探測器功能代碼實例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-08-08