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

微信官方团队发布了开放数据域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();