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

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

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

相关文章

来自专栏开源项目

揭秘程序员眼中的 Vue 与 Angular | 码云周刊第 32 期

揭秘程序员眼中的 Vue 与 Angular 一 基于 Vue 的项目 1. 项目名称:基于 Vue.js 的 UI 组件库 ? 项目简介:iView 是一套...

40550
来自专栏Hongten

pygame系列_百度随心听_完美的UI设计

=====================================================

7830
来自专栏ytkah

iphone如何导出微信聊天记录到电脑?

  有个小美眉买了个iphone,但发现自己就是一小白,很多功能都不会用,微信倒是用得挺上手的,可以晚上聊到三四点,流量直接飙升500MB。最近她说手机太卡了,...

1.3K50
来自专栏繁花云

巧用js替换某些不能替换的文字

在运行某些程序时,作者为了保护版权,将版权文字进行了特殊处理,使得我们无法进行修改。

16000
来自专栏FD的专栏

前端下半场:构建跨框架的 UI 库

跨框架的 UI 库,即前端 UI 库可以不经任何修改,直接能运行在 React、Angular、Vue 等框架上。

12110
来自专栏腾讯社交用户体验设计

微信小程序初体验(上)

37620
来自专栏杨俊标的专栏

【HTML插件】帮你100%还原设计

Contrast.js插件主要用于检验移动端Web重构还原度,由于大部分设计稿是基于iPhone6以上(1334 x 750)设计的,所以该插件比较适合用iPh...

25320
来自专栏知晓程序

开发 | 掌握这 7 个要点,iOS 开发者也能快速入门小程序

16930
来自专栏IMWeb前端团队

切图工具/插件介绍

本文作者:IMWeb moonye 原文出处:IMWeb社区 未经同意,禁止转载 切图工具 切图插件 这里的插件都是ps的插件,比较小巧,易于安装和适...

41780
来自专栏小特工作室

WinForm中播放视频示例(含源码)

1背景 这几天一老友要求我做个小软件,在WinForm播放视频.印象中微软有个WM控件直接可以使用,晚上研究下 2实现方式 2.1微软草根 最简单的方式,是...

24260

扫码关注云+社区

领取腾讯云代金券