专业 靠谱 的软件研发伙伴

您的位置:首页 > 新闻动态 > 开发微信小程序中的海报制作功能时的几个问题

发布日期:2020-07-24

开发微信小程序中的海报制作功能时的几个问题


原文发布于我的个人博客(http://ifaluo.site)。
—————————————————————————————————————
昨天(20191010)发布上线的“倒数节点”1.2.3版中新增了“纪念图”制作的功能。其实大多数人更习惯把它叫做海报。一般是商家将自己的商品或者要推广的内容和用户的基本信息(比如头像或用户名)绑定在一起生成一张图片,诱导用户发送出去,起到宣传作用。我根据实际情况,对这种功能稍微修改了一下,改成用户选择自己喜欢的图片做为背景,配合要自己关注的事件日期一起合成一张海报保存到手机中,做为纪念。当然我也会写上“倒数节点”的宣传语,但是放到了最下面,也就是说最最容易被用户剪掉的位置。功能简单,开发起来却并不是一帆风顺的,有坑。还是和以前一样,对于偏技术的话题我只说解决思路,尽量不写代码。

核心的问题是wx.chooseImage();。这一API会打开系统的图片选择页面,官方帮助文档在这里。按照网友们的说法是它会“引发底层bug”。因为它调用的是系统的方法,选择好图片后再返回小程序时,会重新调用onLaunch(),onShow()等方法。我第一次尝试用这个API时把代码写到了onShow()方法里,导致的结果是不断弹出选择图片对话框,连关闭开发工具的机会都没有,死循环。最后只能用任务管理器结束开发工具的进程。解决这一问题的方法也很简单,别写在onShow()里。最终我把它写到了一个按钮的事件中。

目前看来,图片选择的问题好像解决了?其实并没有。

接下来,我要把从手机中选择的图片绘制到画布(Cavnas)中,直接使用CanvasContext.drawImage();就可以搞定了,官方帮助文档在这里。代码写好,传到手机中测试时发现选择好的图片并没有被绘制在画布中。是我代码写错了吗?并不。没有语法错误也没有逻辑错误。调试了一下才发现,原来我向drawImage方法传入的是一个空字符串,所以无法绘制图片。为什么是空的呢?原因还是出在wx.chooseImage()上。我选择图片后,小程序重新执行了一遍生命周期的方法,刚刚选择的图片并没有被保存到下来,等于我白选了。对于这一问题,我是没有想到更好的解决办法,只能将用户选择好的图片先保存下来,等到重新调用onShow()方法时再读取一遍。如图:

小程序开发

重新保存

util.rewriteCDData();是我封装的wx.setStorageSync();方法,可以将一些数据写入到手机中。我每次写入时都会把之前的数据清除掉,所以不用担心多次写入后数据变多。现在图片选择的问题是解决了,但是“噩梦”没有结束,接下来还有照相的问题。

注意看上图中的sourceType参数,我只在数组中写了一个'album',也就是说只可以选择手机中的图片。其实还可以再加一个参数—— 'camera',代表可以直接通过照相获取。

小程序开发

camera参数

我的设想是这样的:用户打开选择图片页面->选择“拍摄照片”->刚刚拍好的照片自动被选择->点击“完成”按钮返回到小程序->照片就已经被绘制到了画面中。

然而实际情况是这样的:用户打开选择图片页面->选择“拍摄照片”->刚刚拍好的照片自动被选择->点击“完成”按钮返回到小程序->直接跳回了首页!跳回了首页!!??WHY??

在花了大概1秒钟思考后,猜测原因是:照完相后点击“确定”按钮时等于重新打开小程序,所以我设想中的连贯体验是无法完成的,在打开相机页面的一瞬间就断掉了。解决办法嘛……我看还是不解决了。不完整的功能还不如不要,另外也可以先拍照,再打开我的小程序做图,虽然步骤变多了,更是功能还是能达到用户的预期目的。

至此,wx.chooseImage()相关的问题我就都处理完了。有解决的,有绕过的。用户可以在我的小程中直接制作海报,把自己关注的时候保存下来。在满足需求的前提下,我觉得一切方法都可以尝试,不能硬磕。关于相机的问题,我还得继续研究,不知道有没有大神能帮我指点迷津,小弟感激不尽。接下来要做得是,海报的样式还不算美观,用户的选择余地也不多。比如还不能选择字号和文字颜色,也没有其它修饰。这些都是我要解决的,但这属于设计的范畴啦。做独立开发就是这样,实际的编码问题只占一小部分,需求、设计、维护占很大比重。努力吧。


推荐阅读: