search
HomeWeChat AppletWeChat DevelopmentAn introduction to WeChat mini games based on WeChat development tools

The article explains it in detail, allowing you to get started quickly. First install the development tools,Go to the Developer Tools Download Page, and download the corresponding installation package according to your operating system for installation. Next, you can develop WeChat mini games.

Your first mini game

Create a new project, select the mini program project, and select the hard disk path where the code is stored . Currently, the mini-game does not provide public registration. You can click to experience the mini-game using the AppID-less mode. Give your project a nice name, and finally, check "Create a game quick start template" (note: you have to select an empty directory to have this option), click OK, and you will get your first It's a little game.

Click Compile on the top menu to preview your first mini-game in the IDE.

Real device preview

Click tool You can see the performance of this mini-game in the simulator interface on the left side of the tool by pressing the compile button. Click the preview button to experience your first mini-game on your phone through WeChat scanning.

##File structure

Mini games only The following two necessary files:

  • game.js mini-game entry file

  • game .json configuration file

Configuration

Small game developers write in the root directory A game.json file is configured. Developer tools and clients need to read this configuration to complete related interface rendering and property settings.

##deviceOrientation

Example configuration

wx API
##1

2

3

4

5

##6

7

##8

9

##
{
    "deviceOrientation": "portrait",
    "networkTimeout": {
        "request": 5000,
        "connectSocket": 5000,
        "uploadFile": 5
000,
        "downloadFile": 5000
    }
}

You can only use JavaScript to write mini-games. The running environment of the mini game is a JavaScript VM bound with some methods. Unlike the browser, this running environment does not have BOM and DOM API, only wx API. Next, we will introduce how to use wx API to complete basic functions such as creating canvas, drawing graphics, displaying pictures, and responding to user interaction.

Create Canvas

Call the wx.createCanvas() interface to create a Canvas object.

##1

varcanvas = wx.createCanvas()

此时创建的 canvas 已经显示在了屏幕上,且与屏幕等宽等高。

1

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

但是由于没有在 canvas 上进行绘制,所以 canvas 是透明的。使用 2d 渲染上下文的进行简单的绘制,可以在屏幕左上角看到一个 100x100 的红色矩形。

1

2

3

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 的绘制过程较为复杂,所以本文中的示例代码都以 2d 渲染上下文的绘制方法编写。

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

1

2

canvas.width = 300
canvas.height = 300

显示图片

通过 wx.createImage() 接口,可以创建一个 Image 对象。Image 对象可以加载图片。当 Image 对象被绘制到 Canvas 上时,图片才会显示在屏幕上。

1

varimage = wx.createImage()

设置 Image 对象的 src 属性可以加载一张本地图片或网络图片,当图片加载完毕时会执行注册的 onload 回调函数,此时可以将 Image 对象绘制到 Canvas 上。

1

2

3

4

5

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

 创建多个 Canvas

在整个小游戏运行期间,首次调用 wx.createCanvas 接口创建的是一个上屏 Canvas。在这个 canvas 上绘制的内容都将显示在屏幕上。而第二次、第三次等后几次调用 wx.createCanvas 创建的都会是离屏 Canvas。在离屏 Canvas 上绘制的内容仅仅只是绘制到了这个离屏 Canvas 上,并不会显示在屏幕上。

以如下代码为例,运行后会发现屏幕上并没有在 (0, 0) 的位置显示 100x100 的红色矩形。因为我们是在一个离屏的 Canvas 绘制的。

1

2

3

4

5

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

为了让这个红色矩形显示在屏幕上,我们需要把离屏的 offScreenCanvas 绘制到上屏的 screenCanvas 上。

1

2

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()

01

02

03

04

05

06

07

08

09

10

11

12

13

14

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)

相关文章:

五个微信小游戏的技术要点

微信公众平台开发实现2048游戏的方法,公众2048

相关视频:

0基础微信开发入门视频教程

The above is the detailed content of An introduction to WeChat mini games based on WeChat development tools. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
3分钟快速使用ChatGPT教程,用它帮我写简历,太牛了3分钟快速使用ChatGPT教程,用它帮我写简历,太牛了Apr 11, 2023 pm 07:40 PM

已经火了很久了,身边的同事也用它来进行一些调研,资源检索,工作汇报等方面都有很大的的效率提升。很多人问ChatGPT会不会取代程序员?我的回答是:不会!ChatGPT并不是我们的敌人,相反的是,它是我们的好帮手。未来人和人的竞争,可能就会从原先的我懂得更多,我实操经验更丰富,变成了我比你更会用工具,我比你更懂得提问,我比你更会发挥机器人的最大特性,所以,为了不掉队,你还不准备体验下ChatGPT吗?快速体验面试官经常会问你的项目有啥重难点?很多人不会回答,直接看看ChatGPT怎么说,真的太牛了

