在过去的几天一直在研究微信的开放数据域，因为我们的项目也用到了好友排行榜的群排行榜功能，我们的项目是用Cocos Creator开发的，所以最终SharedCanvas上的内容还是要绘制到Creator的环境里，如果用纯webGL的形式绘制，我就得抛弃Creator引擎，那会使我的项目开发变得更加困难；
我研究了一下Creator引擎的代码，他有一个类，叫做cc.Texture2D，表示的是2D纹理，这个类，有一个方法叫作initWithElement，源代码如下：
/** * Init with HTML element. * @method initWithElement * @param {HTMLImageElement|HTMLCanvasElement} element * @example * var img = new Image(); * img.src = dataURL; * texture.initWithElement(img); * texture.handleLoadedTexture(); */ initWithElement: function (element) { if (!element) return; this._image = element; this.width = element.width; this.height = element.height; this.loaded = true; } |
意思是，2D纹理，可以通过图片或canvas进行初始化，我写了一段测试代码如下：
var openDataContext = wx.getOpenDataContext(); var sharedCanvas = openDataContext.canvas; sharedCanvas.width = 512; sharedCanvas.height = 2048; //发送消息通知开放数据域，生成sharedCanvas openDataContext.postMessage({ method:'showGroupRank', pageIndex: 1 }); var texture = new cc.Texture2D(); var main = function () { texture.initWithElement(sharedCanvas); texture.handleLoadedTexture(); this.rankSprite.spriteFrame = new cc.SpriteFrame(texture); }; setTimeout(main, 1000); |
运行了一下，居然能够正常输出sharedcanvas的内容，到此为止，终于把sharedcanvas与Cocos Creator的通道打通。
在之前我尝试过webGL的方式，在主域上屏绘制，遇到了不少问题，也请教了微信官方的开发人员，提到了不少帮助，在此表示感谢！
sharedCanvas的尺寸在主域上修改感觉意义不大，因为不知道渲染的好友列表数是多少，翻页其实也不需要设置sharedCanvas的大小。感觉给出的好友排行榜解决方案很烂啊，没人骂么 - -
你好，为什么现在按照这个方法显示不了
@E.N 是cc.Sprite，场景编辑器右边的控件库中也能拖出Sprite控件
this.rankSprite.spriteFrame =newcc.SpriteFrame(texture);请问这里的
this.rankSprite是什么类型的？类型是cc.SpriteFrame吗？@犀牛，sharedCanvas的尺寸，目前只能在主域里改，不能在开放数据域里改
也谢谢楼主@许敬的分享！
这样的限制真是很不人性化啊！好的，明白了。谢谢@冯驰！
你说的这两点目前肯定是不支持的。
第一个问题，就像你说的，我们能采取的手段也只有用定时器。
第二个问题，主域的确不能知道子域里的数据有多少项，所以项数要主域来确定，比如只显示好友排行里的前30名。
但是如果好友排行榜没有超过30个，子域还是按30个来依次绘制，那么滚动列表容器里就会有大片空白，因为对主域来说，没法知道绘制出来的sprite是有内容的还是空白的。 所以这就是为什么比较适合用翻页来表现排行榜。
至于跳一跳，还不知道他的底层是基于“小游戏”还是“小程序”，如果是“小程序”，可能访问排行榜数据没有那么多限制。况且跳一跳是微信小程序的首发应用，可能当时数据接口并没有被这样限制。
@冯驰 再请教一下，按你说的办法，如何从开放数据域中做到让主域知道sharedCanvas是否已经绘完？目前我是用延时一定时间再去获取sharedCanvas，还有我在开放数据域中绘制到最后一项时，主域如何知道已经到最后一项呢？
想要做到也不是不可以，还是一样的思路。每次sharedCanvas只绘制一项，分多次在主域里把他们用sprite实例化出来，把这些sprite放到滚动容器里。