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

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

通过后台接口可以获取小程序任意页面的二维码，具体可以参考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生成带图片的二维码就完成了，接下来让我们把生成的图片保存下来

 

 

六、保存图片

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