本文转自: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)正常,发布时多行省略无效。

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

[转]微信小程序开发踩坑记录的更多相关文章

  1. 微信小程序开发踩坑记录

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

  2. 微信小程序开发踩坑记

    前言 微信小程序自去年公测以来,我司也申请了一个帐号开发,春节前后开始开发,现在终于告一个段落了.谨以此文记录下踩过的坑. 坑1:scroll-view与onPullDownRefresh冲突 由于有 ...

  3. 微信小程序开发踩坑日记

    2017.12.29  踩坑记录 引用图片名称不要使用中文,尽量使用中文命名,IDE中图片显示无异样,手机上图片可能出现不显示的情况. 2018.1.5  踩坑记录 微信小程序设置元素满屏,横向直接w ...

  4. 微信小程序开发踩坑与总结 -

    原文链接:https://segmentfault.com/a/1190000008516296 前段时间把公司小程序项目开发完成了,所以来写写自己开发过程中碰到的问题和解决方法,以及用到的提高效率的 ...

  5. 微信小程序开发-踩坑

    异步请求处理 详情描述: 微信小程序的wx.request({})请求时异步处理,以下代码 wx.reuest({ url:"https://XXXA", method:" ...

  6. mpvue微信小程序项目踩坑记录

    1.mpvue入门教程, http://mpvue.com/mpvue/quickstart.html # . 先检查下 Node.js 是否安装成功 $ node -v v8.9.0 $ npm - ...

  7. 微信小程序开发踩坑之旅

    项目之始: 一.搭建新项目时出现了 page[pages/XXX/XXX] not found.May be caused by :1. Forgot to add page route in app ...

  8. 我的微信小程序入门踩坑之旅

    前言 更好的阅读体验请:我的微信小程序入门踩坑之旅 小程序出来也有一段日子了,刚出来时也留意了一下.不过赶上生病,加上公司里也有别的事,主要是自己犯懒,就一直没做.这星期一,赶紧趁着这股热乎劲,也不是 ...

  9. 微信小程序开发常见坑

    前段时间稍微涉猎了微信小程序开发,踩了一些坑,在此总结出来,希望能为小伙伴们提供一点帮助. 页面跳转 对于页面跳转,可能习惯性想到wx.navigateTo,但是在跳转到目标页面是一个tab时,此接口 ...

随机推荐

  1. C#多线程学习(二) 如何操纵一个线程

    在C#中,线程入口是通过ThreadStart代理(delegate)来提供的,你可以把ThreadStart理解为一个函数指针,指向线程要执行的函数,当调用Thread.Start()方法后,线程就 ...

  2. 如何使用安卓4.4的SD卡?

    安卓4.4默认情况下,后安装的程序无权写入数据到SD卡中,那么是否我们就不能用了?看了很多文章,都说要Root,随后修改配置文件.我觉得这不是很好的方法,Root之后的安卓会有很大风险,这不是最好的办 ...

  3. ATX 免越狱调试IOS和Android

    利用ATX配合WDA进行图形识别+自动化测试 通过使用AutomatorX,配合WebDriverAgent,可以实现在非越狱的IOS设备上更简单的进行自动化测试.同样,Android设备一样受到支持 ...

  4. Linux系统管理 常用命令

    基础常用命令 某个命令 --h,对这个命令进行解释 某个命令 --help,解释这个命令(更详细) man某个命令,文档式解释这个命令(更更详细)(执行该命令后,还可以按/+关键字进行查询结果的搜索) ...

  5. drf 三级菜单后台序列化以及数据库的设计

    第一种, model.py结构: class GoodsCategory(models.Model): """ 商品类别 """ CATEG ...

  6. CSS动态定位

    $(document).ready(function(){ $('body').on('click', '#start_timer', function() { var laydate = $(&qu ...

  7. 使用git提交代码简单说明

    一. 图形化git 1.首先下载msysgit,和 tortoisegit, 先装msysgit再装小乌龟 2.运行git按照github上说明生成秘钥对     ssh-keygen -t rsa ...

  8. 追随自己的价值观:用研经理 Anne Diaz 职业探索之路

    『漫谈』系列聚焦了人性脆弱面的价值.每期的对话嘉宾可能是爱彼迎设计团队的成员,也可能来自设计界的其他领域.对话主题都是我们在工作中很少讨论的话题. 这些话题涉及不同方面,比如失败.人生道路.冲突.成长 ...

  9. netsh命令操作防火墙

    这里的netsh命令操作防火墙主要是在Windows 7及以上版本,以示例说明: 1.防火墙入方向添加一条规则,规则名字:RDP,协议tcp,动作为允许,端口号3389:简而言之,就是允许其他机器远程 ...

  10. Python3.0版本 从听说python可以做爬虫到自己第一成功做出爬虫的经历

    前言 我自己是个python小白,工作也不是软件行业,但是日常没事时喜欢捣鼓一些小玩意,自身有点C语言基础. 听说python很火,可以做出爬虫去爬一些数据图片视频之类的东东,我的兴趣一下子就来了.然 ...