微信小程序開發踩坑記錄


1.由於小程序wx.request()方法是異步的,在app.js執行ajax后,各分頁加載app.js的全局數據時,無法按順序加載。例:

//app.js
App({
    ajax:function(){
        let that = this;
        wx.request({
            url: 'https://a.com/url.php',
            method: 'GET',
            success: function(e){
                that.data = 123;
            }
        })
    };
})
//content.js
let app = getApp()
Page({
    getData: function(){
        app.ajax();
        console.log(app.data);  //undefined
    }
})

解決方法,使用Promise異步函數:

//app.js
App({
    ajax:function(){
        let that = this;
        let promise = new Promise(function(resolve, reject){
            wx.request({
                url: 'https://a.com/url.php',
                method: 'GET',
                success: function(e){
                    that.data = 123;
                    resolve();
                }
            })
        });
    };
})
//content.js
let app = getApp()
Page({
    getData: function(){
        app.ajax().then(()=>{
            console.log(app.data);  //123
        });
    }
})

  

2.圖片只能獲取原始寬高,無法獲取現有寬高。不過image標簽封裝了mode屬性,可以根據需求自行設置。

 

3.每個image標簽底部有一條透明間隔,非padding,非margin。在圖片前面做遮罩層時可能會被坑。

設置css為vertical-align: middle; 就可以

 

4.網絡請求必須部署https 

 

5.配置tabBar時,list參數中的pagePath參數至少需要包含app.json里pages數組中的第一個路徑,否則會導致tabBar不顯示。

 

6.tabBar跳轉時無法帶參數,解決方法:

//search.js
var app = getApp();
Page({
    confirm: function(e){
        //獲取數據,添加到全局
        let val = e.detail.value;
        app.searchWord = val;
        this.jump();
    },
    jump: function(){
        //跳轉tabBar
        wx.switchTab({
            url: '../index/index',
        });
    },
});

//index.js
var app = getApp();
Page({
    onShow: function(e){
        //獲取全局數據
        let val = app.searchWord;
    }
});
//需要傳遞參數的頁面在跳轉前將數據添加到app.js里。需要接受參數的頁面在onShow方法接受之前添加到app.js的數據。

  

7.小程序wx.request()方法請求的url必須是https開頭

 

8.wx.request()使用post方法請求時,還需要加上header,header[content-type]值為application/x-www-form-urlencoded。例:

wx.request({
    url: 'https://a.com/url.php',
    data: {message: 123},
    method: 'POST',
    header: {
        'content-type': 'application/x-www-form-urlencoded'
    },
    success: function(e){
        console.log(e)
    }
});

 

9.小程序無法加載html標簽(現在可以用rich-text組件,但是對圖片很不友好),同時數據渲染也無法渲染wxml標簽(<view></view>等),可以使用wxParse.js來處理相關數據。

 

10.安卓無法渲染wx.request()請求的數據。官方已處理此坑

檢測返回的數據是否有BOM頭(3個字符的空白)。安卓的wx.request解析不會跳過BOM頭,導致數據返回的是字符串,而不是對象或者數組。

例:

返回的數據是:(3個字符的空白){a:1, b:2}

解析的數據是:'{a:1, b:2}'(字符串),而不是{a:1, b:2}(對象)

由於不是對象,模板渲染之類會無法正常進行。解決方法,后台返回數據前去掉BOM頭就行。如果后台不會去BOM頭,可以在前端去除,但是wx.request如果dataType缺省,會默認為json並自動解析,導致無法去除BOM頭。

 

解決方案:

wx.request({
    url: url,
    method: 'GET',
    dataType: 'txt',
    success: function(e){
        let json = e.data.trim();
        let arr = JSON.parse(json);
    }
});

dataType改為json以外的格式,避免小程序自動解析json字符串,然后對返回的數據用 trim() 方法去掉空白,最后解析json字符串就行。

 

11.調試時多行省略(-webkit-line-clamp)正常,發布時多行省略無效。

解決方案:如果不想重新審核,讓后台截斷就好

 

12.單次setData長度有限制:1048576

appservice:16 invokeWebviewMethod 數據傳輸長度為 2432088 已經超過最大長度 1048576

在用富文本的時候容易發生,特別是圖片為base64且像素特別大的時候

 

13.頁面的生命周期很迷,只有當redirectTo或navigateBack的時候才會卸載頁面,也就是觸發onUnload。

導致變量會存在很久,如果用setTimeout循環調用,可能會被坑,可以在onHide的時候清除有影響的變量或者setTimeout


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM