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

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

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

相关文章

来自专栏杨龙飞前端

scrollto 到指定位置

2534
来自专栏闻道于事

js登录滑动验证,不滑动无法登陆

js的判断这里是根据滑块的位置进行判断,应该是用一个flag判断 <%@ page language="java" contentType="text/html...

6948
来自专栏Golang语言社区

【Golang语言社区】GO1.9 map并发安全测试

var m sync.Map //全局 func maintest() { // 第一个 YongHuomap := make(map[st...

4778
来自专栏张善友的专栏

Mix 10 上的asp.net mvc 2的相关Session

Beyond File | New Company: From Cheesy Sample to Social Platform Scott Hansel...

2597
来自专栏落花落雨不落叶

canvas画简单电路图

63311
来自专栏我和未来有约会

Silverlight第三方控件专题

这里我收集整理了目前网上silverlight第三方控件的专题,若果有所遗漏请告知我一下。 名称 简介 截图 telerik 商 RadC...

4045
来自专栏张善友的专栏

Silverlight + Model-View-ViewModel (MVVM)

     早在2005年,John Gossman写了一篇关于Model-View-ViewModel模式的博文,这种模式被他所在的微软的项目组用来创建Expr...

2988
来自专栏大内老A

The .NET of Tomorrow

Ed Charbeneau(http://developer.telerik.com/featured/the-net-of-tomorrow/) Exciti...

32010
来自专栏pangguoming

Spring Boot集成JasperReports生成PDF文档

由于工作需要,要实现后端根据模板动态填充数据生成PDF文档,通过技术选型,使用Ireport5.6来设计模板,结合JasperReports5.6工具库来调用渲...

1.2K7
来自专栏C#

DotNet加密方式解析--非对称加密

    新年新气象,也希望新年可以挣大钱。不管今年年底会不会跟去年一样,满怀抱负却又壮志未酬。(不过没事,我已为各位卜上一卦,卦象显示各位都能挣钱...)...

4928

扫码关注云+社区