基于Laya游戏引擎实现微信小游戏排行榜

最新推荐文章于 2024-10-14 13:38:01 发布

水月沐风

最新推荐文章于 2024-10-14 13:38:01 发布

阅读量7.9k

点赞数 1

分类专栏：微信小游戏 laya 排行榜开放域主域文章标签：微信小游戏 laya layabox 排行榜开放域

本文链接：https://blog.csdn.net/s1674521/article/details/82623666

版权

本文详细介绍了如何借助Laya引擎在微信小游戏内实现排行榜功能。首先，通过主域绘制弹窗，然后利用开放域绘制排行榜UI，通过共享画布sharedCanvas进行主域与开放域的融合。在开放域中，需要注意处理主域发送的消息和开放域的接口限制，同时解决图片加载问题。最后，合并主域和开放域代码并打包成微信小游戏。

摘要由CSDN通过智能技术生成

我们都知道，微信小游戏和小程序目前风头十足，很多公司都逐渐增加了相关业务线来迅速推广自己的产品和抢占用户群。说到微信小游戏，就不得不提到排行榜这个功能，就目前游戏行业，似乎都离不开排行榜这个重要功能，用户很大一部分留存都是依仗这个看似不起眼的模块。那么，微信小游戏中具体该如何借助laya引擎实现排行榜这个功能呢？我们先来看一下最终的效果图：

按照微信官方的说法，如果我们要使用微信官方提供的好友关系链的数据，我们就不能直接在项目中绘制排行榜，我们需要借助于开放域来绘制排行榜：

如果想要展示通过关系链 API 获取到的用户数据，如绘制排行榜等业务场景，需要将排行榜绘制到 sharedCanvas 上，再在主域将 sharedCanvas 渲染上屏。简单来说，sharedCanvas 是主域和开放数据域都可以访问的一个离屏画布。在开放数据域调用 wx.getSharedCanvas() 将返回 sharedCanvas。更多相关详情可以去看看官网的介绍：https://mp.weixin.qq.com/debug/wxagame/dev/tutorial/open-ability/open-data.html

那么我们来实际动手操作一下吧。

主域绘制

通过效果可以看出来，我们排行榜是一个弹窗形式展示的，由于开放域只负责排行榜UI绘制，所以，除此以外的UI以及交互我们需要在主域绘制和处理。因此，这里的弹窗 dialog 需要在主域绘制，然后将对应的排行榜需要显示的位置信息和长宽映射到开放域，具体代码如下：


    /**
     * 显示排行榜数据
     */
    function onRankInfoLoad(){
   
        console.log("查看排行榜～");
        var dialog = new RankDialogUI();
        showShareCanvas();
        // 解决显示对象和鼠标错位而导致的排行榜滑动无效问题
        var globalPosition = dialog.ranking_list.localToGlobal(new Laya.Point());
        var originMatrix = Laya.stage._canvasTransform;
        var mat = new Laya.Matrix(originMatrix.a, 0, 0, originMatrix.d, globalPosition.x * originMatrix.a, globalPosition.y * originMatrix.d);
        wxPostMessage({
            command: 0,
            text: "设置开放域canvas大小",
            canvasData: {
                width: rankViewWidth * mat.a, height: rankViewHeight * mat.d, matrix: mat
            },
            isLoad: false
        }, null, function (message) {
   
            console.log("再次往开放域发请求");
            window['wx'].postMessage({
                command: 1,
                text: '开放域加载资源',
            });
        });

        Laya.stage.addChild(dialog);
        dialog.ranking_list.visible = false;
        dialog.popup();
         Laya.timer.once(400,this,function(){
   
            wxPostMessage({
                command: 3,
                text: "获取排行榜数据～"
            }, null, function (message) {
   
                console.log("获取排行榜的回调～");
            });
         });


        dialog.btn_rank_dialog_share.on(Laya.Event.CLICK, this, onGameRankShare);
        dialog.btn_rank_dialog_back.on(Laya.Event.CLICK, this, onDialogClose);
        function onDialogClose(){
   
            wxPostMessage({
                command: 4,
                text: "关闭排行榜～"
            }, null, function (message) {
   
                console.log("关闭排行榜的回调～");
            });
            dialog.close();
        }

        function onGameRankShare(){
   
            console.log("分享排行榜～");
            window['wx'].showShareMenu({
                withShareTicket:false,
                success:function(res){
   
                    console.log("开启转发成功～");
                },
                fail: