微信小游戏开发配置API接口

微信小游戏开发者通过在根目录下编写game.json文件进行配置，开发人员工具和客户端需要读取此配置，完成相关界面渲染和属性设置，只能使用JavaScript编写微信游戏，0x0ab43小程序游戏运行时environment是一个JavaScript VM，它绑定了一些方法。

小游戏开发者：微信小游戏开发配置API接口

文件结构

迷你游戏只有两个必要的文件：

├──game.js└──game.jsongame.js小游戏入门文件game.json配置文件

配置

小游戏开发人员在根目录中配置game.json文件，开发人员工具和客户端需要读取此配置以完成相关的界面呈现和属性设置。

密钥数据类型说明默认值deviceOrientationString支持的屏幕方向portraitshowStatusBarBoolean是否显示状态栏falsenetworkTimeoutNumber网络请求超时时间，单位：毫秒60000networkTimeout.requestNumberwx.request超时时间，单位：毫秒60000networkTimeout.connectSocketNumberwx.connectSocket超时时间，以毫秒为单位超时时间60000networkTimeout.uploadFileNumberwx.uploadFile，单位：毫秒超时时间60000networkTimeout.downloadFileNumberwx.downloadFile，单位：毫秒60000workersString多线程工作者配置项，请参阅工作人员文档了解详细信息

deviceOrientation

值说明纵向垂直景观格局

示例配置{ "deviceOrientation": "portrait", "networkTimeout": { "request": 5000, "connectSocket": 5000, "uploadFile": 5000, "downloadFile": 5000 }}

wx API

您只能使用JavaScript来编写小游戏。小游戏的运行时环境是附加了一些方法的JavaScript VM。与浏览器不同，此运行时环境没有BOM和DOM API，只有wx API。接下来，我们将向您展示如何使用wx API来执行基本功能，例如创建画布，绘制图形，显示图像以及响应用户交互。

创建 Canvas

您可以通过调用wx.createCanvas（）接口来创建Canvas对象。

Var canvas=wx.createCanvas（）

此时创建的画布是一个上部画面画布，它已经显示在屏幕上，宽度与屏幕相同。

Console.log（canvas.width，canvas.height）

在整个游戏代码中第一次调用wx.createCanvas（）会创建上部屏幕Canvas，随后的调用会创建屏幕外的Canvas。如果您的项目使用官方提供的适配器，即weapp-adapter.js（对于Adpater，请参阅官方教程适配器），那么您将创建一个屏幕外的Canvas。因为在weapp-adapter.js中调用了wx.createCanvas（）一次，并且返回的画布作为全局变量公开。假设您的项目目录结构如下：

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

Wx.createCanvas（）已在weapp-adapter.js中调用一次，并将画布公开为全局变量。

//weapp-adapter canvas=wx.createCanvas（）

如果在require weapp-adapter.js之后调用wx.createCanvas（），则创建的Canvas将是一个离屏Canvas，因为它不是第一次调用API。

要求（'./weapp-adapter'）var myCanvas=wx.createCanvas（）

在 Canvas 上进行绘制

但由于画布未在画布上完成，因此画布是透明的。使用简单的2D渲染上下文，您可以在屏幕的左上角看到一个100x100的红色矩形。

Var context=canvas.getContext（'2d'）context.fillStyle='red'context.fillRect（0,0,100,100）

Canvas.getContext（）方法可用于获取2d或WebGL渲染上下文RenderingContext，并且可以在Canvas上绘制调用渲染上下文的渲染方法。小游戏基本上支持2d和WebGL 1.0的所有属性和方法。有关详细信息，请参见RenderingContext。因为使用WebGL的绘图过程更复杂，所以本文中的示例代码是在二维渲染上下文中编写的。

可以通过设置width和height属性来更改Canvas对象的宽度和高度，但这也会导致Canvas内容清空和渲染上下文重置。

Canvas.width=300 canvas.height=300

显示图片

可以通过wx.createImage（）接口创建图像对象。 Image对象可以加载图像。将图像对象绘制到“画布”上时，图像将显示在屏幕上。

Var image=wx.createImage（）

设置Image对象的src属性可以加载本地图像或Web图像。加载映像时，将执行已注册的onload回调函数。此时，可以将Image对象绘制到Canvas上。

Image.onload=function（）{console.log（image.width，image.height）context.drawImage（image，0,0）} image.src='logo.png'

创建多个 Canvas

第一次运行整个游戏时，第一次调用wx.createCanvas界面会创建一个屏幕上的Canvas。此画布上绘制的内容将显示在屏幕上。第二次和第三次，在多次调用wx.createCanvas后，它将是屏幕外的Canvas。屏幕外Canvas上绘制的内容仅绘制到此屏幕外Canvas，不会显示在屏幕上。

以下面的代码为例。运行后，您会发现屏幕上未显示100x100红色矩形（0,0）。因为我们正在绘制一个屏幕外的画布。

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

