微信小游戏开发学习记录2

寂静流年韶华舞

已于 2023-01-31 11:32:07 修改

阅读量825

点赞数

分类专栏： javascript 文章标签：学习

于 2023-01-11 17:07:33 首次发布

本文链接：https://blog.csdn.net/flayer2006/article/details/128633206

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

接上一篇：微信小游戏开发学习记录_寂静流年韶华舞的博客-CSDN博客_微信小游戏开发学习

一、UI系统

一个完整的游戏一般由不同的系统组成，从技术的角度看一般会包含UI系统、动画系统、物理系统和声音系统等。

1、基础渲染组件-精灵组件

Sprite（精灵）是 2D 游戏中最常见的显示图像的方式，在节点上添加 Sprite 组件，就可以在场景中显示项目资源中的图片。

（1）操作：

①创建空白节点，点击 **属性检查器** 下面的 **添加组件** 按钮，然后从 **渲染组件** 中选择 **Sprite**，即可添加 Sprite 组件到节点上。②直接在层级管理器建立渲染组件-精灵sprite。③将图片资源直接拖拽到层级管理器上即可自动创建节点及sprite组件。

（2）Sprite 属性

（3）渲染模式

Sprite 组件支持五种渲染模式

①普通模式（Simple）`：按照原始图片资源样子渲染 Sprite，一般在这个模式下我们不会手动修改节点的尺寸，来保证场景中显示的图像和美术人员生产的图片比例一致。
②九宫格模式（Sliced）`：图像将被分割成九宫格，并按照一定规则进行缩放以适应可随意设置的尺寸(`size`)。通常用于 UI 元素，或将可以无限放大而不影响图像质量的图片制作成九宫格图来节省游戏资源空间。
③平铺模式（Tiled）`：当 Sprite 的尺寸增大时，图像不会被拉伸，而是会按照原始图片的大小不断重复，就像平铺瓦片一样将原始图片铺满整个 Sprite 规定的大小。

④填充模式（Filled）`：根据原点和填充模式的设置，按照一定的方向和比例绘制原始图片的一部分。经常用于进度条的动态展示。
⑤网格模式（Mesh）`：必须使用 **TexturePacker 4.x** 以上版本并且设置 ploygon 算法打包出的 plist 文件才能够使用该模式。

注意：type属性选择填充模式之后，会出现一组新的属性配置，作用如下：

**Fill Range 填充范围补充说明**：
在 `HORIZONTAL` 和 `VERTICAL` 这两种填充类型下，`Fill Start` 设置的数值将影响填充总量，如果 `Fill Start` 设为 0.5，那么即使 `Fill Range` 设为 1.0，实际填充的范围也仍然只有 Sprite 总大小的一半。
而 `RADIAL` 类型中 `Fill Start` 只决定开始填充的方向，`Fill Start` 为 0 时，从 x 轴正方向开始填充。`Fill Range` 决定填充总量，值为 1 时将填充整个圆形。`Fill Range` 为正值时逆时针填充，为负值时顺时针填充。

2、Lable组件

Label组件用来显示一段文字，文字可以是系统字，也可以是图片字或者艺术字体，Label组件将文字排好版并且渲染出来。单击属性检查器下面的添加组件按钮，然后就可以在渲染组件中选择Label，将Label组件添加到节点上。或直接拖动控件库的lable到场景编辑器自动创建Lable组件。

（1）Label 属性

lable排版属性：

lable缓存类型：

3、Button-按钮组件

Button 组件可以响应用户的点击操作，当用户点击 Button 时，Button 自身会有状态变化。另外，Button 还可以让用户在完成点击操作后响应一个自定义的行为。创建方式和lable组件一样。

（1）Button 属性

注意：当 Transition 为 SPRITE 且 disabledSprite 属性有关联一个 spriteFrame 的时候，此时将忽略 Enable Auto Gray Effect 属性.

Button 的 Transition 用来指定当用户点击 Button 时的状态表现。目前主要有 NONE、COLOR、SPRITE 和 SCALE 四种类型。

①Color Transition

②Sprite Transition

③Scale Transition

（2） Button 点击事件

Button 可以额外添加 Click 事件，用于响应玩家的点击操作。有以下两种方法。

①通过属性检查器添加回调：修改Click Events值，回车即可添加点击事件，值为数组，可多个。

target对应的节点添加组件脚本：

cc.Class({
    extends: cc.Component,
    properties: {},
    start () {},

    btnClick(event,customEventData) {
        let node = event.target;
        cc.log("通过属性检查器设置点击事件：",customEventData);
    }

});

添加回调效果如下：

②通过脚本添加回调

通过 button.node.on('click', ...) 的方式来添加，这是一种非常简便的方式，但是该方式有一定的局限性，在事件回调里面无法获得当前点击按钮的屏幕坐标点。添加脚本组件，内容如下：

cc.Class({
    extends: cc.Component,

    properties: {
       button:cc.Button
    },
    
    start () {
        this.button.node.on("click",this.callBack,this)
    },

    callBack:function (button){
        cc.log("button click")
    }
});

在属性检查器里面的button属性拖拽添加节点。效果如下：

二、动画系统

Cocos Creator 的动画系统，除了标准的位移、旋转、缩放动画和序列帧动画以外，这套动画系统还支持任意组件属性和用户自定义属性的驱动，再加上可任意编辑的时间曲线和创新的移动轨迹编辑功能，能够让内容生产人员不写一行代码就制作出细腻的各种动态效果。

Cocos Creator 自带的动画编辑器适用于制作一些不太复杂的、需要与逻辑进行联动的动画，例如 UI 动画。如果要制作复杂的特效、角色动画、嵌套动画，可以考虑改用 Spine 或者 DragonBones 进行制作。CocosCreator包含简单的动画编辑系统，可以通过编辑器制作简单的动画。

1、关于Animation

（1）Animation 组件：Cocos Creator 是组件式的结构，Animation同样也是节点上的一个组件。添加组件-其他组件-Animation。

（2）Clip 动画剪辑：动画剪辑就是一份动画的声明数据,是一种资源类型，我们将它挂载到 Animation 组件上，就能够将这份动画数据应用到节点上。

（3）节点数据的索引方式：数据中索引节点的方式是以挂载 Animation 组件的节点为根节点的相对路径。所以在同个父节点下的同名节点，只能够产生一份动画数据，并且只能应用到第一个同名节点上。

（4）clip 文件的参数：

sample：定义当前动画数据每秒的帧率，默认为 60，这个参数会影响时间轴上每两个整数秒刻度之间的帧数量（也就是两秒之内有多少格）。

speed：当前动画的播放速度，默认为 1

duration：当动画播放速度为 1 的时候，动画的持续时间

real time：动画从开始播放到结束，真正持续的时间

wrap mode：循环模式

（5）动画编辑模式

动画在普通模式下是不允许编辑的，只有在动画编辑模式下，才能够编辑动画文件。但是在编辑模式下，无法对节点进行增加 / 删除 / 改名操作。

打开编辑模式：

选中一个包含 Animation 组件，并且包含有一个以上 clip 文件的节点。然后在动画编辑器左上角点击唯一的按钮。

退出编辑模式：

点击动画编辑器上点击左上角的编辑按钮，或者在场景编辑器左上角的关闭按钮

（6）熟悉动画编辑器

动画编辑器一共可以划分为 6 个主要部分：

常用按钮区域，这里负责显示一些常用功能按钮，从左到右依次为：开关编辑状态、返回第一帧、上一帧、播放/暂停、下一帧、新建动画剪辑、插入动画事件
时间轴与事件，这里主要是显示时间轴，添加的自定义事件也会在这里显示。
层级管理（节点树），当前动画剪辑可以影响到的节点数据。
节点内关键帧的预览区域，这里主要是显示各个节点上的所有帧的预览时间轴。
属性列表，显示当前选中的节点在选中的动画剪辑中已经包含了的属性列表。
关键帧，每个属性相对应的帧都会显示在这里。

时间轴的刻度单位表示方式

时间轴上刻度的表示法是 01-05。该数值由两部分组成，冒号前面的是表示当前秒数，冒号后面的表示在当前这一秒里的第几帧。

01-05 表示该刻度在时间轴上位于从动画开始经过了 1 秒又 5 帧的时间。

因为帧率（sample）可以随时调整，因此同一个刻度表示的时间点也会随着帧率变化而有所不同。

当帧率为 30 时，01-05 表示动画开始后 1 + 5/30 = 1.1667 秒。
当帧率为 10 时，01-05 表示动画开始后 1 + 5/10 = 1.5 秒。

虽然当前刻度表示的时间点会随着帧率变化，但一旦在一个位置添加了关键帧，该关键帧所在的总帧数是不会改变的，假如我们在帧率 30 时向 01-05 刻度上添加了关键帧，该关键帧位于动画开始后总第 35 帧。之后把帧率修改为 10，该关键帧仍然处在动画开始后第 35 帧，而此时关键帧所在位置的刻度读数为 03-05。换算成时间以后正好是之前的 3 倍。

注意：Animation组件的play on load勾选。

2、基本操作

（1）更改时间轴缩放比例：

在操作中如果觉得动画编辑器显示的范围太小，需要按比例缩小，让更多的关键帧显示到编辑器：在图中2、4、6区域内滚动鼠标滚轮，可以放大，或者缩小时间轴的显示比例。

（2）移动显示区域：

如果想看动画编辑器右侧超出编辑器被隐藏的关键帧或是左侧被隐藏的关键帧，这时候就需要移动显示区域。在图中2、4、6区域内按下鼠标中键/右键拖拽。

（3）更改当前选中的时间轴节点

在时间轴（图 2 区域）区域内点击任意位置或者拖拽，都可以更改当前的时间节点。
在图 4 区域内拖拽标示的红线即可。

（4）播放/暂停动画

在图 1 区域内点击播放按钮，按钮会自动变更为暂停，再次点击则是暂停。
播放状态下，保存场景等操作会终止播放。

（5）修改 clip 属性

在插件底部，修改对应的属性，在输入框失去焦点的时候就会更新到实际的 clip 数据中。

（6）快捷键、

left：向前移动一帧，如果已经在第 0 帧，则忽略当前操作
right：向后移动一帧
delete：删除当前所选中的关键帧
ctrl / cmd + left：跳转到第 0 帧
ctrl / cmd + right：跳转到有效的最后一帧

（7）剪辑内的数据

一个动画剪辑内可能包含了多个节点，每个节点上挂在多个动画属性，每个属性内的数据才是实际的关键帧。有时候我们会在制作完成动画后，将节点重命名，这样会造成动画数据出现如下问题

这时候我们要手动指定数据对应的节点，可以将鼠标移入节点，点击节点右侧出现的更多按钮，并选择 “移动数据”。要注意的是，根节点名字是被忽略的，所以根节点名字是固定的，并不能修改，并且一直显示在页面左侧。如上图，New Node/test 节点没有数据，我想将 /New Node/efx_flare 上的数据移到这里：

鼠标移到丢失的节点 - /New Node/efx_flare 上
点击右侧出现的按钮
选择移动数据
将路径改为 /New Node/test，并回车

三、制作一个完整的动画

1、初始操作

①修改横竖屏：项目设置——项目预览——设计分辨率，修改分辨率并保存；修改Canvas的设计分辨率为同样的值。

②资源管理器新建文件夹：res、scene、script。

③保存场景到scene里面，默认设置为main场景。

2、让牛儿跑起来

①新建精灵节点，拖拽图片资源到res文件夹下，修改节点图片属性为图片。

②用动画编辑器的方式做一个牛儿奔跑的动画：

需要在动画编辑器里面添加属性 cc.Sprite.spriteFrame
将三张图片拖拽到关键帧区域
调整关键帧在时间轴中的位置，让动作更顺畅

③使用动作系统让牛儿移动起来

 start () {
        // 创建一个移动动作
        let action = cc.moveBy(5, -1200,0);
        // 执行动作
        this.node.runAction(action);
    },

④让牛儿一直循环的移动

start () {
        // 创建一个移动动作
        let action = cc.moveBy(5, -1200,0);
        // 设置回调，回到起始位置
        let finish = cc.callFunc(function () {
            this.node.x = 600;
        },this);
        // 顺序动作
        let sequence = cc.sequence(action,finish);
        // 循环动作
        let actionInterval = cc.repeatForever(sequence);
        // 执行循环动作
        this.node.runAction(actionInterval);
    },

3、套牛小游戏

主要操作就是触发套绳按钮，当牛儿不停的奔跑过来的时候，在合适的时机按下套牛按钮就可以捕捉到牛儿。

（1）开发思路剖析：

主场景的搭建需要用到我们的UI系统，比如Sprite,Button。
如何让牛儿奔跑起来，可以用动作系统也可以用动画编辑器，那我们本案例主要采用动作系统配合动画编辑来使用，让大家能同时练习下动作系统&动画编辑器。
套绳动作，触发套绳动作后如何判断绳子正好触碰到牛儿的头部。
定时器开发，因为游戏总需要个结果，不能让玩家一直无止境玩下去，游戏需要个结束点，我们就可以设置限时操作，比如1分钟内结束游戏，然后计算玩家在一分钟内套取得牛儿数量作为游戏结果。

（2）主界面UI搭建

****主要元素：

背景图片我们用Sprite精灵组件渲染
绳子（Sprite）
捕捉按钮Button

****准备资源：包括背景图片和按钮两种状态，以及套绳等图片

****开始搭建场景：

首先要在资源管理器中新建3个文件夹用来保存对应的资源 scenes，scripts，res，分别用来保存场景、脚本资源和图片等资源
调整尺寸为竖屏640*960，ctrl+s 保存主场景
按顺序搭建，背景 --> 按钮 --> 牛儿 ....

****奔跑的牛动画实现：让牛儿跑起来只需要用帧动画就可以完成，但是还需要每完成一个回合就切换一种牛的类型；移动可以使用动画编辑器来实现一个位移动画。

（3）奔跑的牛代码实现：

每一个牛有三张皮肤，可以通过循环轮换皮肤来实现牛儿奔跑的效果，首先需要用cc.class帮我们定义一个数组，属性项增加牛的类型数组。
属性编辑器将牛儿资源图片填充到数组的spriteFrame项里面。
动画编辑器实现牛儿左右循环移动效果，一轮结束位置插入帧事件函数名称；脚本的update函数实现更换皮肤；脚本增加帧事件函数实现牛儿类型随机序号。

// cow.js
// 用cc.class 生成一个对象，包含数组皮肤
const cow_skin = cc.Class({
    name: "cow_skin",
    properties: {
        cows: {
            default: [],
            type: [cc.SpriteFrame]
        }
    }
})

cc.Class({
    extends: cc.Component,

    properties: {
        // 牛的类型数组
        cow_sets: {
            default: [],
            type: [cow_skin]
        }
    },
    
    onLoad () {
        // 计时参数
        this.intervalTime = 0
        // 随机生成一个随机数
        this.randomType = Math.floor(Math.random()*3)
    },

    start() {},
    
    update (dt) {
        // 间隔时间
        this.intervalTime +=dt
        let index = Math.floor(this.intervalTime/0.2)
        index=index%3
        // 获取一种类型的牛的类型
        let cowSet = this.cow_sets[this.randomType]

        // 获取精灵组件
        let sprite = this.node.getComponent(cc.Sprite)
        sprite.spriteFrame = cowSet.cows[index]
    },

    runCallBack(){
        cc.log("循环一次结束")
        this.randomType = Math.floor(Math.random()*3)
    }
});

4.将整个cow节点作为预制体。

5.添加button节点套绳按钮；精灵组件capture_btn和rope（套绳）节点，调整位置，默认隐藏。

6.为canvas添加脚本game.js，编写套绳逻辑。

7.bg_sprite添加子节点分数显示节点score和计时节点count_down

8.canvas添加结果显示的result节点（包括close按钮节点、标题节点和内容节点），其中close绑定的点击事件为game.js里面的closeBtn函数。

层次管理器的效果如下：

套绳逻辑、计时器、得分统计、关闭按钮重启游戏逻辑如下：

cc.Class({
    extends: cc.Component,

    properties: {
        rope_node:{
            default:null,
            type:cc.Node
        },
        cow_ins:{
            default: null,
            type: cc.Node
        },
        rope_img:{
            default:[],
            type: cc.SpriteFrame
        },
        cow_prefab:{
            default:null,
            type:cc.Prefab
        },
        time:0
    },

    // LIFE-CYCLE CALLBACKS:

    onLoad () {
        this.scoreNum = 0
        this.success = false
    },

    start () {
        // 获得计时器组件
        let countdownLabel = cc.find("Canvas/bg_sprite/count_down").getComponent(cc.Label)
        countdownLabel.string = "time:"+this.time+"s"
        // 倒计时
        this.schedule(function (){
            this.time--
            countdownLabel.string = "time:"+this.time+"s"

            if(this.time == 0){
                cc.log("游戏结束!")
                let resultNode = cc.find("Canvas/result")
                let titleLabel = resultNode.getChildByName("title").getComponent(cc.Label)
                let contentLabel = resultNode.getChildByName("content").getComponent(cc.Label)
                titleLabel.string = "最终得分 " + this.scoreNum

                switch (true){
                    case this.scoreNum<=3:
                        contentLabel.string = '套牛青铜'
                        break
                    case this.scoreNum<6:
                        contentLabel.string = '套牛钻石'
                        break
                    case this.scoreNum>=6:
                        contentLabel.string = '套牛王者'
                        break
                }

                resultNode.active = true
                cc.director.pause()
            }
        },1)
    },
    /**
     * 套绳按钮
     * @param event
     * @param customEventData
     */
    capture_click:function (event,customEventData){
        this.rope_node.active = true
        // 设置绳子在父节点下的层级顺序
        this.rope_node.setSiblingIndex(100)
        // 设置绳子起始位置
        this.rope_node.y = -480
        // 向上移动
        const up = cc.moveTo(0.5,this.rope_node.x,100)

        const down = cc.moveTo(0.5,this.rope_node.x,-600)

        const finish = cc.callFunc(function (){
            this.rope_node.getComponent(cc.Sprite).spriteFrame = this.rope_img[0]
            if(this.success){
                let scoreLabel = cc.find("Canvas/bg_sprite/score").getComponent(cc.Label)
                scoreLabel.string = "Score:" + this.scoreNum
                this.success = false
            }
        },this)

        // 回调函数：判定结果
        let result = cc.callFunc(function (){
            let currentX = this.cow_ins.x

            if(currentX >-50 && currentX<50){
                cc.log("捕捉成功")
                let bg_node = this.node.getChildByName("bg_sprite")
                bg_node.removeChild(this.cow_ins)
                let ropeType = this.cow_ins.getComponent("cow").randomType + 1
                this.rope_node.getComponent(cc.Sprite).spriteFrame = this.rope_img[ropeType]
                this.cow_ins = cc.instantiate(this.cow_prefab)
                this.cow_ins.y = 0
                bg_node.addChild(this.cow_ins)

                this.success = true
                this.scoreNum++
            }else{
                cc.log("捕捉失败")
            }
        },this)


        let sequence = cc.sequence(up,result,down,finish)

        this.rope_node.runAction(sequence)
    },

    /**
     * 关闭按钮
     * @param event
     * @param customEventData
     */
    closeBtn:function (event,customEventData){
        cc.director.resume()
        cc.director.loadScene("game")
    }

    // update (dt) {},
});

同时在cocos creator上将组件添加到对接位置：

（4）发布到微信平台

1. 配置微信开发者工具的安装路径：文件-设置-原生开发环境-WecheatGame程序路经

2. 构建发布：项目-构建发布-发布平台选择微信小游戏，点击构建。

3. 添加获取用户信息的按钮，一般设置为透明，覆盖全屏的按钮；获取用户信息后隐藏按钮，使用distory()方法；如果已经授权，直接获取用户信息；在cocos creator的层次管理器的bg_sprite下添加icon节点，主界面能够显示获取的用户头像。

// gams.js
start () {
        // 获得计时器组件
        let countdownLabel = cc.find("Canvas/bg_sprite/count_down").getComponent(cc.Label)
        countdownLabel.string = "time:"+this.time+"s"
        // 倒计时
        this.schedule(function (){
            this.time--
            countdownLabel.string = "time:"+this.time+"s"

            if(this.time == 0){
                cc.log("游戏结束!")
                let resultNode = cc.find("Canvas/result")
                let titleLabel = resultNode.getChildByName("title").getComponent(cc.Label)
                let contentLabel = resultNode.getChildByName("content").getComponent(cc.Label)
                titleLabel.string = "最终得分 " + this.scoreNum

                switch (true){
                    case this.scoreNum<=3:
                        contentLabel.string = '套牛青铜'
                        break
                    case this.scoreNum<6:
                        contentLabel.string = '套牛钻石'
                        break
                    case this.scoreNum>=6:
                        contentLabel.string = '套牛王者'
                        break
                }

                resultNode.active = true
                cc.director.pause()
            }
        },1)

        let sysInfo = wx.getSystemInfoSync()
        // 获取微信界面大小
        let screenWidth = sysInfo.screenWidth
        let screenHeight = sysInfo.screenHeight

        let button = wx.createUserInfoButton({
            type:'text',
            text:'',
            style:{
                left:0,
                top:0,
                width:screenWidth,
                height:screenHeight,
                lineHeight:40,
                backgroundColor:'#00000000',//最后两位为透明度
                color:'#fff',
                textAlign:'center',
                fontSize:16,
                borderRadius:4
            }
        })
        let self = this
        button.onTap((res)=>{
            // 获取微信用户信息
            let userInfo = res.userInfo
            // 获取头像组件
            self.wxLogin(userInfo)
            button.destroy();
        })

        wx.getUserInfo({
            success(res){
                // 拿到用户信息
                let userInfo = res.userInfo
                self.wxLogin(userInfo)
            },
            fail(res) {
                console.log(获取失败)
            }
        })
    },
    wxLogin(userInfo){
        let icon = cc.find("Canvas/bg_sprite/icon").getComponent(cc.Sprite)
        cc.loader.load({url:userInfo.avatarUrl,type:"png"},function (err,text){
            icon.spriteFrame = new cc.SpriteFrame(text)
        })
    },

4. 分享功能：在cocos界面拖动分享按钮图片到场景编辑器，该节点下添加button组件，该button组件绑定click事件。

// game.js
// 微信分享
    shareBtn:function (event,customEventData){
        wx.shareAppMessage({
            title: "用户点击按钮转发！",
            imageUrl: "https://img2.woyaogexing.com/2019/05/15/84fcfc1b0f424aa9bdce5faa162f4baf%21400x400.jpeg",
            success(res) {
                console.log(res)
            },
            fail(res) {
                console.log(res)
            }
        });
    }

5. banner广告：Banner 广告组件是由客户端原生的图片、文本控件组成的原生组件，层级最高，会覆盖在上屏 Canvas 上。开通banner需要进微信小程序后台，选择流量组，开通。

// game.js 可放在start()下。
let bannerAd = wx.createBannerAd({
    adUnitId: 'XXX',
    style: {
        left: 27.5,
        top: 80,
        width: 320
    }
});
bannerAd.onError(err => {
    console.log(err)
});

bannerAd.show();

⑤简单的前后台连接测试。

1. 微信后台登录

// 微信后台登录
let score = this.scoreNum;
wx.login({
    success(res) {
        if (res.code) {
            // 发起网络请求给游戏后台
            wx.request({
                url:"http://localhost:8080/updateScore",
                method: "POST",
                header:{
                    'content-type':'application/x-www-form-urlencoded'
                },
                data:{
                    code:res.code,
                    score:score
                }
            })
        } else {
            console.log("保存分数失败"+ res.errMsg);
        }
    }
})

注意：

（1）微信开发者工具会校验服务器域名是否合法，如果是本地测试，需要在本地设置里面：

（2）为了保证cocos creator的跨平台特性，应当尽量的减少使用第三方平台的api。多使用底层api来代替，比如wx.request()。方法如下，在cocso资源管理器script下新建HttpUtils.js:

// HttpUtils.js
class HttpUtils {
    request(option) {
        if (String(option) !== '[object Object]') return undefined
        option.method = option.method ? option.method.toUpperCase() : 'GET'
        option.data = option.data || {}
        var formData = []
        for (var key in option.data) {
            formData.push(''.concat(key, '=', option.data[key]))
        }
        option.data = formData.join('&')

        if (option.method === 'GET') {
            option.url += location.search.length === 0 ? ''.concat('?', option.data) : ''.concat('&', option.data)
        }

        var xhr = new XMLHttpRequest()
        xhr.responseType = option.responseType || 'json'
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    if (option.success && typeof option.success === 'function') {
                        option.success(xhr.response)
                    }
                } else {
                    if (option.error && typeof option.error === 'function') {
                        option.error()
                    }
                }
            }
        }
        xhr.open(option.method, option.url, true)
        if (option.method === 'POST') {
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
        }
        xhr.send(option.method === 'POST' ? option.data : null)
    }
}
module.exports = new HttpUtils();

引用方式：

// game.js
let httpUtils = require("HttpUtils");
cc.Class({
    extends: cc.Component,
    ...
    start(){
        ...
        wx.login({
                    success(res) {
                        if (res.code) {
                            httpUtils.request({
                                url:"http://localhost:8080/updateScore",
                                method: "POST",
                                data:{
                                    code:res.code,
                                    score:score
                                }
                            });
                          /*  wx.request({
                                url:"http://localhost:8080/updateScore",
                                method: "POST",
                                header: {
                                    'content-type':"application/x-www-form-urlencoded"
                                },
                                data:{
                                    code:res.code,
                                    score:score
                                }
                            })*/
                        }
                    }
                })
        ...
    }
})

4、微信小游戏发布注意事项

小游戏审核过程中的注意事项，微信小游戏提交审核要注意哪些问题

①服务类目需与内容保持一致

很多小游戏核不通过的主要原因是因为游戏类目与小游戏的内容不一致。

②小游戏名称需与内容相关

小游戏的名称具有唯一性，取名时必须要与小游戏的简介信息和内容相关，否则也会审核不通过。

③小游戏发布需要提供自审报告和软著

***自身报告

自审报告

《XXX》游戏软件著作权人为XXX，该游戏于2020年3月25日获得软件著作权登记证书，登记号为XXXXX。

已在游戏开始前全文登载《游戏健康忠告》，如下图所示：

（上面有健康游戏公告的内容：

抵制不良游戏，拒绝盗版游戏。注意自我保护，谨防受骗上当。适度游戏益脑，沉迷游戏伤身。合理安排时间，享受健康生活。）

我承诺上述内容真实、全面、有效。并保证此作品上网出版运营后不添加违反《出版管理条例》、《互联网信息服务管理办法》、《网络出版服务管理规定》、《移动游戏内容规范》等规定的内容。

XX年XX月XX 日

软件著作权建议确定游戏名字之后就开始申请。

④不可诱导分享

小程序的页面内容中，存在诱导类行为，包括但不限于诱导分享、诱导添加、诱导关注公众号、诱导下载等，要求用户分享、添加、关注或下载后才可操作的程序，含有明示或暗示用户分享的文案、图片、按钮、浮层、弹窗等的小程序，通过利益诱惑诱导用户分享、传播的小程序，用夸张言语来胁迫、引诱用户分享的小程序，强制或诱导用户添加小程序的，都将会被拒绝。