How to create WeChat games with CocosCreator

CocosCreator supports publishing WeChat Mini Programs with one click since version 1.8. Here are the detailed publishing steps:

1. Download WeChat developer tools from WeChat public platform

Address: https://mp.weixin.qq.com/debug/wxagame/dev/devtools/download.html?t=2018115, select the corresponding version according to your needs.

2. Cocoscreator settings

Select Cocos Creator --> Preferences --> Native Development Environment, configure the WechatGame program path, click Save and Close.

3. Configure build release

The following interface:

The game name can be written as needed, and the publishing platform can be WeChat Game. The appid can be left blank for the time being, because WeChat mini games can support debugging without appid, but the functions will be limited. According to the needs of the project, select the initial scene and the scenes involved in the construction. According to official documentation, the purpose of checking MD5 Cache is to perform version control (if you don’t understand, just check it first, it will be useful below). For details, please refer to the official documentation. When you see the content pointed by arrow 3 shows completed, it means the build has been successful. Because I built it directly successfully without encountering any unexpected situations, I am not sure if there are any pitfalls. If you encounter a problem, the most direct way is to use the creator's helloworld project to compile it. If the compilation fails, check whether there is a problem with your environment configuration. Everything is OK, click Run.

4. Open the applet project

If you open it for the first time, you will see the following interface:

Select the mini program project and enter the following interface

Select the project directory, (project path)\(project name)\build\wechatgame. If there is an appId, fill it in directly, or you can register. I just made a demo and tried it out, so I directly selected the mini game and click OK.

5. Enter WeChat development tools

At this time you can see the game interface you edited. You can also play the game directly on the interface to check if there are any problems with the game. By the way, I would like to recommend a tutorial to newbies: http://www.byjth.com/CocosCreator/66.html, a blog written by "It gets dark when you close your eyes". It is very suitable for newbies to learn how to use Creator to make games. It is useless to just read the tutorial. The key is to learn more and do more. This game was made according to his tutorial.

6. Compile

You can see the running of this mini game in the simulator interface on the left side of the tool.

7. Preview

You can experience your first mini-game on your mobile phone by scanning the QR code with WeChat. But there is one thing you need to pay attention to. If you follow this tutorial, you may encounter this problem (the code package size is xxxx kb, the upper limit is 4096 kb, please delete the file and try again). If you are lucky and the package size is just less than 4096 kb, then you can play with your mobile phone. Okay, don’t worry, let’s fill the hole now. According to the official documentation, in the environment of mini-games, resource management is the most special part. One of the rules is that the size of the mini-game package cannot exceed 4mb, including all codes and resources. Additional resources must be downloaded through network requests. This is a bit embarrassing. It is only 4M, so we can only download it from the Internet. Don't worry, it is very easy to handle because cocoscreator has already encapsulated it for us and can be called directly. The specific steps are as follows:

• When building, check md5Cache, which has been checked above. If it is not checked, please rebuild it.
• Upload the entire res folder in the mini-game release package to the server.
• Delete the res folder in the release package.
• In main.js, find the corresponding code snippet and add the setting of REMOTE_SERVER_ROOT require('libs/wx-downloader.js'); // Add this line of code to modify the URL to the correct res remote path. wxDownloader.REMOTE_SERVER_ROOT = 'https://www.xxx.com/remote-res/'; boot(); PS: If you don't know where to add it, search for boot() in the main file; find else if (true) and add it here. In addition, the network address points to the parent directory of res, that is, the upper level of res. However, I later discovered that there was also this path under game.js, so I wrote the URL directly there, and it worked. I’m not sure about the specifics, but just write it in one of the two places.
• For the testing phase, you may not be able to deploy to the official server and need to use a local server for testing. In this case, please open the details page in WeChat Developer Tools and check the Do not verify secure domain name, TLS version, and HTTPS certificate option in the project settings.

8. Preview success

A QR code will be generated. Use WeChat to scan it and open the mini-game. At this time, you may see compilation exceptions. Don't worry too much. Just take a look at the running effect first. You may see a completely black screen. Click ... in the upper right corner and select Open debugging. Scan the QR code again and the program will run on your phone.
At this point, the development and deployment of the mini-game is completed.

The above is the detailed content on how to use CocosCreator to make WeChat mini-games. For more information about making WeChat mini-games with CocosCreator, please pay attention to other related articles on 123WORDPRESS.COM!