微信小游戏开放域之helloworld

---

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

---

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

概念

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

配置方法

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

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

enter description here

开放数据域限制

一、主域和开放数据域中的代码不能相互 require
二、wx.getUserCloudStorage、wx.getFriendCloudStorage() 和 wx.getGroupCloudStorage() 只能在 开放数据域 中调用。
三、wx.setUserCloudStorage() 和 wx.removeUserCloudStorage() 能够同时在 主域 和开放数据域中调用。
四、开放数据中不能修改sharedCanvas的宽高，若有须要，请在上屏canvas修改sharedCanvas的宽高
五、sharedCanvas只能被上屏canvas渲染
六、开放数据域不能向主域发送消息
七、sharedCanvas 不能调用 toDataURL 和 getContext。
八、开放数据域的全部 canvas 只支持 2d 渲染模式
九、开放数据域的 Image 只能使用本地或微信 CDN 的图片，不能使用开发者本身服务器上的图片

主域限制

一、主域不能调用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 了解更多。