CocosCreator之KUOKUO带你理解2代引擎的微信主域子域及排行榜模版链接

本次引擎2.0.5

编辑工具VSCode

目标：理解2代引擎的微信主域子域及排行榜模版

首先我们要明白为什么需要主域跟子域（微信的原因）

一代引擎需要用代码把子域纹理刷新到主域。

官方在二代引擎推出了一个好东西：

什么呢？我们往下看。

官方二代案例下载

这里我使用了官方案例进行讲解，一些地方进行了补充：

我们先打开主域的工程。

好，正如我们看到的，这是一个用户界面。

左上角的是一个普通的展示用户信息的一个预制资源。

还有个按钮：

还有display

display这个节点就是子域显示区域。

要有精灵组件，因为子域的图形会形成纹理加载在display上。

重点来了！！！

二代引擎推出了一个组件，一个专门为子域而准备的组件。

（WXSubContextView）

这个组件就是为了精简代码。

我们看一下代码怎么写的：

首先在属性中声明了display节点用于显示子域；

label标签用于显示微信用户名称；

userBlock是那个预制资源的根节点；（子节点包括用户头像，名称）

第一部分：子域的显示与隐藏：

start（）函数中，声明了一个标志，两个动作。就是为了把display节点放到屏幕外，实现隐藏。

第二部分：获取设备宽度高度：

使用了微信的API。微信的API中有一部分是可以在主域中使用的。

为什么要获取呢？？

为了创建一个授权按钮。（玩微信小游戏时会先弹出授权窗口）

有一种做法是把按钮大小设置为全屏，颜色透明。

然后用户第一次点击肯定会点到。（先判断一下是否授权过，授权过就可以把按钮隐藏掉了）

这是我的补充：

start(){
        // 获取授权状态
        wx.getSetting({
            success(res) {
                // 如果没授权
                if (!res.authSetting['scope.userInfo'])
                {
                    let systemInfo =  wx.getSystemInfoSync();//设备信息
                    let width = systemInfo.windowWidth;//可用窗口宽度
                    let height = systemInfo.windowHeight;
                    let button = wx.createUserInfoButton({
                        type: 'text',
                        text: ' ',
                        style: {
                        left: width * 0,
                        top: height * 0,
                        width: width * 1.0,
                        height: height * 1.0,
                        lineHeight: 40,
                        backgroundColor: '#00000000',
                        color: '#ffffff',
                        textAlign: 'center',
                        fontSize: 10,
                        borderRadius: 3
                        }
                    });
//、、、、、、、、、、、、、、、、

好了，我们往下看：

button.onTap()是指按钮点下去之后做什么。

底下的wx.getOpenDataContext().postMessage()是发射至子域信息。