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

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

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 条评论
登录 后参与评论

相关文章

来自专栏王磊的博客

nodejs常用组件

mssql 用途:连接SqlServer数据库 node-excel-export 用途:导出excel表格 nodegrass 用途:模拟用户进行get/po...

2546
来自专栏iKcamp

微信小程序教学第三章(含视频):小程序中级实战教程:列表-静态页面制作

§ 列表 - 开发准备 本文配套视频地址: https://v.qq.com/x/page/f0554syejjd.html 开始前请把 ch3-1 分...

2098
来自专栏python3

nginx拒绝某个ip访问

704
来自专栏腾讯Bugly的专栏

H5 直播避坑指南

本文来自“小时光茶社(Tech Teahouse)”公众号 作者简介: 文赫,2015年加入腾讯,作为前端开发工程师参与过手Q游戏公会,游戏中心,企鹅电竞等项目...

3488
来自专栏java思维导图

扫码登录是如何实现的?

网页版微信刚推出时,无数人被它的登录方式惊艳了一下,不需要输入用户名密码,打开手机微信扫一扫,便自动登录。从原理上讲,二维码只能是一段文本的编码,如何用它实现快...

982
来自专栏Python中文社区

scrapy爬取免费代理IP存储到数据库构建自有IP池

有一部分网站是通过检测同一IP短时间内多次访问同一页面来进行反爬虫,为了应对这种反爬虫机制,使用IP代理就可以解决。可以利用scrapy写一个爬虫,爬取网上免费...

2255
来自专栏Jerry的SAP技术分享

如何用Chrome自带的截屏功能截取超过一个屏幕的网页

前端开发人员经常需要将当前的网页截图发给产品经理讨论。如果网页很长,一个屏幕显示不下,那么操作系统自带的截图功能就没有办法截取整个屏幕了。

651
来自专栏mathor

最快最好用的文件搜索工具——Everything

502
来自专栏张戈的专栏

PHP制作百度站内搜索绿色通道的网页列表数据文件

用过百度站内搜索的朋友,都知道前不久推出了一个绿色收录通道,改善站内搜索的时效性和覆盖率,说明如下: 站内搜索结果数太少?最新的页面搜不到?您可以在本页面提交数...

3137
来自专栏QQ会员技术团队的专栏

H5直播避坑指南

面对着产品同学不断的询问:为什么 h5 的体验这么差?为什么不能和 app 的播放体验保持一致?我们对着 h5 不明确的文档和不同浏览器的怪异表现欲哭无泪。

40812

扫描关注云+社区