微信小游戏开放域之helloworld

---

标签: 微信小游戏，开放域

---

微信小游戏-开放数据域的配置

概念

开放数据域 是一个封闭、独立的 JavaScript 作用域。开放数据域主要作用就是获取用户的关系链数据，并且展示关系链数据
具体使用方法在官方文档已经非常详细了-》开放数据域本文只是做一个简单整理
具体的展示关系链数据

配置方法

1、新建开放数据域的代码目录，以openDataContext为例，在目录下新建index.js作为开放数据的入口文件
2、在game.json中添加配置项 openDataContext

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

enter description here

开放数据域限制

1、主域和开放数据域中的代码不能相互 require
2、wx.getUserCloudStorage、wx.getFriendCloudStorage() 和 wx.getGroupCloudStorage() 只能在 开放数据域 中调用。
3、wx.setUserCloudStorage() 和 wx.removeUserCloudStorage() 可以同时在 主域 和开放数据域中调用。
4、开放数据中不能修改sharedCanvas的宽高，如有需要，请在上屏canvas修改sharedCanvas的宽高
5、sharedCanvas只能被上屏canvas渲染
6、开放数据域不能向主域发送消息
7、sharedCanvas 不能调用 toDataURL 和 getContext。
8、开放数据域的所有 canvas 只支持 2d 渲染模式
9、开放数据域的 Image 只能使用本地或微信 CDN 的图片，不能使用开发者自己服务器上的图片

主域限制

1、主域不能调用wx.getUserCloudStorage、wx.getFriendCloudStorage() 和 wx.getGroupCloudStorage() ，也就是说主域不能直接获取用户关系链数据，必须通过开放数据域获取，再渲染到sharedCanvas上

主域和开放数据域的通信

开放数据域不能向主域发送消息，主域可以调用开放数据域实例的postmassage()方法向开放数据域发送消息

// main.js
let openDataContext = wx.getOpenDataContext()
openDataContext.postMessage({
  text: 'hello',
  year: (new Date()).getFullYear()
})

在开放数据域中通过 wx.onMessage() 方法可以监听从主域发来的消息。

// src/openDataContext/index.js
wx.onMessage(data => {
  console.log(data)
  /* {
    text: 'hello',
    year: 2018
  } */
})

微信小游戏 —— 关系链数据使用(排行榜的显示)

前言

微信小游戏属于微信小程序的一个类目，小游戏对比于普通的h5游戏，其很大的一个特点是微信提供的关系链数据的使用，你可以获得同玩这个游戏的微信好友的数据，或者你在某个群的用户数据

概念

具体概念请前往-》关系链数据使用指南
需要了解关系链api和开放域，主域等概念。以下着重介绍具体的api使用

wx.setUserCloudStorage() 托管用户数据

ps: wx.setUserCloudStorage()接口在主域和开放数据域都可以使用

enter description here

wx.setUserCloudStorage({
    KVDataList: [{ key: 'score', value: score }],
    success: res => {
        console.log(res);
        // 让子域更新当前用户的最高分，因为主域无法得到getUserCloadStorage;
        let openDataContext = wx.getOpenDataContext();
        openDataContext.postMessage({
            type: 'updateMaxScore',
        });
    },
    fail: res => {
        console.log(res);
    }
});

注意： KVDataList的value必须是字符串String类型，否则会报错

enter description here

托管数据的限制
每个openid所标识的微信用户在每个游戏上托管的数据不能超过128个key-value对。
上报的key-value列表当中每一项的key+value长度都不能超过1K(1024)字节。
上报的key-value列表当中每一个key长度都不能超过128字节。

wx.getFriendCloudStorage（）拉取当前用户所有同玩好友的托管数据（开放数据域使用）

ps: 这个接口只能在开放数据域使用，即主域无法调用接口获取好友数据

wx.getFriendCloudStorage({
    keyList: ['score', 'maxScore'], // 你要获取的、托管在微信后台都key
    success: res => {
        console.log(res.data);
    }
});

获取到的数据如下：

enter description here

绘制好友排行榜

没错，用你的canvas技术将获取到的好友数据绘制到sharedCanvas上。sharedCanvas是微信默认提供的，不需要再次创建

// src/OpenDataContext/index.js
let sharedCanvas = wx.getSharedCanvas()

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

wx.getFriendCloudStorage({
  success: res => {
    let data = res.data
    drawRankList(data)
  }
})

绘制后如何显示以及会遇到的问题？
需要在上屏canvas上通过drawImage()方法把这个sharedCanvas绘制到上屏canvas
主域的js：

//前提是要使用Wxkit
let openDataContext = this.linkOpenData({},"这里传宽度","这里传高度");
this.openDataContext = openDataContext;
this.addChild(openDataContext)

实际操作

首先把你的项目发布为微信小游戏项目

enter description here enter description here enter description here
之后会报错误，这里不用管就行了
然后在mian.js里面加代码

 

public createGameScene(){
    //本来的代码
     //发信息给开放域，加载数据
        let openDataContext = wx.getOpenDataContext()
            openDataContext.postMessage({
            text: 'hello',
            year: (new Date()).getFullYear(),
            command:'loadRes',
        })

        let that = this;
    //这里是让开放域的数据先加载好
        setTimeout(function() {
        //调用linkOpenData方法
            let openData = that.linkOpenData({},that.stage.width,that.stage.height);
            that.addChild(openData)
        }, 2000);
}

//添加方法
 public  linkOpenData(message: {}, width?: number, height?: number, data?: Object) {
        console.log('调用开放数据域')

        let basic = {
            isRanking: false,
            text: "egret",
            data: data,
            year: (new Date()).getFullYear(),
            command: "open"
        }

        for (let key in message) {
            basic[key] = message[key];
        }

        let open_data_container = new egret.Sprite();
        let openDataContext = wx.getOpenDataContext();
        const bitmapdata = new egret.BitmapData(window["sharedCanvas"]);
        bitmapdata.$deleteSource = false;
        const texture = new egret.Texture();
        texture._setBitmapData(bitmapdata);
        let bitmap: egret.Bitmap;
        bitmap = new egret.Bitmap(texture);
        bitmap.width = width || 0
        bitmap.height = height || 0
        bitmap.name = "openData";
        open_data_container.addChild(bitmap);
        console.log(bitmap.width + '   ' + bitmap.height)

        egret.startTick((timeStarmp: number) => {
            egret.WebGLUtils.deleteWebGLTexture(bitmapdata.webGLTexture);
            bitmapdata.webGLTexture = null;
            return false;
        }, this);

        openDataContext.postMessage(basic);
        console.log('link_done');
        return open_data_container;
    }

运行项目，就有egret本来帮你写好的开放域demo

enter description here

作者简介：何永峰，芦苇科技web前端开发工程师，喜欢到处寻找好吃的，平时爱好是跳舞，打篮球，听音乐，有时会出席一些大型的舞蹈商演活动，目前是Acum.Revolution現狀革命成员之一。并且代表作品：萌鸡驾到、美旅出行小程序、电竞桌子小程序。擅长网站建设、公众号开发、微信小程序开发、小游戏、公众号开发，专注于前端领域框架、交互设计、图像绘制、数据分析等研究，访问 www.talkmoney.cn 了解更多。

转载于:https://www.cnblogs.com/luwei-web/p/10166954.html