微信开放数据域作为一个独立的项目,与主项目隔离,但保留主域(游戏主项目)向子域(微信开放数据域)的单向通知功能。
具体步骤,分为以下:
1.主域子域整合
1.1 主域挂载。主域的挂载点(显示开放数据域的视窗)添加 Cocos组件‘SubContextView‘
。
1.2 子域创建。子域项目创建的 Canvas 尺寸与主域挂载点的视窗保持相同尺寸比例,即宽高比例相同。且,Canvas 下的 Main Camera 中需设置摄像机透明度为 0,否则在主域中显示,会出现一个黑色背景遮罩。
1.3 构建。由于子域也是一个独立的cocos项目,构建完包体过大,所以主域、子域构建过程需要裁剪一些冗余的引擎(项目-项目设置-模块设置),以减小整体包体。构建过程,需要注意主项目的 “开放数据域代码目录” 与子项目的 “游戏名称” 须相同,子项目的发布路径建议指向主项目的发布包目录下 “开放数据域代码目录” 位置。
2.通信及开放数据获取
2.1 子域监听。子域中调用 wx.onMessage(function callback)
api 来监听主域发送的消息。
2.2 主域通知。主域需要发送通知时,调用 wx.getOpenDataContext()?.postMessage(Object message)
,参考 微信小游戏文档 wx.getOpenDataContext() 部分。
// main.js
wx.getOpenDataContext()?.postMessage({
type: ‘updateMaxScore‘,
score,
})
// sub.js
wx.onMessage(data => {
switch (data.type) {
case ‘updateMaxScore‘: {
// do soming:
break;
}
})
2.3 开放数据获取。在子域中调用 wx.setUserCloudStorage(Object object)
用来存储用户的托管数据(可在主域调用,不建议),调用 wx.getFriendCloudStorage(Object object)
用以拉取全部存储过托管数据的好友的托管数据。
2.4 其他相关数据。除好友数据外,可以获取
潜在好友数据 wx.getPotentialFriendList()
,
用户自己的数据 wx.getUserCloudStorage()
,
用户身份信息 wx.getUserInfo()
,
群同玩成员的游戏数据 wx.getGroupCloudStorage
等。
2.5 绘制列表(好友排行榜),可通过 ScrollView 组件渲染滚动列表。设置微信头像:
/** 微信头像地址不含图片后缀,需要额外补充
* { ext: ‘.png‘ }
*/ 否则无法绘制
setRemoteImage( target: cc.Sprite, url: string, confirm?){
cc.assetManager.loadRemote(url, { ext: ‘.png‘ },(err, texture)=>{
if(err){
console.error("加载失败", err)
}else{
try{
// sprite.spriteFrame = new cc.SpriteFrame(texture);
target.spriteFrame = new cc.SpriteFrame(texture)
confirm && confirm();
} catch (error) {
console.error("加载远程图片错误 == ", error);
}
}
})
}
3.多场景切换
3.1 对于一个项目而言,只有一个子域,不同场景下的不同尺寸形态,可以看做是一个子域所显隐的不同部分,通过 wx.postMessage
通知子域切换。
3.2 子域中,不同尺寸的节点,按照所需尺寸设置。wx.onMessage
收到通知后控制显示隐藏不同的展示节点。并同步设置 Canvas 的尺寸。
/***/
set rankType (type: number) {
this._rankType = value
if(type){
// 形态1
this.node.parent.getComponent(cc.Canvas).designResolution = cc.size(536,358);
this.node.width = 536
this.node.height = 358
}else{
// 形态2
this.node.parent.getComponent(cc.Canvas).designResolution = cc.size(600,850);
this.node.width = 600
this.node.height = 850
}
this.node_fullRank.active = !type
this.node_shortRank.active = !!type
this.node_potential.active = type=== 1
this.node_surpass.active = type=== 2
this.node_topRank.active = type=== 3
}
get rankType () {
return this._rankType
}
/***/
3.3 主域中及时更新视图,否则变更尺寸后会跟随上一个场景的尺寸,导致下一个场景发生拉伸现象
注意
- 子域画布绘制到主域后,默认只在首次更新视图,假如主域的挂载点是在预制体中加载出来,或者有移动过程(弹框的弹出效果),会导致渲染后触摸事件发生偏移,甚至无效。此时需要手动更新视图。
获取主域挂载点的 SubContextView 组件,调用其updateSubContextViewport
、reset
方法即可。参考 SubContextView 类型。
参考 cocos 接入微信小游戏的开放数据域;