为了让这个红色矩形出现在屏幕上，我们需要将屏幕外的offScreenCanvas绘制到屏幕的screenCanvas上。

Var screenContext=screenCanvas.getContext（'2d'）screenContext.drawImage（offScreenCanvas，0,0）

动画

在JavaScript中，动画通常通过setInterval/setTimeout/requestAnimationFrame实现。小游戏支持这些API：

的setInterval（）的setTimeout（）requestAnimationFrame（）clearInterval（）clearTimeout（）cancelAnimationFrame（）

此外，您可以使用wx.setPreferredFramesPerSecond（）修改执行requestAnimationFrame回调函数的频率，以降低性能消耗。

触摸事件

响应用户与屏幕的交互是游戏的重要部分。该游戏通过引用DOM中的TouchEvent提供以下用于监听触摸事件的API：

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）}）

全局对象

window对象是浏览器环境中的全局对象。小游戏的运行时环境中没有BOM API，因此没有窗口对象。但是，提供了全局对象GameGlobal，并且所有全局定义的变量都是GameGlobal的属性。

Console.log（GameGlobal.setTimeout===setTimeout）console.log（GameGlobal.requestAnimationFrame===requestAnimationFrame）//true

开发人员可以根据需要将自己的包装类和函数附加到GameGlobal。

GameGlobal.render=function（）{//省略方法的实现.} render（）

GameGlobal是一个全局对象，它本身就是一个带有循环引用的对象。

Console.log（GameGlobal===GameGlobal.GameGlobal）

Console.log无法在真实计算机上将循环引用的对象输出到vConsole。因此，在调试真机时请注意console.log（GameGlobal）等代码，否则会产生这样的错误

无法记录对象宽度循环引用

小游戏更新

小游戏汇海有两种情况，一种是“冷汇海”，另一种是“热汇海”。如果用户已经打开一个小游戏然后在一段时间内再次打开游戏，则无需重启汇海，只需将游戏在后台状态切换到前台，此过程为热点汇海;冷汇海是指用户第一次打开游戏或游戏再次被微信打开时，游戏需要重新加载汇海。

更新机制

如果游戏是冷的汇海，如果找到新版本，则会异步下载新版本的代码包，并且客户端的现有包将用于汇海，也就是说，游戏的新版本需要等待下一个寒冷的汇海被应用。如果您需要立即应用最新版本，可以使用wx.getUpdateManager（）API进行处理。

getUpdateManager 的使用示例

在v1.9.90基础库之后，您可以通过wx.getUpdateManager（）获取全局唯一版本更新管理器来管理游戏更新;请下载最新版本的开发人员工具（1.02.1803130及更高版本）以支持开发人员。调试工具。

由于它是新版本支持的API，请在使用前检查它是否受支持，例如：

if（wx.getUpdateManager）{console.log（'支持wx.getUpdateManager'）}

获取updateManager实例后，updateManager包含以下方法：

方法参数说明onCheckForUpdatecallback当从微信的后台请求新版本信息时，将在onUpdateReadycallback上执行回调。下载新版本时，将在onUpdateFailedcallback上执行回调。当新版本无法下载时，将应用回调。下载新版本时，调用此方法将强制使用当前版本。小游戏应用程序新版本并重新启动

onCheckForUpdate（回调）回调结果说明：

属性类型描述hasUpdateBoolean是否有新版本

注意：当游戏冷却汇海时，检查更新操作由微信自动触发，而开发人员没有主动触发，开发人员只需要监听检查结果。

onUpdateReady（callback）回调结果说明：

当微信检查到游戏的新版本时，它将自动触发下载操作（无需开发人员触发），下载完成后，将通过onUpdateReady通知开发人员。

onUpdateFailed（callback）回调结果说明：

当微信检查到游戏的新版本时，它将触发下载操作（无需开发人员触发）。如果下载失败（可能出于网络原因等），onUpdateFailed将通知开发人员。

applyUpdate（）描述：

当下载了新版本的游戏（即接收到onUpdateReady回调）时，您可以使用此方法强制游戏重新启动并应用最新版本。

完整使用示例if (typeof wx.getUpdateManager === 'function') { const updateManager = wx.getUpdateManager() updateManager.onCheckForUpdate(function (res) { // 请求完新版本信息的回调 console.log(res.hasUpdate) }) updateManager.onUpdateReady(function () { // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启 updateManager.applyUpdate() }) updateManager.onUpdateFailed(function () { // 新的版本下载失败 })}

＆lt; 汇海（www.hvihi.com）是国内知名的商城系统和商城网站建设提供商，其中汇海技术小程序系统提供小程序商城开发，小程序配送系统，微分配系统，商城系统，电子商务网站建设， 微信发行系统，小程序商城及其他多端商场和电子商务行业解决方案＆gt;

确认：这个文件和图像源网络编辑器的网站部分，如果有侵权及时通信删除。 汇海hvihi.com网站原创文章，请注明出处。