• [转]微信小程序开发踩坑记录


    本文转自:http://www.cnblogs.com/NKnife/p/6283605.html

    1.由于小程序wx.request()方法是异步的,在app.js执行ajax后,各分页加载app.js的全局数据时,无法按顺序加载。例:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    //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异步函数:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    //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。在图片前面做遮罩层时可能会被坑。

    4.网络请求必须部署https 

    5.配置tabBar时,list参数中的pagePath参数至少需要包含app.json里pages数组中的第一个路径,否则会导致tabBar不显示。

    6.tabBar跳转时无法带参数,解决方法:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    //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。例:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    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标签,同时数据渲染也无法渲染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头。

    解决方案:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    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)正常,发布时多行省略无效。

    解决方案:如果不想重新审核,让后台截断就好

  • 相关阅读:
    VUEX
    使用element框架 增加router路由
    VUE目录
    elementUI 创建
    VUE组件(父子组件)
    VUE操作DOM获取HTML、删除HTML、插入HTML
    VUE网络交互axios(网络请求库)
    VUE 或者JS 常用数据类型及方法:字符串、数组、对象
    VUE实际案例--计数器(商城数量加减)
    VUE学习 --数据类型、el挂点、指令等
  • 原文地址:https://www.cnblogs.com/freeliver54/p/6738615.html
Copyright © 2020-2023  润新知