The main domain of WeChat Mini Game displays the subdomain screen

The main domain of WeChat Mini Game displays the subdomain screen

Please follow me on Weibo: @NormanLin_BadPixel Bad Pixel

---

For data security in WeChat, the API for obtaining public domain data can only be called in subdomains (security domains). If we use public domain data to store user ranking information, then we have to draw the leaderboard in the subdomain and map it to the main domain. This article will talk about how to create the main domain and subdomain projects, and display the subdomain content in the main domain.

Create project

The author is using cocosCreator (hereinafter referred to as ccc ) to develop, using the latest version 1.9.1 . The latest version supports building of subdomain projects. Here is the official example of creating a subdomain .

Just follow the steps above to set it up.

What needs to be noted and troublesome here is that every time the main domain project is released, all files in the directory will be deleted and regenerated, which leads to the need to re-copy the subdomain's release project to the main domain project.

Project settings

The Demo of ccc shows basically all the steps, here I will tell you about my experience.

For data security, Mini Games (currently) only allows the main domain to send messages to subdomains, but subdomains cannot send messages to the main domain. What could be wrong with this? For example, we set a button on the screen of the subdomain. When we press the button, the generated click event cannot be obtained in the main domain.

Therefore, my idea is that the subdomain is only responsible for the drawing of the screen, all interactions are completed by the main domain, and the events generated by the interaction are sent by the main domain to the subdomain to update the screen.

To put it simply, I do the same set of UI in the main domain and subdomain, but the main domain has only buttons and other UIs with interactive operations, while the subdomain only has image and text rendering UI. Pay attention to the order in which the main domain UI is displayed.

The main domain sends a message to the subdomain

Here is the official API . Although the official API is complete, it is not detailed. Many people seem to understand it, but it is not as useful as an example. Post my code here.

Code for main domain (send message):

ShowRankView : function(){
    wx.postMessage({
        message: 'ShowR',
        data1:1,
        data2 : "lalala",
        data3 : true,
        ...
    })
    },

Code for subdomain (receive message)

 start () {
    wx.onMessage(data => {
        switch (data.message) {
            case 'ShowR':
                this.ShowRHandler();
                break;
            case 'msg1':
                this.Msg1Handler(data.data1,data.data2,...);
                break;
            case 'msg2':
                this.Msg2Handler(data);
                break;
            case 'msg3':
                this.Msg3Handler();
                break;
        }
    });
},

How to draw the leaderboard is to test your coding ability. This article only talks about WeChat related API calls.

The main domain draws the sub-domain picture.

The example of ccc has been written in great detail, so I will post it again here.

ShowRankView : function(){
    wx.postMessage({
        message: 'ShowR',
    })
    this.UIRankViewNode.active = true;
    this.ShowRank = true;
},
start(){
    ...
    this.tex = new cc.Texture2D();
    ...
},
update (dt) {
    ...
    if(this.ShowRank){
        this.tex.initWithElement(sharedCanvas);
        this.tex.handleLoadedTexture();
        this.UIRankView.spriteFrame = new cc.SpriteFrame(this.tex);
    }

},

end