微信小程序生成带二维码图片

一、如何生成小程序分享页面的二维码?

通过后台接口可以获取小程序任意页面的二维码,具体可以参考https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/qr-code.html

通过该接口生成的小程序码,永久有效,数量暂无限制。用户扫描该码进入小程序后,开发者需在对应页面获取的码中 scene 字段的值,再做处理逻辑。使用如下代码可以获取到二维码中的 scene 字段的值。调试阶段可以使用开发工具的条件编译自定义参数 scene=xxxx 进行模拟,开发工具模拟时的 scene 的参数值需要进行 urlencode

另外通过二维码扫进去的page是已经发布的小程序存在的页面

 

二、初始化自适应配置

微信小程序生成带二维码图片

这里我量了下背景图的宽高比,再根据设备宽高去计算生成图片的宽高,适配所有尺寸,水平居中点的话为了方便之后定位居中的二维码和文案,而文案和二维码的Y轴坐标都是自己量出来的比例。

 

 

微信小程序生成带二维码图片

微信小程序生成带二维码图片

注意展示出来的图片是通过image而不是canvas,canvas通过定位移出了可视区域,因为canvas不好控制位置和显示隐藏, canvas和image都要绑定初始化生成的宽高,不然展示的图片大小是会有问题的。

 

 

三、生成小程序二维码

微信小程序生成带二维码图片

 

再强调一遍,这里生成的二维码扫进去的页面必须是已发布小程序存在的页面!!!

 

四、获取图片展示图片的URL

微信小程序生成带二维码图片

通过微信api获取展示图片url数组。

 

五、绘制canvas

 

微信小程序生成带二维码图片

 

微信小程序生成带二维码图片

setTextAlign这个api可以通过坐标点来对齐文案,这样就方便很多了。

canvasToTempFilePath是把画出来的canvas转化成图片地址,到此通过canvas生成带图片的二维码就完成了,接下来让我们把生成的图片保存下来

 

 

六、保存图片

微信小程序生成带二维码图片

保存图片比较简单,这里就不多说了。