目錄

1. 微信小程序Api使用

1.1.路由跳轉(zhuǎn)方式wx.redirectTo()和wx.navigateTo()有時(shí)會(huì)失效

1.2.預(yù)覽圖片wx.previewImage() 點(diǎn)擊始終顯示第一張圖片

2.域名配置相關(guān)問題

2.1.wx.downloadFile()加載圖片不顯示

3.組件樣式&屬性不一致/失效

3.1.微信小程序picker組件，不同系統(tǒng)樣式不一致

3.2. scroll-view錨點(diǎn)定位scroll-into-view屬性失效

3.3.微信小程序，引入weapp組件庫Popup組件里嵌套自定義組件時(shí)，關(guān)閉Popup，再次點(diǎn)擊不生效

4.Js報(bào)錯(cuò)

5.生命周期相關(guān)問題

5.1.初次進(jìn)入小程序，底部tabbar權(quán)限展示錯(cuò)誤

6.其他問題

6.1.input獲取焦點(diǎn)時(shí)頁面內(nèi)容會(huì)被上推

6.2.[“usingComponents“][“component1“]:“xxx“

---

1. 微信小程序Api使用

1.1.路由跳轉(zhuǎn)方式wx.redirectTo()和wx.navigateTo()有時(shí)會(huì)失效

wx.redirectTo()只是關(guān)閉當(dāng)前頁面，跳轉(zhuǎn)到某個(gè)頁面，會(huì)疊加圖層，跳轉(zhuǎn)頁面次數(shù)太多可能找不到圖層（官方?jīng)]有明確說明上限是多少，查資料顯示一般在4/5層之后失效）。

wx.navigateTo()，可以配合返回上一頁api，保留當(dāng)前圖層，再跳轉(zhuǎn)某個(gè)頁面（文檔說明上限是10層）。

wx.reLaunch()關(guān)閉所有頁面，打開新的頁面。

按需求將部分路由api更換為wx.reLaunch()，避免圖層疊加過多而失效。

1.2.預(yù)覽圖片wx.previewImage() 點(diǎn)擊始終顯示第一張圖片

使用時(shí)的幾個(gè)問題：

1、每次預(yù)覽后頁面會(huì)刷新，產(chǎn)生數(shù)據(jù)疊加；

問題原因：api自動(dòng)觸發(fā)onShow，如果當(dāng)前頁面接口請(qǐng)求用的push方法去處理的返回來的數(shù)據(jù)，那么在預(yù)覽圖片后，就會(huì)不斷往緩存中添加新的一組數(shù)據(jù)。

解決方案：

（1）每次請(qǐng)求前先清除一下數(shù)據(jù)（最好就不要在當(dāng)前頁面做push方法的數(shù)據(jù)處理）；

（2）頁面既有邏輯太多怕清錯(cuò)，添加一個(gè)變量控制是否要請(qǐng)求接口，點(diǎn)擊圖片時(shí)禁止調(diào)取接口。

2、假設(shè)有兩張圖片，點(diǎn)擊預(yù)覽第二張圖片時(shí)，圖片永遠(yuǎn)顯示第一張。

不算是坑，檢查后發(fā)現(xiàn)是頁面并沒有取值到對(duì)應(yīng)的index，所以不能直接使用 current: this.data.imgUrl[e.target.dataset.index],需要在頁面中點(diǎn)擊圖片的位置（而不是for循環(huán)的位置）綁定 data-index="{{index}}"。

wx.previewImage({current: this.data.imgList[index],urls: this.data.imgList })

2.域名配置相關(guān)問題

2.1.wx.downloadFile()加載圖片不顯示

具體表現(xiàn)場(chǎng)景：

圖片占位且一直刷新。

解決方案：

本地開發(fā)的時(shí)候會(huì)生效，是因?yàn)楣催x了“不校驗(yàn)合法域名的選項(xiàng)”，但微信上傳測(cè)試環(huán)境后，HTTPS 請(qǐng)求就需要配置合法域名，上傳wx.uploadFile()和下載wx.downloadFile()網(wǎng)絡(luò)請(qǐng)求也是一樣的。

