記錄一些官方文檔沒(méi)有的踩坑點(diǎn)。

一、組件設(shè)置全屏覆蓋

設(shè)置寬度和高度100%是沒(méi)用的需要在里面加設(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)聽(tīng)不生效問(wèn)題

1、該方法只能在手機(jī)上進(jìn)行驗(yàn)證才能生效，小程序開(kāi)發(fā)工具上面不生效2、該方法只能寫(xiě)在onLoad方法里面，寫(xiě)在mounted方法不生效

錯(cuò)誤寫(xiě)法?

mounted() {
     uni.onNetworkStatusChange(function (res) {
       console.log('onNetworkStatusChange', res);
     });
  },

正確寫(xiě)法?，手機(jī)上打開(kāi)關(guān)閉數(shù)據(jù)、切換wifi連接都可以看得到效果

onLoad(data) {
    wx.onNetworkStatusChange((res) => {
      console.log('res' , res);
    });
  },

三、接口請(qǐng)求寫(xiě)在哪里好？（即返回頁(yè)面不刷新問(wèn)題）

1、可以寫(xiě)在onShow、onLoad、created、mounted

但是：寫(xiě)在onShow里面最好?

原因：在很多情況下跳轉(zhuǎn)后都需要刷新頁(yè)面數(shù)據(jù)。因?yàn)閛nshow是在頁(yè)面展示時(shí)候觸發(fā)，通過(guò)uni.navigateTo不會(huì)銷毀頁(yè)面，返回時(shí)候頁(yè)面的onLoad不會(huì)觸發(fā)。

例如：通過(guò)導(dǎo)航欄返回按鈕圖標(biāo)或者uni.navigateTo跳轉(zhuǎn)到指定頁(yè)面需要刷新頁(yè)面數(shù)據(jù)時(shí)候，onShow只要頁(yè)面展示了就會(huì)請(qǐng)求。

2、需要通過(guò)onLoad的參數(shù)來(lái)發(fā)起請(qǐng)求怎么辦？

onLoad(data) {
    this.prePageParams = data;  // 先把參數(shù)存起來(lái)
  },
  onShow() {
    this.fetch(this.prePageParams);  // 再拿到參數(shù)發(fā)起請(qǐng)求
  },

四、uni-app微信小程序margin-bottom失效（有且只有ios系統(tǒng)上是失效的）

藍(lán)色的區(qū)域是position:fixed。（因?yàn)閷?xiě)了這個(gè)，會(huì)導(dǎo)致ios上設(shè)置margin-bottom失效無(wú)效）圖中圖片需要距離底部，不能被藍(lán)色部分遮住，我寫(xiě)了margin-bottom，在模擬器上以及安卓手機(jī)是可以的，但是ios系統(tǒng)會(huì)不行。

安卓機(jī)型沒(méi)問(wèn)題：

如果是真機(jī)上，ios手機(jī)就會(huì)出現(xiàn)這種問(wèn)題，導(dǎo)致圖片被遮?。ㄟ@張圖演示ios上失效的示例）：

解決辦法?：在底部增加一個(gè)空白的view設(shè)置高度即可

五、微信小程序button通過(guò)數(shù)組的length判斷disabled無(wú)效（數(shù)組length === 0寫(xiě)法無(wú)效）

錯(cuò)誤寫(xiě)法?

 <button type="default" @click="handleTag" :disabled="selectedKeys.length === 0">
    標(biāo)記
 </button>

給selectedKeys.push()進(jìn)數(shù)據(jù)的時(shí)候按鈕還是禁用的。失效截圖：

這種寫(xiě)法是無(wú)效的，是微信小程序的一個(gè)bug雖然button的組件是由uni-app提供的，在由小程序運(yùn)行時(shí)候，會(huì)轉(zhuǎn)為小程序的button。

微信開(kāi)放社區(qū)，有個(gè)相同的提問(wèn)，官方回復(fù)：

解決辦法，正確寫(xiě)法?：

1、直接使用length即可（推薦）

<button   type="default"  @click="handleTag"  :disabled="selectedKeys.length">
    標(biāo)記
</button>

2、通過(guò)computed計(jì)算屬性

<button type="default" @click="handleTag" :disabled="test">
    標(biāo)記
</button>
 
// vue中的computedcomputed: {
    test() {
      returnthis.selectedKeys.length === 0;
    },
  },

六、無(wú)法動(dòng)態(tài)引入javascript腳本

不能像web端一樣寫(xiě)script標(biāo)簽引入，因?yàn)椴恢С謩?dòng)態(tài)加載這種方式 引入，無(wú)法解決，你只需要知道即可。

七、swiper無(wú)法動(dòng)態(tài)設(shè)置circular怎么辦？

和問(wèn)題5有點(diǎn)類似，解決辦法一樣使用computed

<template>
  <swiper:circular="!canCircular" ></swiper>
</template>
 
exportdefault {
  data() {
    return {
      photoListData:[]
    }  
  },
  computed: {
    canCircular() {
      returnthis.photoListData.length > 0;
    }
  }
}

