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