在使用Cocos Creator製作微信小遊戲的時候，基本上都是需要排行榜功能的。
鑑於如果使用Cocos Creator官方提供的WxSubContextView，會增大不少開放域包體。如果本身主域工程的包體已經有點大，並且還不想用分包加載的話，那麼可以考慮使用微信提供的API和Canvas渲染來做排行榜系統。這樣可以極大的減小開放域包體。一起來試試吧。下面我將分享我自己整理的一份微信原生開放域實現排行榜的工程。其中實現的功能有：
用戶授權按鈕（位置適配）
上傳用戶數據
獲取好友託管信息、展示好友排行榜（分頁展示）
好友互動贈送
工程運行截圖如下：
「主域和子域通信」
主域和子域的通信，大家應該都很熟悉，主域和子域的通信是單向的，只能主域向子域發消息，子域不能向主域發消息。在子域（開放域）中，用wx.onMessage進行監聽，在主域中發送消息給子域。
在子域中監聽
「用戶授權按鈕（位置適配）」
我看見有很多小遊戲的用戶授權按鈕點擊位置並沒有做好適配，基本就是在一個UI界面點擊任何位置都可以進行授權，有時候用戶可能會不理解，或者不知道是怎麼回事。那麼有一個非常明顯提示用戶登錄的按鈕，是有必要的。
這裏需要注意的是，微信的單位像素並不是標準的遊戲設計中的像素單位。所以要注意單位的轉換，把遊戲設計中的像素單位轉換爲微信中的像素單位。
「上傳用戶數據」
上傳用戶數據可以直接在主域中調用微信的提供的API，上傳用戶託管數據
「獲取好友託管信息、展示好友排行榜」
主要難點是在子域中，怎麼渲染界面。渲染界面用的是Canvas，獲取Canvas對象的繪製上下文，進行繪製渲染
「好友互動」
好友互動的話，就要加點擊事件了，但是在子域中，怎麼添加點擊事件。這裏是在Canvas上添加點擊事件的監聽，然後判斷點擊的點是否在一個圖片大小範圍內，判斷點擊是否有效。有效，則調用微信相關的API取修改好友的互動數據。
還有一個注意的一些點：
1.小遊戲目錄下，新建jsserver目錄
2.project.config.json中添加 "jsserverRoot": "jsserver/"
3.game.json中添加 交互模板
完成以上的步驟，在主域中，獲取自己的互動數據wx.getUserInteractiveStorage，此處需要解密從微信回傳的加密數據。需要雲函數調用或者通過服務端處理。
在完成開放數據域代碼後，直接將開放數據域代碼拷貝一份到build-templates下，如圖
完整代碼，盡在閱讀原文