八、IOS蘋(píng)果手機(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ò)，我用蘋(píng)果11測(cè)試會(huì)出現(xiàn)Invalid Date）。有幾種情況，例如：

1、new Date('2022-01-05')這樣寫(xiě)，會(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)確問(wèn)題（吸頂效果的實(shí)現(xiàn)在不同機(jī)型存在間隙誤差問(wèn)題）

什么時(shí)候會(huì)碰到這個(gè)問(wèn)題？當(dāng)需要吸頂效果，并且，頭部是自定義的頭部。我用的是在uniapp組件庫(kù)下載的一個(gè)叫做zhouWei-naeBar的組件，用于自定義頭部（這個(gè)組件在源碼里面寫(xiě)了 92rpx 的高度，記住這是前提）。

吸頂?shù)膖op高度 = 自定義頭部的高度 + 不同機(jī)型的劉海高度。

所以上圖吸頂（圈起來(lái)的紅色）top值就為：

top = 92rpx + uni.getSystemInfoSync()['statusBarHeight']

但是由于小程序獲取到的劉海高度是以px像素為單位的，這就很糟糕！會(huì)變成

top = 92rpx + 43px   // (假設(shè)獲取到是43px)

這樣計(jì)算出來(lái)的單位是不一致的，通過(guò)不同的dpr計(jì)算也不行，不同機(jī)型會(huì)有吸頂間隙的問(wèn)題。

解決辦法?：使用calc動(dòng)態(tài)計(jì)算

// statusBarHeight 是劉海高度
 <view :style="{ top: `calc(${statusBarHeight}px + 92rpx)` }" >
    這是一個(gè)吸頂盒子
 </view>

十、遇到checkbox、radio組件樣式設(shè)置問(wèn)題

這個(gè)很坑，它們是原生的組件，修改樣式只能在app.vue里面修改，目前只知道這一種解決辦法。如果你的UI給的圖比較特殊，用css寫(xiě)比較困難，推薦使用圖片代替，請(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 {  // 使用一層類名包裹避免全局污染，下面開(kāi)始設(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遮罩層組件下頁(yè)面會(huì)滾動(dòng)問(wèn)題

當(dāng)打開(kāi)遮罩層時(shí)候，去滑動(dòng)底層頁(yè)面，底層頁(yè)面會(huì)滾動(dòng)。但是我們不想要這種效果，需要優(yōu)化它。滾動(dòng)問(wèn)題示例：

解決辦法?：

需要給uni-popup加一層view，給他設(shè)置高度，注意需要在彈窗打開(kāi)時(shí)候設(shè)置高度（否則會(huì)導(dǎo)致底層的頁(yè)面高度有問(wèn)題），并且再給它增加阻止冒泡事件：

<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; //彈窗打開(kāi)前設(shè)置高度this.$refs.popupRef.open();
    },
    moveHandle() {
    
    }
  },
};
</script>

注意：需要在手機(jī)上查看驗(yàn)證效果，因?yàn)楦耐旰笮〕绦蚰M器上驗(yàn)證一樣會(huì)有問(wèn)題。

十二、text-align:end 在真機(jī)上失效問(wèn)題

想要輸入框的文字靠右對(duì)齊，如果寫(xiě)text-align:end模擬器上是沒(méi)有問(wèn)題，但是真機(jī)上輸入文字時(shí)候會(huì)跳到左邊：

?錯(cuò)誤寫(xiě)法，例如：

input {
    text-align:end 
}

?正確寫(xiě)法：

input {
    text-align:right 
}

這樣就能一靠右顯示，并且輸入時(shí)候位置也在右邊

十二、輸入框光標(biāo)在真機(jī)無(wú)效（input輸入框, type="text"類型）

場(chǎng)景：使用uni-easyinput組件，例如模擬器上設(shè)置光標(biāo)顏色為藍(lán)色可以生效：

但在真機(jī)上type為text類型設(shè)置光標(biāo)顏色會(huì)失效（目前還是無(wú)解）

    <uni-easyinput type="text"/>
    
    <style>
       // type類型為text最終解析出來(lái)的類型是inputinput {
        caret-color: #51b3ff; // 設(shè)置光標(biāo)顏色
      }
    </style>

如果類型為textarea真機(jī)和模擬器是都可以的。

十三、Promise.allSettled()方法在部分IOS機(jī)型上無(wú)效

場(chǎng)景：使用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)兼容性問(wèn)題機(jī)型：

解決辦法?：使用Promise.all替代最快

十四、uni.uploadFile上傳文件接口報(bào)錯(cuò)fail方法不觸發(fā)問(wèn)題

注意： 這個(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ì)走到這里（只要能訪問(wèn)到）
    },
    fail(err) {
      // 只有網(wǎng)絡(luò)斷開(kāi)或者上傳的url服務(wù)器掛了，也是就訪問(wèn)不到了才會(huì)走到這里
    }
})

總結(jié)

到此這篇關(guān)于uni-app開(kāi)發(fā)微信小程序遇到踩坑的文章就介紹到這了,更多相關(guān)uni-app開(kāi)發(fā)微信小程序踩坑內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！