Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "the method of Wechat Mini Game development and configuration API interface". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "Wechat Mini Game Development configuration API Interface method" can help you solve the problem.

Wechat Mini Game developers configure by writing a game.json file in the root directory. Developer tools and clients need to read this configuration, complete relevant interface rendering and property settings, and can only use JavaScript to write Wechat Mini Game. WeChat Mini Programs's game running environment is a JavaScript VM bound with some methods.

File structure

Mini Game has only the following two necessary documents:

├── game.js └── game.json

Game.js Mini Game entry File

Game.json profile

Configuration

Mini Game developers configure by writing a game.json file in the root directory, developer tools and clients need to read the configuration, complete the relevant interface rendering and property settings.

Whether the screen orientation portraitshowStatusBarBoolean supported by deviceOrientationString displays the timeout of falsenetworkTimeoutNumber network requests in millisecond 60000networkTimeout.requestNumberwx.request, in millisecond 60000networkTimeout.connectSocketNumberwx.connectSocket, in millisecond 60000networkTimeout.uploadFileNumberwx.uploadFile, in millisecond 60000networkTimeout.downloadFileNumberwx.downloadFile, in millisecond 60000workersString multithreaded Worker configuration items. For details, please refer to the Worker document No key data Type description default deviceOrientationportrait vertical landscape horizontal screen value description sample configuration {"deviceOrientation": "portrait", "networkTimeout": {"request": 5000, "connectSocket": 5000, "uploadFile": 5000, "downloadFile": 5000}} wx API

You can only use JavaScript to write Mini Game. Mini Game runs in a JavaScript VM that binds some methods. Unlike browsers, this runtime environment does not have BOM and DOM API, only wx API. Next we'll show you how to use wx API to perform basic functions such as creating canvases, drawing graphics, displaying pictures, and responding to user interaction.

Create Canvas

You can create a Canvas object by calling the wx.createCanvas () interface.

Var canvas = wx.createCanvas ()

The canvas created at this time is an upper-screen Canvas that has been displayed on the screen and is as wide and high as the screen.

Console.log (canvas.width, canvas.height)

The first call to wx.createCanvas () in the whole Mini Game code creates the upper-screen Canvas, and then the call creates an off-screen Canvas. If you use the official Adapter, or weapp-adapter.js, in your project (see the official tutorial Adapter on what Adpater is), you will create an off-screen Canvas at this time. Because wx.createCanvas () has already been called once in weapp-adapter.js, and the returned canvas is exposed as a global variable. Suppose your project directory structure is as follows:

├── game.js ├── weapp-adapter.js └── game.json

Wx.createCanvas () has been called once in weapp-adapter.js and the returned canvas is exposed as a global variable.

/ / weapp-adapter canvas = wx.createCanvas ()

If you call wx.createCanvas () after require weapp-adapter.js, the created Canvas will be an off-screen Canvas because this is not the first call to that API.

Require ('. / weapp-adapter') var myCanvas = wx.createCanvas () draw on Canvas

But because there is no drawing on canvas, canvas is transparent. Using the 2d rendering context for simple drawing, you can see a red rectangle of 100x100 in the upper left corner of the screen.

Var context = canvas.getContext ('2d') context.fillStyle =' red' context.fillRect (0,0,100,100)

The 2d or WebGL rendering context RenderingContext can be obtained by the Canvas.getContext () method, and the rendering context can be drawn on Canvas by calling the rendering context method. Mini Game basically supports all the properties and methods of 2d and WebGL 1.0.For more information, please see RenderingContext. Due to the complexity of the drawing process using WebGL, the sample code in this article is written in a 2d rendering context.

You can change the width and height of the Canvas object by setting the width and height properties, but this also results in emptying the Canvas content and resetting the rendering context.

Canvas.width = 300canvas.height = 300display picture

Through the wx.createImage () interface, you can create an Image object. The Image object can load pictures. The picture is displayed on the screen only when the Image object is drawn to the Canvas.

Var image = wx.createImage ()

Set the src property of the Image object to load a local image or a network image. When the image is loaded, the registered onload callback function is executed, and the Image object can be drawn to the Canvas.

Image.onload = function () {console.log (image.width, image.height) context.drawImage (image, 0,0)} image.src = 'logo.png' to create multiple Canvas

During the running of Mini Game, the API wx.createCanvas is called for the first time to create an upscreen Canvas. Everything drawn on this canvas will be displayed on the screen. The second, third and subsequent calls to wx.createCanvas will create an off-screen Canvas. The content drawn on the off-screen Canvas is only drawn on the off-screen Canvas and will not be displayed on the screen.

Take the following code as an example, after running it, you will find that the red rectangle of 100x100 is not displayed on the screen at (0,0). Because we are drawing in an off-screen Canvas.

Var screenCanvas = wx.createCanvas () var offScreenCanvas = wx.createCanvas () var offContext = offScreenCanvas.getContext ('2d') offContext.fillStyle =' red' offContext.fillRect (0,0,100,100)

