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

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

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

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

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

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

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

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

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

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

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

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

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

微信小程序生成商品海报后适配问题解决方案微信小程序生成商品海报后适配问题解决方案
  • 怎么设置群公告
  • 脚气方系列一:自制土槿皮浸液
  • 怎样组织一场成功的展会?
  • 狗狗配种后多久之内吃避孕药管用
  • 宝马320i油泵继电器在什么位置
  • 热门搜索
    有关母亲节的手抄报 英语万圣节手抄报 二年级国庆节手抄报 关于节约的手抄报 争做最美学生手抄报 读书小报手抄报图片 安全教育手抄报资料 岭南文化手抄报 中国传统美德手抄报 心理健康手抄报素材