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


    开发中需要考虑到的问题

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

    目前遇到的就是这些

  • 相关阅读:
    P4345 [SHOI2015]超能粒子炮·改 Lucas
    P2480 [SDOI2010]古代猪文 Lucas+CRT合并
    nginx优化之request_time 和upstream_response_time差别
    务器遭受攻击后的一般处理过程
    sublime text修改TAB缩进为空格
    MySQL同主机不同数据库的复制命令
    【已解决】BeautifulSoup已经获得了Unicode的Soup但是print出来却是乱码
    关于mongodb ,redis,memcache
    MySQL DBA 刚入职时如何快速拥抱新的环境
    看linux连接进程占用的实时流量iftop netatop NetHogs
  • 原文地址:https://www.cnblogs.com/white-bull/p/12090310.html
Copyright © 2020-2023  润新知