In order for the red rectangle to be displayed on the screen, we need to draw the offScreenCanvas off the screen to the screenCanvas on the upper screen.

Var screenContext = screenCanvas.getContext ('2d') screenContext.drawImage (offScreenCanvas, 0,0) animation

In JavaScript, animation effects are generally achieved through setInterval/setTimeout/requestAnimationFrame. Mini Game supports these API:

SetInterval ()

SetTimeout ()

RequestAnimationFrame ()

ClearInterval ()

ClearTimeout ()

CancelAnimationFrame ()

In addition, the frequency at which the requestAnimationFrame callback function is executed can be modified by wx.setPreferredFramesPerSecond () to reduce performance consumption.

Touch event

Responding to user interaction with the screen is an essential part of the game, and Mini Game provides the following API to listen for touch events with reference to TouchEvent in DOM:

Wx.onTouchStart ()

Wx.onTouchMove ()

Wx.onTouchEnd ()

Wx.onTouchCancel ()

Wx.onTouchStart (function (e) {console.log (e.touches)}) wx.onTouchMove (function (e) {console.log (e.touches)}) wx.onTouchEnd (function (e) {console.log (e.touches)}) wx.onTouchCancel (function (e) {console.log (e.touches)}) Global object

The window object is a global object in the browser environment. There is no BOM API in the environment in which Mini Game runs, so there is no window object. However, a global object GameGlobal is provided, and all globally defined variables are properties of GameGlobal.

Console.log (GameGlobal.setTimeout = = setTimeout) console.log (GameGlobal.requestAnimationFrame = requestAnimationFrame) / / true

Developers can mount their encapsulated classes and functions to GameGlobal as needed.

GameGlobal.render = function () {/ / the specific implementation of the omission method.} render ()

GameGlobal is a global object and itself an object with circular references.

Console.log (GameGlobal = GameGlobal.GameGlobal)

Console.log cannot output objects with circular references to vConsole on the real machine. Therefore, please comment on the code such as console.log (GameGlobal) when debugging the real machine, otherwise such an error will occur

An object width circular reference can't be logged Mini Game Update

There are two situations when Mini Game starts, one is "cold start" and the other is "hot start". If the user has already opened a Mini Game, and then reopened the Mini Game within a certain period of time, there is no need to restart at this time, just switch the backstage Mini Game to the foreground, this process is hot start; cold start refers to the situation when the user opens it for the first time or Mini Game is actively destroyed by Wechat, and Mini Game needs to be reloaded and started.

Update mechanism

If a new version is found during the cold startup of Mini Game, the new version of the code package will be downloaded asynchronously and started with the existing package locally on the client, that is, the new version of Mini Game will not be applied until the next cold start. If you need to apply the latest version immediately, you can use wx.getUpdateManager () API to handle it.

Example of using getUpdateManager

After the v1.9.90 base library, you can obtain a globally unique version update manager through wx.getUpdateManager () to manage Mini Game updates. In addition, download the latest version of developer tools (1.02.1803130 or above) to support debugging on developer tools.

Since API is only supported by the new version, please determine whether it supports it before using it, for example:

If (wx.getUpdateManager) {console.log ('support wx.getUpdateManager')}

After obtaining the updateManager instance, updateManager includes the following methods:

OnCheckForUpdatecallback will call back onUpdateReadycallback when the new version information is requested from Wechat backend. When the download of the new version is complete, it will callback onUpdateFailedcallback. When the download of the new version fails, it will callback applyUpdate. When the download of the new version is completed, calling this method will force the new version on the current Mini Game application and restart the method parameter description.

The callback result of onCheckForUpdate (callback) indicates:

Does hasUpdateBoolean have a new version attribute type description?

Note: the check update operation is automatically triggered by Wechat when Mini Game is cold, and does not need to be triggered actively by the developer. The developer only needs to listen to the check result.

The callback result of onUpdateReady (callback) indicates:

When Wechat checks that there is a new version of Mini Game, it will actively trigger the download operation (no need to be triggered by the developer). When the download is complete, it will inform the developer through onUpdateReady.

The callback result of onUpdateFailed (callback) indicates:

When Wechat checks that there is a new version of Mini Game, it will actively trigger the download operation (no need to be triggered by the developer). If the download fails (possibly due to network reasons, etc.), it will inform the developer through onUpdateFailed.

ApplyUpdate () description:

When a new version of Mini Game has been downloaded (that is, an onUpdateReady callback has been received), you can use this method to force Mini Game to restart and apply the latest version.

Complete use of the sample if (typeof wx.getUpdateManager = = 'function') {const updateManager = wx.getUpdateManager () updateManager.onCheckForUpdate (function (res) {/ / callback console.log (res.hasUpdate)} after requesting the new version information) updateManager.onUpdateReady (function () {/ / the new version has been downloaded Call the new version of the applyUpdate application and restart updateManager.applyUpdate () updateManager.onUpdateFailed (function () {/ / the new version failed to download})} about "how to develop and configure the API interface for Wechat Mini Game". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.