CocosCreator微信小游戏入门实战《小猫钓鱼》（九）：远程资源加载、微信分享

转载请保留原文链接：https://blog.csdn.net/zzx023/article/details/83064480

 

有心的同学可能已经发现，之前我们做的小游戏调试都是在creator或者微信开发者工具中进行调试，并没有进入真机调试。

在微信开发者工具中，提供了预览以及真机调试这两个功能让我们能够在小游戏未发布之前，就可以在手机微信中进行调试预览。

 

不过点击后你就会发现，上传失败，包体大小超过4M。这是微信对于包体的一个大小限制：

也就是说超过包体4M的资源，需要我们远程进行加载。

怎么办？不用担心，creator已经帮我们把这个麻烦的东西解决了，而我们只需要通过简单的操作就可以实现远程加载资源。

 

首先在你的服务器上搭建一个文件下载服务器，这里我给大家介绍一个简单的办法使用apache进行搭建。

 

下载apache进行安装

http://httpd.apache.org/download.cgi#apache24

安装教程大家网上百度一下即可，都很简单，我这里就不细述了。主要注意一下证书文件放到Apache24\conf文件夹下后，记得将httpd-ssl.conf配置中把https ssl证书相关的都配置一下。

 

完成后运行apache，在浏览器中输入服务器地址或者域名

看到It works就代表配置成功了。

 

接下来我们打包我们的小游戏。打开creator，构建发布，配置如下

 

注意，勾选MD5 Cache，填写远程服务器地址。

远程服务器的地址就是我们放置资源的地方，我在服务器Apache24\htdocs\Fishing目录下新建了一个Fishing文件夹，用来放置需要远程加载的资源。所以我的远程服务器地址配置为

https://www.zzxgame.com.cn/Fishing

 

OK，构建打包。

 

构建结束后，在资源管理器中打开我们打好的包，可以看到是这么一个结构：

 

把res文件夹上传到刚刚我们在服务器新建的文件夹Fishing里面，同时删除客户端这边的res文件夹：

 

完成这些以后，再启动微信开发者工具。

在开发者工具中，运行正常，前面可能会黑屏几秒，不用担心，这是在下载资源文件。

大家也可以参考官方文档：

http://docs.cocos.com/creator/manual/zh/publish/publish-wechatgame.html#%E5%B0%8F%E6%B8%B8%E6%88%8F%E7%8E%AF%E5%A2%83%E7%9A%84%E8%B5%84%E6%BA%90%E7%AE%A1%E7%90%86

 

我们再来看下现在的包体有多大：

远远低于要求的4M，这下子我们终于可以愉快的点击预览或者真机调试，上传小游戏并在手机中运行了。

 

 

接下来是微信分享功能了。

微信分享是重要的流量入口，也是微信小游戏必做的功能。

实现起来很简单，主要通过三个微信的接口：

wx.onShareAppMessage

wx.showShareMenu

wx.shareAppMessage

 

wx.onShareAppMessage和wx.showShareMenu主要用于实现手机右上方的分享按钮功能。

wx.shareAppMessage用于主动拉起分享。

 

在写代码之前，先准备一张分享用的宣传图片，图片要求长宽比为5：4

推荐图片上传到服务器使用。

var GameData = require("GameData");



cc.Class({

    extends: cc.Component,



    properties: {

    },



    // LIFE-CYCLE CALLBACKS:



    // onLoad () {},



    start () {

        if (cc.sys.platform === cc.sys.WECHAT_GAME)

        {

            wx.login({

                success: function(res){

                    wx.request({

                        url :   "https://www.zzxgame.com.cn:18801/token?code=" + res.code,

                        method  :   "POST",

                        success :   function (data) {

                            if (data.statusCode == 200) {

                                console.log("request" , data);

                                wx.postMessage({

                                    message :   "openid",

                                    openid  :   data.data.openid

                                });

                            }

                        }

                    });

                    //显示当前页面的转发按钮

                    wx.showShareMenu();

                    //监听用户点击右上角菜单的“转发”按钮时触发的事件

                    wx.onShareAppMessage(function(res){

                        return {

                            title: "来和小猫一起摸鱼！",

                            imageUrl: "https://www.zzxgame.com.cn/Share/share.png",

                            success(res){

                                console.log("转发成功!!!")

                                common.diamond += 20;

                            },

                            fail(res){

                                console.log("转发失败!!!")

                            }

                        }

                    });

                }

            });

        }

    },



    onShareClick () {

        if (cc.sys.platform === cc.sys.WECHAT_GAME)

        {

            wx.shareAppMessage({

                title: '不服来挑战，我的小猫拿到了' + GameData.instance.score + "分！",

                imageUrl: "https://www.zzxgame.com.cn/Share/share.png",

                success: function (res) {

                    console.log('主动拉起分享成功');

                },

                fail: function (res) {

                    console.log('主动拉起分享失败');

                }

            });

        }

    },

    // update (dt) {},

});

 

onShareClick方法为结束界面的“发起挑战”按钮的ClickEvents。

 

 

最终效果：

右上方分享按钮点击后，点击转发：

 

 

在结束界面点击“发起挑战”按钮