手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

微信小程序生成商品海报后适配问题解决方案

时间:2024-10-12 21:27:31

1、小程序分享商品,生成商品海报后,适配出现如图问题

微信小程序生成商品海报后适配问题解决方案

2、查看微信官方仿瓤僭蚋资料,推荐开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准,因为iPhone6的换算比较符合习惯。

微信小程序生成商品海报后适配问题解决方案

3、微信小程序提供getSystemInfo(Object object)获取系统信息,可以利用这个官方API获取机型窗口的宽和高,然后根据自己的需求设置宽高比例。

微信小程序生成商品海报后适配问题解决方案

4、生成海报时,再Canvas画布上画内容时,将内容的坐标、宽高、字体大小换算成rpx单位,这样可以根据屏幕宽度进行自适应。

微信小程序生成商品海报后适配问题解决方案

5、对于文字的显示处理,是通过计算宽度之后,进行换行显示

微信小程序生成商品海报后适配问题解决方案

6、最后把所有的内容画出来,使用不同机型测试,显示正常,适配问题解决

微信小程序生成商品海报后适配问题解决方案
微信小程序生成商品海报后适配问题解决方案
© 手抄报圈