后要话今后26后6-6九加625+2+2加九叫5叫

微信小游戏的开发中,群里面经常有一些同行问如何引入第三方库?

其实引入第三方库很简单。第三方库一般来说是JS文件,不管我们使用的是Laya引擎,还是白鹭引擎,还是cocos引擎,最后发布编译之后,都是JS文件。

也就是说,微信开发者工具跑的都是编译之后的JS文件。第三方库的JS文件直接可以放在开发者工具运行的文件夹下面,此时,游戏代码就可以调用第三方库的代码了。

 

举例

具体怎么操作呢?我这里举一个例子。

以状态机为例,其官方库是:https://github.com/jakesgordon/javascript-state-machine

想要达到的效果是,引入状态机库,使用状态机管理状态转移,输出一些日志。如果日志正确输出,说明引入库文件正确,达到引入第三方库的目的!

 

配置

工具引擎

Laya开发IDE工具
引擎使用 1.8.0.1beta

调试工具

Chrome浏览器
微信开发者工具

编程语言

TS

 

具体操作

想要达到效果,需要代码中引入状态机的JS文件。其核心的文件就是
https://github.com/jakesgordon/javascript-state-machine/blob/master/dist/state-machine.min.js

这里的state-machine.min.js文件就是状态机的核心代码,就是游戏当中需要使用的状态机库文件。有了这个文件,就可以使用状态机进行游戏逻辑的开发了。官方提供的仓库里面有很多东西,其他都不需要。

把这个文件下载下来,放在新建的工程的src文件夹下面。如图:
在这里插入图片描述

然后,定义一个类,代码如下:

class StateMachineUtil {
    
    constructor() {
        console.log('main -> state machine:', StateMachine);
        this.init();
    }

    private init(): void {
        let fsm = new StateMachine({
            init: 'green',
            transitions: [
                { name: 'warn',  from: 'green',  to: 'yellow' },
                { name: 'panic', from: 'yellow', to: 'red'    },
                { name: 'calm',  from: 'red',    to: 'yellow' },
                { name: 'clear', from: 'yellow', to: 'green'  }
            ],
            methods: {
                onWarn: function() {
                    console.log('on warn.');
                },
                onBeforeWarn: function() {
                    console.log('on before warn.');
                },
                onLeaveWarn: function() {
                    console.log('on leave warn.');
                },
                onEnterYellow: function() {
                    console.log('on enter yellow.');
                },
                onLeaveYellow: function() {
                    console.log('on leave yellow.');
                },
            } 
        });

        console.log('fsm state:', fsm.state);
        fsm.warn();
        fsm.panic();
        fsm.calm();
        fsm.clear();
        console.log('is fsm:', fsm.is('green'));
        console.log('all state:', fsm.allStates());
        console.log('all transitions:', fsm.allTransitions());
        console.log('transitions:', fsm.transitions());
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46

这个类很简单,就是使用StateMachine状态机类搞了一些状态的转移以及状态机的一些方法。

这些状态机的用法不是重点,大概知道能用就行。上面代码运行之后,会输出一些日志。

如果这些日志正常输出,那说明状态机的库代码已经正确引入,并能使用了。

 

Chrome浏览器测试

完成上面的准备之后,我们先用Chrome浏览器运行
在这里插入图片描述
运行Chrome浏览器之后,按键F12 打开浏览器的日志平台:
在这里插入图片描述
结果来看,不对啊。错误日志说明StateMachine类并没有引入,怎么回事儿呢?

其实,我们需要了解Chrome浏览器运行的是什么地方的代码。
在这里插入图片描述
代码编译之后,bin目录下面的index.html是Chrome浏览器运行的代码的入口。

打开index.html文件,你会发现里面引入了游戏运行所需要的JS文件。

在这里,我们把src目录下放的state-machine.min.js文件,手动引入,如图:
在这里插入图片描述

然后现在再编译运行。结果:
在这里插入图片描述
红线圈中的部分都是StateMachineUtil类中输出的日志信息。 代码正确运行。

说明StateMachine类库代码引入正确,代码可以正确使用。

 

微信开发者工具测试

既然在Chrome浏览器中运行成功,那跑在微信开发者工具上,怎么样呢?

发布微信小游戏代码,微信开发者工具上跑一下试试看。

结果:
在这里插入图片描述

这个结果跟我们料想的不太一样。
怎么回事儿呢?Chrome浏览器上面跑的好好地,怎么到了微信开发者工具上面就不行了呢?

此时,仍然需要明白一件事情。我们在使用Laya IDE发布微信小游戏的代码的时候,并不会把src目录下的state-machine.min.js文件一起打包。

Laya IDE发布微信小游戏的代码目录是:
在这里插入图片描述
注意里面的game.js文件,是微信小游戏的入口文件。而code.js是微信小游戏的代码文件,所有微信小游戏的游戏逻辑都在code.js中。所以这个文件会比较大。

代码中写的StateMachineUtil类是存在code.js文件中的,可以打开code.js文件,查找到StateMachineUtil单词。既然StateMachineUtil单词有,那StateMachineUtil类中引入的StateMachine这个单词肯定也有,对不对?

是的,同样可以查找到!

既然如此,那就像Chrome浏览器运行代码一样,也需要手动添加state-machine.min.js文件。只不过添加的方式不同。Chrome浏览器添加方式是在index.html中引入即可。那微信小游戏如何引入呢?

把state-machine.min.js文件放在微信小游戏发布目录下,与code.js game.js文件放在同一级目录下。然后打开game.js文件,添加下面的内容:

StateMachine = require("state-machine.min.js");
  • 1

更改前的game.js文件内容如下:

require("weapp-adapter.js");
require("./code.js");
  • 1
  • 2

添加后,如下:

StateMachine = require("state-machine.min.js");
require("weapp-adapter.js");
require("./code.js");
  • 1
  • 2
  • 3

然后,不必使用Laya IDE发布,直接使用微信开发者工具,再运行代码代码:
在这里插入图片描述

通过结果来看,结果正常。状态机的代码正确运行,并输出。
说明第三方库代码引入正确!

 与也 

总结

Chrome浏览器方式引入,通过手动在index.html中引入即可。
微信小有戏方式引入,需要在game.js中require引入即可。

不管Chrome浏览器方式引入,还是微信小游戏方式引入,都是代码层级的调用。只不过方式不同而已。搞明白代码的运行机制,明白前因后果,问题就迎刃而解啦。