在微信開發(fā)者工具檢查是否配置合法域名，如未配置，登陸微信小程序后臺(tái)【開發(fā)】--【開發(fā)管理】--【開發(fā)設(shè)置】--【服務(wù)器域名】進(jìn)行配置。

3.組件樣式&屬性不一致/失效

3.1.微信小程序picker組件，不同系統(tǒng)樣式不一致

左為安卓樣式，右為ios樣式。

解決方案：

業(yè)務(wù)要求需要以左側(cè)為準(zhǔn)，樣式得統(tǒng)一，可以將小程序組件更換為vant weapp組件庫popup +picker組合使用。

<van-popup show="{{ showReason }}" bind:close="onCloseReason" position="bottom" round><van-picker columns="{{ reasonArray }}" bind:confirm="bindPickerChange" default-index="{{ index }}" custom-class="index font" title="標(biāo)題名稱 " show-toolbar value-key="reasonName" bind:cancel="onCloseReason" visible-item-count="5" active-class="choiceReason" /> </van-popup>

3.2. scroll-view錨點(diǎn)定位scroll-into-view屬性失效

使用時(shí)的幾個(gè)問題：

1、將scroll-view放在父組件中，滾動(dòng)區(qū)內(nèi)容單獨(dú)封裝在子組件中，scroll-into-view不定位。

解決方案：將scroll-view標(biāo)簽從父組件移入到子組件，頁面可定位。

2、解決第一個(gè)問題后，從a頁面進(jìn)入b頁面，在b頁面也需要錨點(diǎn)定位，但是定位的位置不準(zhǔn)確，始終偏上。

檢查思路及解決方案：

（1）檢查封裝的子組件中子元素是否有flex布局，scroll-view默認(rèn)不支持，需開啟，或者將子元素彈性盒屬性變更為浮動(dòng)屬性（第二個(gè)辦法多少有點(diǎn)傻，但瀏覽帖子有人scroll-view不生效也不知道為啥，還只能改用float）；

（2）scroll-view的父級(jí)元素?zé)o高度時(shí)，scroll-view不能使用height:100%，要使用固定高度；

（3）不同手機(jī)屏幕高度不同，動(dòng)態(tài)獲取手機(jī)高度后計(jì)算賦值，再將值傳給子組件；

// 在onLoad周期獲取視口高度wx.getSystemInfo({success: (res) => {// 獲取可使用窗口寬度let clientHeight = res.windowHeight;// 獲取可使用窗口高度let clientWidth = res.windowWidth;// 算出比例let ratio = 750 / clientWidth;// 算出高度(單位rpx) - 固定元素的高度滾動(dòng)區(qū)高度let height = clientHeight * ratio – 父組件頁面其他元素高度;this.setData({height: height,})} });

（4）獲取a頁面定位元素的生命周期（onLoad）在接口調(diào)用（onShow）之前，數(shù)據(jù)未完全渲染就已經(jīng)開始定位，所以產(chǎn)生偏差。

可以將請(qǐng)求挪到onLoad中 + 定時(shí)器同時(shí)使用，雙重保險(xiǎn)。

