微信小遊戲開放域之helloworld

微信小遊戲-開放數據域的配置

概念

開放數據域 是一個封閉、獨立的 JavaScript 做用域。開放數據域主要做用就是獲取用戶的關係鏈數據，而且展現關係鏈數據 具體使用方法在官方文檔已經很是詳細了-》開放數據域本文只是作一個簡單整理 具體的展現關係鏈數據

配置方法

一、新建開放數據域的代碼目錄，以openDataContext爲例，在目錄下新建index.js做爲開放數據的入口文件 二、在game.json中添加配置項 openDataContext

{
  "deviceOrientation": "portrait",
  "openDataContext": "src/openDataContext"
}
複製代碼

開放數據域限制

一、主域和開放數據域中的代碼不能相互 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()接口在主域和開放數據域均可以使用

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類型，不然會報錯

託管數據的限制 每一個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);
    }
});
複製代碼

獲取到的數據以下：

繪製好友排行榜

沒錯，用你的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)
複製代碼

實際操做

首先把你的項目發佈爲微信小遊戲項目

以後會報錯誤，這裏不用管就好了 而後在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

做者簡介：何永峯，蘆葦科技web前端開發工程師，喜歡處處尋找好吃的，平時愛好是跳舞，打籃球，聽音樂，有時會出席一些大型的舞蹈商演活動，目前是Acum.Revolution現狀革命成員之一。而且表明做品：萌雞駕到、美旅出行小程序、電競桌子小程序。擅長網站建設、公衆號開發、微信小程序開發、小遊戲、公衆號開發，專一於前端領域框架、交互設計、圖像繪製、數據分析等研究，訪問 www.talkmoney.cn 瞭解更多或掃描如下二維碼獲取最新的文章推送