微信小游戏---引入第三方库的方法

引言

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

其实引入第三方库很简单。第三方库一般来说是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());}
}

这个类很简单，就是使用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");

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

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

添加后，如下：

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

然后，不必使用Laya IDE发布，直接使用微信开发者工具，再运行代码代码：

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

总结

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

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