《Days》核心代码总结（二）
继续增加功能的同时，进行小程序的学习，发现若干小程序自身的BUG。
1、canvas绘制后，不管层级如何都会覆盖在button组件上面，导致button无法显示出来，通过canvas绘制一个假button的方式解决。
2、因为1，分享按钮这个功能无法在这种场景实现，只能右上角转发。
3、canvas的putImageData方法无法到处到图片，通过先将图片信息绘制到临时文件，再将临时文件绘制到canvas解决。
4、canvas中，自定义字体无法生效，暂时无法解决。
5、wxss中通过border-(bottom、top、left、right)系的属性形成的箭头，无法显示，暂时无法解决。
===========================================================
进入正题，这次更新新增了信件功能，同样是网站功能之一，通过读取二维码或者微信的小程序分享链接，可以显示信件内容。
另外优化了addTarget、getTarget两个云函数，告别switch地狱了w同时发现云函数的更改对小程序影响挺大的，因为它和小程序代码互相独立，控制起来无法像体验版那样经测试后再发布出来，当然这也是云函数的灵活之处，某些功能用云函数来实现的话，应该可以不用再走小程序的审核程序w
so，本次总结两个知识点，信件功能和云函数的改造：
一、信件功能
界面直接用了counters的样式，写好的信件通过canvas生成带二维码的图片，可以在收信功能中扫码或读图进入，也可以通过分享方式，点击进入。
有以下几个功能点：canvas生成二维码卡片、读卡片后显示信件内容、通过分享链接点击进入。读卡片比较简单，不再赘述。
生成二维码卡片：
canvas是小程序的原生组件，bug比较多，个人认为远没有达到好用的程度，和html5的标准比还有很大差距。
canvas是网页上的画布，自己本身不能作画，需要先通过上下文context描述，然后使用context.draw（）向canvas绘制，draw后面的参数中可以跟一个回调函数，canvas类似于logo语言的网页实现，canvas的覆盖顺序是先到的在下面，渲染顺序看完成时间，所以需要人工对多层的绘制进行控制。绘制前，用ctx.save()保存上下文，结束后用ctx.restore()恢复，保持样式可控。
绘制过程如下：
1 2 3 4 5 6 7 8 9 10 11 12 | //声明上下文 const ctx=wx.createCanvasContext('myCanvas') //保存上下文 ctx.save() //设置样式 ctx.setFillStyle('style') //填充 ctx.fillRect(x, y, width, height) //恢复上下文 ctx.restore() //绘制 ctx.draw() |
分享链接点击进入：
在小程序中，分别对背景、文字、二维码按顺序进行绘制，其中，二维码提前用一个canvas生成，使用wx.canvasToTempFilePath导出为临时文件，再用context.drawImage绘制到目标canvas中。
由于按钮无法显示在canvas之上，分享操作需要点击右上角的‘···’进行转发，转发时，附带存入信息的参数：
1 2 3 4 5 6 7 8 | onShareAppMessage: function (res) { ··· return{ title:'A letter to '+that.data.receiver, path:'/page/letter/letter?id='+that.data.id } ··· } |
在letter页面的onLoad接收参数：
1 2 3 4 5 | onLoad: function (options) { ··· that.getLetter(options.id) ··· } |
二、云函数的改造
没改造前，通过switch挨个配置，代码堆叠到令人发指的量，so进行改造。原理很简单，把要传入的参数全部通过对象进行传入，早该这么做了OTZ
原调用写法：
1 2 3 4 5 6 7 8 9 10 | wx.cloud.callFunction({ ··· data:{ key1:val1, key2:val2, ... keyn:valn, table:'table_name' }, ··· |
现调用写法：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | that.setData({ request:{ key1:val1, key2:val2, ... keyn:valn } }) wx.cloud.callFunction({ ··· data:{ datas:that.data.request, table:'table_name' }, ··· }) |
云函数改造方式相同，直接引入datas
原写法：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | addTarget: ··· db.collection(event.table).add({ data: { key1:val1, key2:val2, ... keyn:valn } }) ··· getTarget: ··· db.collection(event.table).where({ key1:val1, key2:val2, ... keyn:valn }).get() ··· |
现写法：
1 2 3 4 5 6 7 8 9 10 | addTarget: ··· db.collection(event.table).add({ data: event.datas }) ··· getTarget: ··· db.collection(event.table).where(event.datas).get() ··· |
另外居然从小黄油网站上学到了先进的前端知识OTZ
以上。
参考文献：
微信小程序将字符串生成二维码图片
【51小程 序】canvas 没法使用分享button
微信小程序之生成图片分享
Html5 Canvas的putImageData问题
小程序canvas生成海报保存至手机相册
canvas总结：线段宽度与像素边界
小程序初踩坑
HTML 5 canvas font 属性
微信小程序如何生成朋友圈分享图片案例实现方案
微信小程序从入坑到放弃之坑十一：wx.canvasToTempFilePath的坑
オトメ＊ドメイン
评论