微信小程序
布局
原因
在开发虎芽足球小程序的过程中,发现有一些布局会造成页面闪动,比如有一张图片和一段文字需要上下左右居中,由于图片需要请求,无论是本地加载还是线上加载,所以用flex布局时,在图片还在请求加载时,文字是上下左右居中的,而图片请求加载成功时,图片会显示出来,文案会不再在原来的位置,所以会有这么一个闪动的bug。
方案
使用一个开关变量,控制除了图片之外的段落、文案或者是整块儿内容,开始隐藏,使用Image标签的onload事件,等待图片加载完成显示之后,再将图片之外的段落、文案或者是整块儿内容显示出来。
图片加载
原因
在开发虎芽足球小程序的过程中,发现当图片体积过大时,比如3M或者4M的图片,电脑开发者工具不会出现任何问题,但是在手机预览的小程序加载过程中,会造成页面白屏,甚至是闪退;
后来发现是因为图片占据了小程序甚至是微信大量的内存,导致页面闪屏,最后微信也承受不住,导致闪退;
最后发现小程序最多能承受图片体积的大小为500kb。
方案
- 后台系统上传图片体积大小做限制,图片最大只能传500kb
- 前端小程序图片压缩做处理,添加阿里OSS后缀进行图片的缩放、剪切以及像素的压缩
登录,并与后端服务器接口建立会话
原因
最近发现不少的小程序项目都存在入口app.js使用storage本地存储后端服务器接口返回的set-cookie建立用户会话,由于大部分用的都是异步storage本地存储(setStorageSync getStorageSync),导致当进入页面时,去请求接口获取存储的cookie时,发现并不能获取到。因为实际上这时候异步本地存储并没有存储下来,且项目和页面的渲染生命周期又是同步的,所以导致了此问题。
方案
我之前也遇到这种问题,不论是在原生的微信小程序还是taro 微信小程序框架里面,我总体的方案是,将登录以及与后端服务器建立会话的接口放在页面的入口做,比如小程序在普通编译时,默认进入的页面(就是入口)放入登录和会话接口,这时候既将set-cookie值放入异步storage本地存储中,又将set-cookie值放入当前入口页面的某一个状态中,并做同步处理(这时候你应该懂了)。
在Taro中,我们既可以放入state状态中,并将下一步调用的接口放入setState方法的第二个同步方法参数中;又可以放入redux store页面状态中,并做async await或者yield *同步处理。
获取手机号
详情
最近在开发虎芽小程序时,有获取用户手机号的需求,原以为和获取用户信息一样,只要通过按钮getUserInfo授权,并存入数据库,就可一劳永逸,后来发现getUserInfo授权并不能获取用户的手机号,还需要通过按钮getPhoneNumber授权,且还需要与后台配合解密,才能获取真正的手机号。