u盘怎么重装win11系统的步骤教程u盘怎么重装win11系统的步骤教程Jul 08, 2023 pm 09:33 PM

微软近日透露了将推出win11系统,很多用户都在期待新系统呢。网上已经有泄露关于win11的镜像安装系统。大家不知道如何安装的话,可以使用U盘来进行安装。小编现在就给大家带来了win11的U盘安装教程。1、首先准备一个8G以上大小的u盘,将它制作成系统盘。2、接着下载win11系统镜像文件,将它放入u盘中,大家可以直接点击右侧的链接进行下载。3、下载完成后装载该iso文件。4、装载完成之后会进入新的文件夹,在其中找到并运行win11的安装程序。5、在列表中选择“win11”然后点击“下一步”。6

PHP基础教程:从入门到精通PHP基础教程:从入门到精通Jun 18, 2023 am 09:43 AM

PHP是一种广泛使用的开源服务器端脚本语言,它可以处理Web开发中所有的任务。PHP在网页开发中的应用广泛,尤其是在动态数据处理上表现优异,因此被众多开发者喜爱和使用。在本篇文章中,我们将一步步地讲解PHP基础知识,帮助初学者从入门到精通。一、基本语法PHP是一种解释性语言,其代码类似于HTML、CSS和JavaScript。每个PHP语句都以分号;结束,注

老电脑系统xp升级win7教程步骤老电脑系统xp升级win7教程步骤Jul 07, 2023 pm 10:21 PM

xp系统曾经是使用最多的系统,不过随着硬件的不断升级,xp系统已经不能发挥硬件的性能,所以很多朋友就想升级win7系统,下面就和大家分享一下老电脑升级win7系统的方法吧。1、在小白一键重装系统官网中下载小白三步装机版软件并打开,软件会自动帮助我们匹配合适的系统,然后点击立即重装。2、接下来软件就会帮助我们直接下载系统镜像,只需要耐心等候即可。3、下载完成后软件会帮助我们直接进行在线重装Windows系统,请根据提示操作。4、安装完成后会提示我们重启,选择立即重启。5、重启后在PE菜单中选择Xi

2023年最流行的5个php开发框架视频教程推荐2023年最流行的5个php开发框架视频教程推荐May 08, 2017 pm 04:26 PM

如果想快速进行php web开发,选择一个好用的php开发框架至关重要,一个好的php开发框架可以让开发工作变得更加快捷、安全和有效。那2023年最流行的php开发框架有哪些呢?这些php开发框架排名如何?

教你学会win10如何删除temp文件夹教你学会win10如何删除temp文件夹Jul 08, 2023 pm 04:13 PM

在win10的系统盘中,很多网友会看到一个temp文件夹,里面占用的内存非常大,占用了c盘很多空间。有网友想删除temp文件夹,但是不知道能不能删,win10如何删除temp文件夹。下面小编就教下大家win10删除temp文件夹的方法。首先,Temp是指系统临时文件夹。而很多收藏夹,浏览网页的临时文件都放在这里,这是根据你操作的过程临时保存下来的。如有需要,可以手动删除的。如何删除temp文件夹?具体步骤如下:方法一:1、按下【Win+R】组合键打开运行,在运行框中输入temp,点击确定;2、此

禁用win10更新的步骤教程禁用win10更新的步骤教程Jul 08, 2023 pm 03:21 PM

win10系统会经常推送系统自动更新,有时候正在忙的却突然弹出系统更新,非常不友好。那么如何关闭win10系统自动更新呢?下面,就随小编看看具体操作方法帮你禁用win10更新,大家快来看看是如何操作的吧。1、打开电脑的左下角,找到下方的设置点击进入,操作图片如下2、在windows设置,找到更新和安全点击进入,操作如下。3、点击windows更新,找到高级选项点击进入,操作如下。4、进入windows更新系统的高级选项,关闭更新配置就可以了,如图所示。以上就是禁用win10更新的步骤教程啦,希望

什么是OCO订单?什么是OCO订单?Apr 25, 2023 am 11:26 AM

二选一订单(OneCancelstheOther,简称OCO)可让您同时下达两个订单。它结合了限价单和限价止损单,但只能执行其中一个。换句话说,只要其中的限价单被部分或全部成交、止盈止损单被触发,另一个订单将自动取消。请注意,取消其中一个订单也会同时取消另一个订单。在币安交易平台进行交易时,您可以将二选一订单作为交易自动化的基本形式。这个功能可让您选择同时下达两个限价单,从而有助于止盈和最大程度减少潜在损失。如何使用二选一订单?登录您的币安帐户之后,请前往基本交易界面,找到下图所示的交易区域。点

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

SublimeText3 English version

SublimeText3 English version

Recommended: Win version, supports code prompts!