微信小游戏关系链能不能获取到服务器,【微信小游戏】关系链数据概念篇(示例代码)...

一、前提

微信小游戏主打社交玩法,为了丰富社交玩法我们肯定会用到关系链数据来做好友排行帮,群排行榜等功能。本篇主要介绍概念同时划重点,

二、概念

一个微信用户的关系链数据包括两部分:

该用户好友的用户数据

该用户所在的某个群的群成员的用户数据。

2)常用的API:

注意:

2、开放数据域

开放数据域是一个封闭、独立的 JavaScript 作用域。要让代码运行在开放数据域,需要在 game.json 中添加配置项 openDataContext 指定开放数据域的代码目录。

{"deviceOrientation": "portrait","openDataContext": "src/myOpenDataContext"}

同时还需要在该目录下创建 index.js 作为开放数据域的入口文件,其代码运行在开放数据域。game.js 是整个游戏的入口文件,其代码运行在 主域。对应以上配置,应该有如下的目录结构:

├── src|└── myOpenDataContext|├── index.js|└── ...

├── game.js

├── game.json

└── ...

src/myOpenDataContext 是 开放数据域的代码目录,除 src/myOpenDataContext 以外是 主域的代码目录。

主域和开放数据域中的代码不能相互 require。以如下的目录结构为例:

├── src|└── myOpenDataContext|├── index.js|├── util.js|└── ...

├── lib|└── render.js

└── game.js

在 game.js 中不能 require(\'src/myOpenDataContext/util\')

在 src/myOpenDataContext/index.js 中不能 require(\'../../lib/render.js\')

3、主域和开放数据域的通信

开放数据域不能向主域发送消息。

主域可以向开放数据域发送消息。调用 wx.getOpenDataContext() 方法可以获取开放数据域实例,调用实例上的

//game.js

let openDataContext =wx.getOpenDataContext()

openDataContext.postMessage({

text:\'hello\',

year: (newDate()).getFullYear()

})

在开放数据域中通过

//src/myOpenDataContext/index.js

wx.onMessage(data =>{

console.log(data)/*{

text: \'hello\',

year: 2018

}*/})

4、展示关系链数据

如果想要展示通过关系链 API 获取到的用户数据,如绘制排行榜等业务场景,需要将排行榜绘制到 sharedCanvas 上,再在主域将 sharedCanvas 渲染上屏。

6a1882d9392b43298420ac7b74fb8164.jpg

//src/myOpenDataContext/index.js

let sharedCanvas =wx.getSharedCanvas()functiondrawRankList (data) {

data.forEach((item, index)=>{//...

})

}

wx.getFriendUserGameData({

success: res=>{

let data=res.data

drawRankList(data)

}

})

sharedCanvas 是主域和开放数据域都可以访问的一个离屏画布。在开放数据域调用 wx.getSharedCanvas() 将返回 sharedCanvas。

//src/myOpenDataContext/index.js

let sharedCanvas =wx.getSharedCanvas()

let context= sharedCanvas.getContext(\'2d\')

context.fillStyle= \'red\'context.fillRect(0, 0, 100, 100)

在主域中可以通过开放数据域实例访问 sharedCanvas,通过 drawImage() 方法可以将 sharedCanvas 绘制到上屏画布。

//game.js

let openDataContext =wx.getOpenDataContext()

let sharedCanvas=openDataContext.canvas

let canvas=wx.createCanvas()

let context= canvas.getContext(\'2d\')

context.drawImage(sharedCanvas,0, 0)

5、限制

当小游戏启动开放数据域,即在 game.json 中添加 openDataContext 配置项时。小游戏环境会对主域和开放数据域应用一些限制。

1)主域

sharedCanvas 只能被绘制到上屏 canvas 上。

上屏 canvas 不能调用 toDataURL,其 context 不能调用 getImageData。

sharedCanvas 不能调用 toDataURL 和 getContext。

不能将上屏 canvas 和 sharedCanvas 以任意形式绘制到其他 canvas 上,包括 drawImage、createPattern、texImage2D、texSubImage2D。

70558392a5c5428391e3bf4e6f854907.jpg

2)开放数据域

开放数据域只能调用有限的 API,如下所示:

帧率

Timer

触摸事件

画布

开放数据域的所有 canvas 只支持 2d 渲染模式

图片

开放数据域的 Image 只能使用本地或微信 CDN 的图片,不能使用开发者自己服务器上的图片。对于非本地或非微信 CDN 的图片,可以先从主域 wx.downloadFile() 下载图片文件,再通过 wx.postMessage() 把文件路径传给开放数据域去使用。

开放数据

监听主域消息

三、总结

1、如果没有自己的服务器,然而还想做排行榜,那必须用到小游戏的开放数据域,开放数据域与主域之间不能相互require,是一种隔离的状态。

2、开放数据域可通过API获取到好友,群排行数据,获取到数据后,可以将内容绘制到离屏画布。

3、这时主域可以通过开放数据域实例访问离屏画布,然后通过drawImage将离屏画布绘制到上屏画布。

四、最后

欢迎加入QQ群:418177552

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值