onLoad(options) { //請(qǐng)求接口的方法 //開啟定時(shí)器setTimeout(() => {//接收a頁面?zhèn)鱽淼膇d名稱，進(jìn)行錨點(diǎn)定位if (!!options.toView) {that.setData({toView: options.toView})}}, 50) }

縱向滾動(dòng)時(shí)，.wxml中寫入以下屬性就好。

<scroll-view style="height: {{height}}rpx;" scroll-y="true" scroll-into-view="{{toView}}" scroll-with-animation="true">

3.3.微信小程序，引入weapp組件庫Popup組件里嵌套自定義組件時(shí)，關(guān)閉Popup，再次點(diǎn)擊不生效

業(yè)務(wù)場(chǎng)景：由于對(duì)彈窗樣式有要求，所以沒有使用官方提供的wx.showModal(),而是使用Popup封裝的彈窗組件。在點(diǎn)擊頁面按鈕彈出彈窗組件，關(guān)閉后再次點(diǎn)擊按鈕，點(diǎn)擊事件沒有被觸發(fā)，彈窗不彈出。

問題原因：嵌套的自定子組件雖然也跟隨Popup關(guān)閉，但留在了原位，遮擋了按鈕操作。

解決方案：去掉Popup自定義樣式中的flex元素，將其移入自定義組件中設(shè)置，只保留基礎(chǔ)的寬高背景色屬性。

4.Js報(bào)錯(cuò)

5.生命周期相關(guān)問題

5.1.初次進(jìn)入小程序，底部tabbar權(quán)限展示錯(cuò)誤

業(yè)務(wù)場(chǎng)景：自定義子組件tabbar權(quán)限初次登錄本地存儲(chǔ)登錄信息，進(jìn)入首頁時(shí)，展示為未登錄首頁權(quán)限，推出小程序前臺(tái)再次進(jìn)入小程序時(shí)，才顯示正確。

問題原因：判斷權(quán)限使用的生命周期錯(cuò)誤。tabbar權(quán)限判斷放在了（attached）周期中，會(huì)早于index頁父組件（onShow）前觸發(fā)。也就是說，權(quán)限信息還沒獲取到，權(quán)限判斷就已經(jīng)開始了，所以頁面顯示錯(cuò)誤。

解決方法：將attached（在組件實(shí)例進(jìn)入頁面節(jié)點(diǎn)樹時(shí)執(zhí)行）修改為ready（在組件在視圖層布局完成后執(zhí)行），這時(shí)父組件已經(jīng)拿到權(quán)限判斷的數(shù)據(jù)，之后執(zhí)行子組件的判斷，數(shù)據(jù)正確。

6.其他問題

6.1.input獲取焦點(diǎn)時(shí)頁面內(nèi)容會(huì)被上推

業(yè)務(wù)場(chǎng)景：

1、微信小程序，自定義地圖搜索，頂部按鈕使用絕對(duì)定位和粘性定位不生效，輸入框輸入文字時(shí)按鈕會(huì)被頂出屏幕。

問題原因：input獲取焦點(diǎn)彈出鍵盤時(shí)，默認(rèn)自動(dòng)上推頁面。

解決方法：

1、組件設(shè)置 adjust-position=“{{false}}” ，鍵盤彈起時(shí)，禁止自動(dòng)上推頁面。

2、設(shè)置1后，輸入框在獲取焦點(diǎn)時(shí)，可能會(huì)被彈出的鍵盤覆蓋，看不到輸入的內(nèi)容。需要同時(shí)給input設(shè)置動(dòng)態(tài)style=” padding-bottom :{{pb }}rpx” ，<input/>綁定???????? bindfocus（獲取焦點(diǎn)）和bindblur（失去焦點(diǎn)），當(dāng)觸發(fā)焦點(diǎn)鍵盤抬起時(shí)，賦值為當(dāng)前鍵盤高度；鍵盤關(guān)閉賦值為0。

//觸發(fā)input焦點(diǎn)時(shí)，動(dòng)態(tài)賦值padding-bottom高度keyBoardOnFun(e) {console.log(e.detail.height)if (e.detail.height) {this.setData({paddingBottom: (e.detail.height * 2 - 500) * 2.5 // -500 *2.5 操作為漏出輸入框dom})}},//失去input焦點(diǎn)時(shí)，動(dòng)態(tài)修改padding-bottom為0keyBoardCloceFun(e) {this.setData({paddingBottom: 0})},

6.2.[“usingComponents“][“component1“]:“xxx“

啟動(dòng)小程序控制臺(tái)直接報(bào)錯(cuò)：

微信小程序無法找到組件的問題?[“usingComponents“][“component1“]:“xxx“未找到

解決方法：把子組件移出來，編譯一下，再把子組件移進(jìn)去，重新點(diǎn)擊編譯……

總結(jié)

以上是生活随笔為你收集整理的微信小程序开发报错及解决记录的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。