150 lines
5.0 KiB
JavaScript
150 lines
5.0 KiB
JavaScript
|
/* eslint-disable indent */
|
|||
|
import { getFriendRankData, getGroupFriendsRankData, setUserRecord } from './data/index';
|
|||
|
import getFriendRankXML from './render/tpls/friendRank';
|
|||
|
import getFriendRankStyle from './render/styles/friendRank';
|
|||
|
import getTipsXML from './render/tpls/tips';
|
|||
|
import getTipsStyle from './render/styles/tips';
|
|||
|
import { showLoading } from './loading';
|
|||
|
const Layout = requirePlugin('Layout').default;
|
|||
|
const RANK_KEY = 'user_rank';
|
|||
|
const sharedCanvas = wx.getSharedCanvas();
|
|||
|
const sharedContext = sharedCanvas.getContext('2d');
|
|||
|
// test
|
|||
|
setUserRecord(RANK_KEY, Math.ceil(Math.random() * 1000));
|
|||
|
const MessageType = {
|
|||
|
WX_RENDER: 'WXRender',
|
|||
|
WX_DESTROY: 'WXDestroy',
|
|||
|
SHOW_FRIENDS_RANK: 'showFriendsRank',
|
|||
|
SHOW_GROUP_FRIENDS_RANK: 'showGroupFriendsRank',
|
|||
|
SET_USER_RECORD: 'setUserRecord',
|
|||
|
};
|
|||
|
/**
|
|||
|
* 绑定邀请好友事件
|
|||
|
* 温馨提示,这里仅仅是示意,请注意修改 shareMessageToFriend 参数
|
|||
|
*/
|
|||
|
const initShareEvents = () => {
|
|||
|
// 绑定邀请
|
|||
|
const shareBtnList = Layout.getElementsByClassName('shareToBtn');
|
|||
|
shareBtnList
|
|||
|
&& shareBtnList.forEach((item) => {
|
|||
|
item.on('click', () => {
|
|||
|
if (item.dataset.isSelf === 'false') {
|
|||
|
wx.shareMessageToFriend({
|
|||
|
openId: item.dataset.id,
|
|||
|
title: '最强战力排行榜!谁是第一?',
|
|||
|
imageUrl: 'https://mmgame.qpic.cn/image/5f9144af9f0e32d50fb878e5256d669fa1ae6fdec77550849bfee137be995d18/0',
|
|||
|
});
|
|||
|
}
|
|||
|
});
|
|||
|
});
|
|||
|
};
|
|||
|
/**
|
|||
|
* 初始化开放域,主要是使得 Layout 能够正确处理跨引擎的事件处理
|
|||
|
* 如果游戏里面有移动开放数据域对应的 RawImage,也需要抛事件过来执行Layout.updateViewPort
|
|||
|
*/
|
|||
|
const initOpenDataCanvas = async (data) => {
|
|||
|
Layout.updateViewPort({
|
|||
|
x: data.x / data.devicePixelRatio,
|
|||
|
y: data.y / data.devicePixelRatio,
|
|||
|
width: data.width / data.devicePixelRatio,
|
|||
|
height: data.height / data.devicePixelRatio,
|
|||
|
});
|
|||
|
};
|
|||
|
// 给定 xml 和 style,渲染至 sharedCanvas
|
|||
|
function LayoutWithTplAndStyle(xml, style) {
|
|||
|
Layout.clear();
|
|||
|
Layout.init(xml, style);
|
|||
|
Layout.layout(sharedContext);
|
|||
|
console.log(Layout);
|
|||
|
}
|
|||
|
// 仅仅渲染一些提示,比如数据加载中、当前无授权等
|
|||
|
function renderTips(tips = '') {
|
|||
|
LayoutWithTplAndStyle(getTipsXML({
|
|||
|
tips,
|
|||
|
}), getTipsStyle({
|
|||
|
width: sharedCanvas.width,
|
|||
|
height: sharedCanvas.height,
|
|||
|
}));
|
|||
|
}
|
|||
|
// 将好友排行榜数据渲染在 sharedCanvas
|
|||
|
async function renderFriendsRank() {
|
|||
|
showLoading();
|
|||
|
try {
|
|||
|
const data = await getFriendRankData(RANK_KEY);
|
|||
|
if (!data.length) {
|
|||
|
renderTips('暂无好友数据');
|
|||
|
return;
|
|||
|
}
|
|||
|
LayoutWithTplAndStyle(getFriendRankXML({
|
|||
|
data,
|
|||
|
}), getFriendRankStyle({
|
|||
|
width: sharedCanvas.width,
|
|||
|
height: sharedCanvas.height,
|
|||
|
}));
|
|||
|
initShareEvents();
|
|||
|
}
|
|||
|
catch (e) {
|
|||
|
console.error('renderFriendsRank error', e);
|
|||
|
renderTips('请进入设置页允许获取微信朋友信息');
|
|||
|
}
|
|||
|
}
|
|||
|
// 渲染群排行榜
|
|||
|
async function renderGroupFriendsRank(shareTicket) {
|
|||
|
showLoading();
|
|||
|
try {
|
|||
|
const data = await getGroupFriendsRankData(shareTicket, RANK_KEY);
|
|||
|
if (!data.length) {
|
|||
|
renderTips('暂无群同玩好友数据');
|
|||
|
return;
|
|||
|
}
|
|||
|
LayoutWithTplAndStyle(getFriendRankXML({
|
|||
|
data,
|
|||
|
}), getFriendRankStyle({
|
|||
|
width: sharedCanvas.width,
|
|||
|
height: sharedCanvas.height,
|
|||
|
}));
|
|||
|
}
|
|||
|
catch (e) {
|
|||
|
renderTips('群同玩好友数据加载失败');
|
|||
|
}
|
|||
|
}
|
|||
|
function main() {
|
|||
|
wx.onMessage((data) => {
|
|||
|
console.log('[WX OpenData] onMessage', data);
|
|||
|
if (typeof data === 'string') {
|
|||
|
try {
|
|||
|
// eslint-disable-next-line no-param-reassign
|
|||
|
data = JSON.parse(data);
|
|||
|
}
|
|||
|
catch (e) {
|
|||
|
console.error('[WX OpenData] onMessage data is not a object');
|
|||
|
return;
|
|||
|
}
|
|||
|
}
|
|||
|
switch (data.type) {
|
|||
|
// 来自 WX Unity SDK 的信息
|
|||
|
case MessageType.WX_RENDER:
|
|||
|
initOpenDataCanvas(data);
|
|||
|
break;
|
|||
|
// 来自 WX Unity SDK 的信息
|
|||
|
case MessageType.WX_DESTROY:
|
|||
|
Layout.clearAll();
|
|||
|
break;
|
|||
|
// 下面为业务自定义消息
|
|||
|
case MessageType.SHOW_FRIENDS_RANK:
|
|||
|
renderFriendsRank();
|
|||
|
break;
|
|||
|
case MessageType.SHOW_GROUP_FRIENDS_RANK:
|
|||
|
renderGroupFriendsRank(data.shareTicket);
|
|||
|
break;
|
|||
|
case MessageType.SET_USER_RECORD:
|
|||
|
setUserRecord(RANK_KEY, data.score);
|
|||
|
break;
|
|||
|
default:
|
|||
|
console.error(`[WX OpenData] onMessage type 「${data.type}」 is not supported`);
|
|||
|
break;
|
|||
|
}
|
|||
|
});
|
|||
|
}
|
|||
|
main();
|