小程序中布局突然乱掉了,到底是怎么个情况?

就在上周,突然很多用户反馈,都说小小签到布局乱掉了(线上有四款小程序都收到这样的反馈,这里我就不广告了),经过客服反复沟通,找到了布局乱掉的必现条件:

1、IOS用户较多,系统版本为8.X,很难升级(iPhone 5 & 5S);

2、部分页面布局乱掉,这些页面都用到了flex布局(反复排查之后,怀疑跟flex布局有关系);

3、之前使用正常,小程序新发布后就乱掉了;

4、最近发布过新代码;

先看个截图:

巧的是,微信web开发工具也在前不久从0.X版本升级到了1.X版本,整个UI改动比较大,这里不细说~

出现这么严重的问题,那肯定是先回滚代码,回滚后用户那边就显示正常了,说明肯定是代码的问题。

对比代码之后,发现新代码中主要是添加了一些CSS3的动画。难道是CSS3某些动画不支持?索性就把动画代码全部去掉,用5S测试机运行一下,依然乱码。

然后把flex布局修改成float实现,发现布局正常,但是工作量太大,之前的代码中多列布局,全部用的flex实现。所以,继续查找问题~

两次代码基本一样,但提交后效果却不一样,为什么?我开始怀疑是开发工具的问题了,因为开发工具从0.x突然升级到了1.X,整个改动很大,难道是提交的时候,代码压缩的方式不对?或者我发布代码的姿势不对?

最终发现了问题,确实是开发工具里面压缩代码时,默认勾选项目发生了变化,默认情况下“上传代码时样式自动补全”并未选中,如下:

勾选这个选项后,再次发布代码,布局就正常了。

然后我又去网上查了一下flex布局在ios 8.x上不兼容的处理,大部分回复都是说要添加前缀:

display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
dispiay:flex;

之前用flex布局,是因为文本宽度会根据内容多少而发生变化,这一点儿让人特别不爽~

顺便再说一个另一个同学提的问题:为什么获取手机号getPhoneNumber(OBJECT)API调用报错?

凡是遇到这种问题,首先是看小程序官方文档,如果还解决不了,就去社区上查找~

社区上已经有官方人员回复了,获取手机号功能,不对个人开发者开放,并且前端没办法直接拿到手机号,需要到服务端去解密。

原文发布于微信公众号 - 知晓程序员(bainaweb)

原文发表时间:2017-09-19

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏VRPinea

Unity推出最新测试版,将支持立体360°影像和视频捕捉技术

26610
来自专栏Android先生

写给小白的android基础面试笔试题(三)

好了,简历写完之后,你得多看两遍,最好不要出现语句错误或者错别字等等,如果还不放心的话你还可以发给你的同学看看,让他们帮你找找还有没有错误,然后你就可以去投简历...

1095
来自专栏林德熙的博客

wpf PreviewTextInput 在鼠标输入获得 

我的小伙伴在写一个功能,需要获得输入的时候,判断是键盘输入或鼠标输入,通过 PreviewTextInput 获得键盘输入就做一些输出。 但是他发现,在使用鼠标...

731
来自专栏Guangdong Qi

小Q-免费的数据能做大事情之UI素材准备未完待续,持续更新中

1686
来自专栏知晓程序

失敬,我的微信语音总是比一般人多 1 秒 | 晓技巧

1333
来自专栏PPV课数据科学社区

推荐30款最佳的数据可视化工具

各个互联网公司通过大量的用户数据、信息进行统计分析,而这些大量繁杂的数据在经过可视化工具处理后,就能以图形化的形式展现在用户面前,清晰直观。随着各种数据...

3625
来自专栏腾讯移动品质中心TMQ的专栏

小心!做UI自动化一定要跨过这些坑

一、引子 UI自动化,在移动互联网时代的今天,一直都是在各大测试测试社区最为火爆的一个TOPIC。甚至在测试同行面前一提起自动化,大家就会自然而然的问:“恩,...

3119
来自专栏MixLab科技+设计实验室

如何制作《超简单的AI自测题》

最近更新了一波轻交互的公众号文章: 第一期 超简单的AI自测题 第二期 喵星人密信 第三期 vim答题卡 第四期 猜拳 今天开始陆续更新一些教程《通过svg标签...

3068
来自专栏全栈数据化营销

不用代码,10分钟采集58同城二手车数据信息

最近得空把之前的一些案例稍微整理一下,之前做的案例有: 案例1:汽车之家网站奔驰宝马宝马信息采集 案例2:天涯论坛各个板块文章信息采集 案例3:豆瓣电影、读书板...

3898
来自专栏葡萄城控件技术团队

用FlexGrid做开发,轻松处理百万级表格数据

表格数据处理是我们项目开发中经常会遇到的设计需求之一,所需处理的数据量也较大,通常是万级、甚至百万级。此时,完全依赖平台自带的表格工具,往往无法加载如此大的数据...

1948

扫码关注云+社区