分享教程:微信小程序如何生成自适应海报?

春哥技术教程分享:相信小伙伴们在开发微信小程序的过程都会发现,小程序canvas的API并没有像其他的一样支持小程序独有的 rpx 自适应尺寸单位,在绘制内容时所应用的单位仍然是 px,那么如何实现不同尺寸屏幕的自适应呢?今天春哥团队技术尘飞和大家分享下解决方法。
分享教程:<a href=https://www.cgtblog.com/e/tags/?tagid=1079 target=_blank class=infotextkey>微信小程序</a>如何生成自适应海报?

首先,我们根据开发工具可知不同常用屏幕的尺寸:

分享教程:<a href=https://www.cgtblog.com/e/tags/?tagid=1079 target=_blank class=infotextkey>微信小程序</a>如何生成自适应海报?

由此可知,我们开发中常用的参考屏幕尺寸(iPhone6)为:375*667;

那么,想要适应其他尺寸的屏幕时只需按照iPhone6的绘制大小按比例进行换算即可:

首先,利用wx.getSystemInfo (获取系统信息)的API获取屏幕宽度,然后除iPhone6的屏幕宽度,即可得到相对单位。


var rpx; //获取屏幕宽度,获取自适应单位
wx.getSystemInfo({
  success: function(res) {
    rpx = res.windowWidth/375;
  },
})

在绘制方法中,将参数乘以相对单位即可实现自适应:

const s = wx.createCanvasContext("canvas");
s.drawImage(Url, 0, 0, 265 * rpx, 262.5 * rpx)

教程比较简单,希望可以帮到大家,如果有更多问题、心得,欢迎到春哥技术源码论坛交流、讨论。

来源:春哥技术博客,欢迎分享,(春哥微信号:cgnanyin)
上一篇:关于小程序自定义弹层禁止页面滚动的      下一篇:Error: 非法的文件,错误信息:以"__"开头