標籤: 微信小遊戲，開放域

微信小遊戲-開放資料域的配置

概念

開放資料域 是一個封閉、獨立的 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渲染

主域限制

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 瞭解更多。