Laya 微信排行榜功能实现（ts脚本）
Demo在最下面
Laya的微信排行榜分为主域和子域两个部分，主域就是游戏的包，子域是排行榜。
主域
新建view场景，命名Ranking（命名随意）添加WXOpenDataViewer
添加到场景里，改变长宽， 这个组件的范围就代表排行榜能显示的范围。类似于电视机的屏幕。
命名为open(命名随意)
然后新建脚本RankingList（命名随意）
export default class RankingList extends Laya.Script {
constructor() { super(); }
static open: Laya.WXOpenDataViewer;
back: Laya.Image;//返回按钮
onEnable(): void {
this.back = this.owner.getChildByName("back") as Laya.Image;
this.back.on(Laya.Event.CLICK, this, () => {
(this.owner as Laya.View).close();
})
RankingList.open = this.owner.getChildByName("open") as Laya.WXOpenDataViewer;
if (Laya.Browser.onMiniGame) {
var w: any = wx;
w.getUserInfo({
success(res) {
var value1 = 123;//参数1
var value2 = 234;//参数2
RankingList.open.postMsg([res.userInfo, value1, value2]);
}
});
}
}
onDisable(): void {
}
}
把这个代码拖到刚才的场景节点上。
然后再Main.ts里写
if (Laya.Browser.onMiniGame) {
//排行榜相关图片图集的路径
Laya.loader.load(["res/atlas/ui/RankingListAtlas.atlas"], Laya.Handler.create(this, () => {
//图集加载完成后把图集信息发送到子域
Laya.MiniAdpter.sendAtlasToOpenDataContext("res/atlas/ui/RankingListAtlas.atlas");
}))
}
找个地方给主域加一个授权按钮。
let button = w.createUserInfoButton({
type: '',
text: '',
style: {
left: 0,
top: 0,
width: 640,
height: 1280,
lineHeight: 40,
backgroundColor: '',
color: '',
textAlign: 'center',
fontSize: 16,
borderRadius: 4
}
})
button.onTap((res) => {
console.log(res)
//授权完成后可以吧按钮删掉
//button.destroy();
})
//打开排行榜的事件
this.button_ranking.on(Laya.Event.CLICK, this, () => {
Laya.Scene.open("uiscene/Ranking.json");
})
主域的东西基本完成了
子域
新建开放域项目
创建好 搭个界面
这是我的。。。
这是界面设置
下面是Main.ts里写的
import GameConfig from "./GameConfig";
import BigRank from "./view/BigRank";
class Main {
constructor() {
//设置子域
Laya.isWXOpenDataContext = true;
Laya.isWXPosMsg = true;
//根据IDE设置初始化引擎
Laya.init(GameConfig.width, GameConfig.height, false);
Laya.stage.scaleMode = GameConfig.scaleMode;
Laya.stage.screenMode = GameConfig.screenMode;
Laya.stage.alignV = GameConfig.alignV;
Laya.stage.alignH = GameConfig.alignH;
if (Laya.Browser.onMiniGame) {
Laya.Browser.window.wx.onMessage(function (data) {//微信接受信息
if (data.url == "res/atlas/ui/RankingListAtlas.atlas") {
Laya.loader.load([
"res/atlas/ui/RankingListAtlas.atlas"], Laya.Handler.create(this, this.onComplete));
}
}.bind(this));
}
}
onComplete(): void {
//初始化rank排行榜
var rank = new BigRank();
//初始化
rank.init();
}
}
//激活启动类
new Main();
新建脚本BigRank.ts
import { ui } from "../ui/layaMaxUI"
export default class BigRank extends ui.test.ListUI {
static I: BigRank;
constructor() {
super();
BigRank.I = this;
}
/**list初始化使用的数据 */
private arr: Array<any> = []
/**list初始化使用的数据{nickName,avatarUrl,value1,value2} */
private UserData: Array<any> = []
//榜1
List1: Array<any> = [];
//榜2
List2: Array<any> = [];
/**
* 初始化
*/
public init() {
Laya.stage.addChild(this);
console.log(" 初始化");
if (Laya.Browser.onMiniGame) {
//接受来自主域的信息
// 直接展示数据
// this.getFriendData();
this.getData();
}
this.CheckRanking.on(Laya.Event.CLICK, this, () => {
if (!(this.CheckRanking.getChildAt(0) as Laya.Image).visible) {
(this.CheckRanking.getChildAt(0) as Laya.Image).visible = true;
(this.LoveRanking.getChildAt(0) as Laya.Image).visible = false;
Laya.Tween.to(this.lists, { x: 0 }, 500, Laya.Ease.backInOut);
}
});
this.LoveRanking.on(Laya.Event.CLICK, this, () => {
if (!(this.LoveRanking.getChildAt(0) as Laya.Image).visible) {
(this.LoveRanking.getChildAt(0) as Laya.Image).visible = true;
(this.CheckRanking.getChildAt(0) as Laya.Image).visible = false;
Laya.Tween.to(this.lists, { x: -640 }, 500, Laya.Ease.backInOut);
}
});
}
// ["萝卜", 123, 456]
recevieData2(message): void {
if (message.type) {
return;
}
console.log(message);
//判断arr集合中的元素是否存在名字与传送过来的消息的名字相同的值，若存在则删除该值
for (let i = 0; i < BigRank.I.UserData.length; i++) {
const element = BigRank.I.UserData[i];
if (element.nickName == message[0].nickName) {
console.log("判断", element.UserName, message[0].nickName);
console.log(BigRank.I.UserData.length);
BigRank.I.UserData.splice(i, 1);
console.log(BigRank.I.UserData.length);
}
}
//在arr集合中添加新的值。
BigRank.I.UserData.push({ Number: 1, nickName: message[0].nickName, avatarUrl: message[0].avatarUrl, value1: message[1], value2: message[2] });
//榜1排序
for (var i = 0; i < BigRank.I.UserData.length - 1; i++) {
for (var j = i + 1; j < BigRank.I.UserData.length; j++) {
if (BigRank.I.UserData[i].value1 < BigRank.I.UserData[j].value1) {
var data = BigRank.I.UserData[i];
BigRank.I.UserData[i] = BigRank.I.UserData[j];
BigRank.I.UserData[j] = data;
}
}
}
//将排序好的集合复制到List1中
BigRank.I.List1 = [];
for (let i = 0; i < BigRank.I.UserData.length; i++) {
const element = BigRank.I.UserData[i];
element.Number = i + 1;
BigRank.I.List1.push(element);
}
if (BigRank.I.List1.length > 20)
BigRank.I.List1.splice(19);
//榜2排序
for (var i = 0; i < BigRank.I.UserData.length - 1; i++) {
for (var j = i + 1; j < BigRank.I.UserData.length; j++) {
if (BigRank.I.UserData[i].value2 < BigRank.I.UserData[j].value2) {
var data = BigRank.I.UserData[i];
BigRank.I.UserData[i] = BigRank.I.UserData[j];
BigRank.I.UserData[j] = data;
}
}
}
//将排序好的集合复制到List2中
BigRank.I.List2 = [];
for (let i = 0; i < BigRank.I.UserData.length; i++) {
const element = BigRank.I.UserData[i];
element.Number = i + 1;
BigRank.I.List2.push(element);
}
if (BigRank.I.List2.length > 20)
BigRank.I.List2.splice(19);
console.log("榜1", BigRank.I.List1);
console.log("榜2", BigRank.I.List2);
BigRank.I.setSelfData2(message);
BigRank.I.setlist(BigRank.I.List1);
}
private getData(): void {
wx.getFriendCloudStorage({
keyList: ['test10086'],
success: function (res) {
BigRank.I.UserData = [];
for (let l = 0; l < res.data.length; l++) {
const data = res.data[l];
console.log(data);
console.log(data.nickname, data.avatarUrl, data.KVDataList)
var KVdata = JSON.parse(data.KVDataList[0].value)
var message = KVdata.wxgame.value;
BigRank.I.UserData.push({ nickName: message[0].nickName, avatarUrl: message[0].avatarUrl, value1: message[1], value2: message[2] });
}
wx.onMessage(BigRank.I.recevieData2);
}
});
}
/**
* 设置list arr
* @param arr 赋值用的arr
*/
public setlist(arr): void {
BigRank.I._list.array = arr;
BigRank.I._list.refresh();
BigRank.I._list2.array = arr;
BigRank.I._list2.refresh();
}
public setSelfData2(message): void {
var kvDataList = [];
var obj: any = {};
obj.wxgame = {};
obj.wxgame.value = message;
console.log(obj);
kvDataList.push({ "key": "test10086", "value": JSON.stringify(obj) });
wx.setUserCloudStorage({
KVDataList: kvDataList,
success: function (e) {
console.log('-----success:' + JSON.stringify(e));
},
fail: function (e) {
console.log('-----fail:' + JSON.stringify(e));
},
complete: function (e) {
console.log('-----complete:' + JSON.stringify(e));
}
});
}
}
BigItem.ts
import { ui } from "../ui/layaMaxUI"
export default class BigItem extends ui.test.BigItemUI {
constructor() {
super();
}
public set dataSource(value) {
if (!value)
return;
this.img_head.skin = value.avatarUrl;
this.text_name.text = value.nickName;
this.text_score.text = value.value1;
this.love.visible = false;
this.Number.text = "" + value.Number;
}
}
BigItem2.ts
import { ui } from "../ui/layaMaxUI"
export default class BigItem extends ui.test.BigItemUI {
constructor() {
super();
}
public set dataSource(value) {
if (!value)
return;
this.img_head.skin = value.avatarUrl;
this.text_name.text = value.nickName;
this.text_score.text = value.value2;
this.love.visible = true;
}
}
排行榜1里
在UIView的runtime上加BigItem.ts
排行榜2里
UIView的runtime上加BigItem2.ts
导出
导出开放域项目
打包完成后 打开发布文件夹
将这些文件复制
回到主域 在主域的bin目录下添加新的文件夹openDataContext
把刚才的文件粘贴到这个文件夹下
在子域的图集里找到排行榜的图集
吧这些东西复制到主域文件里 注意：跟之前主域Main.ts文件中写的路径要一样。
最后在主域的game.json文件中添加 “openDataContext”:“openDataContext”
发布测试
这个报错是正常的 不影响效果
完成了 有什么问题欢迎留言。最后。。。点个赞再走呗
Demo在这里 ↓
点个赞 ↓
点个赞 ↓
点个赞 ↓
点个赞 ↓
点个赞 ↓
点个赞 ↓
点个赞 ↓
点个赞 ↓
点个赞 ↓
点个赞 ↓
点个赞 ↓
这个Demo跟上面的代码类似 但不完全一样。用的时候注意点。。。。
Demo的GitHub地址
点个赞 ↑
点个赞 ↑
点个赞 ↑
点个赞 ↑
点个赞 ↑
点个赞 ↑
点个赞 ↑
点个赞 ↑
点个赞 ↑
点个赞 ↑
点个赞 ↑
点个赞 ↑
点个赞 ↑
点个赞 ↑
点个赞 ↑
Demo在这里 ↑
1578
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
