微信好友排行榜 最简教程 一
在写微信小游戏排行榜的时候遇到个问题，就是如果建立个cocoscreator工程作为子域的话占用空间就会变得非常大。因此自己看了一下别人写的，只需要一个js文件就可以描绘的好友排行榜。过程遇到和解决了一些问题整理出来，让新手也可以快速做出自己的好友排行榜。这里写的很详细是之前看别人写的都是一知半解的去看，看了许多例子才理解怎么去写，希望 能帮到大家。
在这之前先看看效果
或直接到游戏内体验一下 滑动 的效果
首先概念如下
主域=主工程（游戏工程）
子域=子工程（开放数据域）
掌握几个要点：
第一、微信数据获取。
第二、主域与子域之间的通信。
第三、子域怎么描绘控件。
第一、微信数据获取。官网文档地址：微信API
需要用到的微信API，注意查看数据结构。
//上传玩家的数据，例如我要上传玩家的关卡为1 ，这个接口可以在非子域调用
wx.setUserCloudStorage({ KVDataList:[ {key:"level" ,value:1 } ] ,success:res=>{ } })
//获取好友某个字段的信息列表,只能在子域调用 ,参数keyList 表示需要获取哪些字段的数据，例如我这里只存了玩家的关卡信息，那么这里只填写"level"
wx.getFriendCloudStorage({keyList:[ "level" ] ,success:res=>{ res.data } }) 返回数据结构
res.data:[
{"nickname":"玩家名称" , "openid":"openid" , "avatarUrl":"头像链接", "KVDataList":[ { "key":"level" ,"value":"1" } ] }
]
第二、主域与子域之间的通信。
主域与子域之间通讯也是通过微信提供的接口。这里主域与子域之间的消息传递为单向的，只能从主域发送到子域。
在主域里
wx.postMessage({ action:"showFriendsRank", message: "展示好友排行榜" , otherParam:"其他参数可以通过key-value的形式定义传过去" });在子域里接收
wx.onMessage(msg => {
switch(msg.action)
{
case "showFriendsRank":
//接收到指令 请求数据 进行描绘排行榜
break;
default:
console.log(`未知消息类型:msg.action=${msg.action}`);
break;
}
});
第三、子域怎么描绘控件。
在子域先拿到子域画布ctx才能进行描绘内容。
var canvas = wx.getSharedCanvas();
var ctx = canvas.getContext('2d');设置画笔颜色、字号、字体、对齐方式等
ctx.fillStyle = "#eaeaea";
ctx.font = "40px Helvetica";
ctx.textAlign = "center";
ctx.baseLine = "center";绘制内容
ctx.fillText("内容文本", x, y ); //绘制文本label。 x,y 坐标
ctx.fillRect(x , y ,Width, Height); //绘制矩形
ctx.clearRect(x, y, Width,Height); //清清除一个矩形区域
//加载绘制一张图片
const avatarImg = wx.createImage();
avatarImg.src = "https://wx.qlogo.cn/XXXXXXXXXX";
avatarImg.onload = () => {
ctx.drawImage(avatarImg, x , y , width, height);
};实战请看下一章
微信好友排行榜 最简教程 二
欢迎交流一起学习