1、小程序分享商品,生成商品海报后,适配出现如图问题
2、查看微信官方仿瓤僭蚋资料,推荐开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准,因为iPhone6的换算比较符合习惯。
3、微信小程序提供getSystemInfo(Object object)获取系统信息,可以利用这个官方API获取机型窗口的宽和高,然后根据自己的需求设置宽高比例。
4、生成海报时,再Canvas画布上画内容时,将内容的坐标、宽高、字体大小换算成rpx单位,这样可以根据屏幕宽度进行自适应。
5、对于文字的显示处理,是通过计算宽度之后,进行换行显示
6、最后把所有的内容画出来,使用不同机型测试,显示正常,适配问题解决