微信小程序踩坑记录
1.问题:如果页面个数多于五个,要怎么处理
- 问题原因:通常是由于系统设置了代理如Shadowsocks等。
- 解决方案:关闭代理,或者依次点击工具栏“动作”-“设置”,选择“不使用任何代理,勾选后直连网络”。
于小程序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。在图片前面做遮罩层时可能会被坑。
设置css为vertical-align: middle; 就可以
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标签(现在可以用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头。
解决方案:
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)正常,发布时多行省略无效。
解决方案:如果不想重新审核,让后台截断就好
12.单次setData长度有限制:1048576
appservice:16 invokeWebviewMethod 数据传输长度为 2432088 已经超过最大长度 1048576
在用富文本的时候容易发生,特别是图片为base64且像素特别大的时候
13.页面的生命周期很迷,只有当redirectTo或navigateBack的时候才会卸载页面,也就是触发onUnload。
导致变量会存在很久,如果用setTimeout循环调用,可能会被坑,可以在onHide的时候清除有影响的变量或者setTimeout
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY