Egret白鹭项目接入微信轻量级的Canvas渲染引擎（支持滚动的开放数据域UI绘制解决方案）

最新推荐文章于 2025-09-11 20:03:09 发布

原创

最新推荐文章于 2025-09-11 20:03:09 发布 · 2.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#微信 #开放域 #好友榜

针对微信小游戏开发中遇到的界面缩放显示异常和界面被裁剪的问题，本文提供了详细的解决方案，包括修改platform.js中的代码来调整共享画布的尺寸和比例，确保在不同设备上都能正常显示。

微信官方团队发布了开放数据域UI绘制解决方案，详情请戳这里：

使用白鹭项目接入过程中可能会遇到2个坑（使用官方提供的测试用例），下面提供解决办法：

1、界面缩放显示异常
先放正常效果图：
在这里插入图片描述
异常效果图如下

原因是 sharedCanvas 里面绘制的是内容为960px，和白鹭画布有个转换关系，需要对bitmap进行缩放。
在platform.js 加上这一句解决问题：

bitmap.scaleX = bitmap.scaleY = sharedCanvas.width/960;

2、在部分机型下界面被裁剪（比如iphone5、iphon6 等低分辨率机型）
异常效果图如下
在这里插入图片描述
原因是 sharedCanvas 里面绘制的是内容为960px，而手机真实分辨率低于960，不够面积用于绘制，故要对sharedCanvas尺寸进行修改，设置成960宽。
在platform.js 加上下面代码：

if(sharedCanvas.width < 960){
   
   
	let data = wx.getSystemInfoSync();
	sharedCanvas.width = 960;
	sharedCanvas.height = 960 * data.windowHeight/data.windowWidth;
	sharedCanvas.style.width = sharedCanvas.width