开发中需要考虑到的问题
1.功能:保存图片到本地,图片上有二维码
点击查看时,这时候已经是个图片,此处也需要做放大预览图片,这样用户点击图片,才能实现长按二维码的功能。
渲染微信昵称时,需要考虑昵称过长问题,昵称中包含中英文,表情等。
渲染canvas时,我用的设计稿是宽750的,裁剪图片时,我是按照设计稿的大小来做的,没有做适配,保存到手机上时,图片会展示全。需要注意裁剪时要考虑dpr.微信文档中有。
保存图片时,要先判断用户是否授权过,不能刚上来就让用户授权。wx.getSetting,具体参数可以查看微信文档。
在展示预览图片时,建议加上loading。这样可以保证canvas绘制完成后再展示,不至于白屏。
2功能:授权
微信有静默获取用户的信息,刚上来不能强制用户授权,这样不友好,而且发布小程序也不利于通过。
一般在用户点击个人中心时再让用户强制授权。建议用wx.relaunch,这样可以保证用户不能回退,不通过授权可以返回到首页。
3功能:下拉刷新
下拉刷新需要刷新列表数据,由于小程序会记录之前的数据。这时候得清空数组,但是此方法不太友好,页面会重新加载。目前还不知道怎么解决。(如果有知道的,麻烦告诉一下)
下拉刷新之后,必须要手动关闭一下刷新。
4.功能:点击图片显示大图
此功能本身并没有问题,微信也提供了wx.previewImage,api可以查看微信文档。但是在点击查看大图之后,页面会触发onHide.取消查看大图,会触发onShow。这样就会导致每次一查看大图就会请求接口,很不友好。
解决方法:在查看大图之后,给一个标识。在onShow中判断这个标识,满足条件可以调接口,不满足,直接return 出去。这样就解决了。
5.功能:页面可以有发送给朋友
这个可以直接页面上设置onShareAppMessage。页面就可以发送给朋友了。需要注意的是发送的时候要带上参数。消息里点击小程序可以再次获取到数据。
6.功能:绘制图片
canvas绘制图片本身也没有问题,按照设计稿的设置就可以了。需要注意的是一段文字里有不同颜色的字。我们需要把这段文字分割成数组字符串,然后挨个计算每个字符应该展示的位置。
ctx.measureText(“博客园”).width。这个方法可以获取到每个字符的宽度。需要注意必须在这段代码前加上ctx.setFontSize(48);,48为要设置的字体大小。这样算出来的宽度才准确。循环渲染中保留每个字符的颜色。ctx.setFillStyle(obj.color),使用这个方法,将字体颜色放进去就可以了。
微信昵称过长,已可以用上述思路来解决。
优化页面问题
1.在接口没有返回之前,用默认的loading太丑,建议可以做个类似页面的灰色块,来提升用户的体验。
2.在微信工具中开发时,button这类的会有默认的padding。建议是重置,高度自己定义。要不会在某些手机里出现兼容问题。
遇到的兼容问题
1.项目中有分享给好友,6s,系统12.1的,会出现边框。
button::after{border:none} 放在代码里就好。
需要注意不要用button[class="button"]::after ,这种写法在这个系统中不生效。所以还是全部去除,如有需要挨个加吧。
2.项目中点击A页面,会用reLauch跳到授权页,授权成功后,会再从授权页跳到A页面。
6s,华为mate20X中会有左上角没有返回按钮,没有小房子。此问题目前没有解决。(如果有人遇到,麻烦给个解决方式)
目前遇到的就是这些