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

微信官方团队发布了开放数据域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 + 'px';  sharedCanvas.style.height = sharedCanvas.height + 'px'; } 

在openDataContext/index.js 加上下面代码进行事件侦听，在打开排行榜时需要强制绘制

wx.onMessage((data) => { init(); }); 

修改完之后，就能看到正常效果了。

最后，附上 platform.js 里面 WxgameOpenDataContext class的完整代码

class WxgameOpenDataContext { createDisplayObject(type, width, height) { if(sharedCanvas.width < 960){ let data = wx.getSystemInfoSync();    sharedCanvas.width = 960;    sharedCanvas.height = 960 * data.windowHeight/data.windowWidth;    sharedCanvas.style.width = sharedCanvas.width + 'px';    sharedCanvas.style.height = sharedCanvas.height + 'px'; } const bitmapdata = new egret.BitmapData(sharedCanvas);         bitmapdata.$deleteSource = false; const texture = new egret.Texture();         texture._setBitmapData(bitmapdata); const bitmap = new egret.Bitmap(texture);   console.log(width,height);         bitmap.width = width;         bitmap.height = height;      bitmap.scaleX = bitmap.scaleY = sharedCanvas.width/960; if (egret.Capabilities.renderMode == "webgl") { const renderContext = egret.wxgame.WebGLRenderContext.getInstance(); const context = renderContext.context; ////需要用到最新的微信版本 ////调用其接口WebGLRenderingContext.wxBindCanvasTexture(number texture, Canvas canvas) ////如果没有该接口，会进行如下处理，保证画面渲染正确，但会占用内存。 if (!context.wxBindCanvasTexture) {                 egret.startTick((timeStarmp) => {                     egret.WebGLUtils.deleteWebGLTexture(bitmapdata.webGLTexture);                     bitmapdata.webGLTexture = null; return false; }, this); } } return bitmap; } postMessage(data) { const openDataContext = wx.getOpenDataContext();         openDataContext.postMessage(data); } }  WxgamePlatform.prototype.name = 'wxgame'; WxgamePlatform.prototype.openDataContext = new WxgameOpenDataContext();  window.platform = new WxgamePlatform();