微信小程序开发遇到的问题

Posted 2021-03-20 white-bull

开发中需要考虑到的问题

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中会有左上角没有返回按钮，没有小房子。此问题目前没有解决。（如果有人遇到，麻烦给个解决方式）

目前遇到的就是这些