0基础开发小程序游戏

从2017年1月微信小程序正式发布算起，到今天差不多过去了一年半。

更有人戏称小程序是互联网的第五大发明。由于微信自身的流量庞大，所以很多开发者看好小程序。而小程序之所以这么火，是因为其自身的引流模式和盈利模式，毕竟老板都喜欢既会技术、又知道如何将技术变现的开发人员。

1

什么是小程序

小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用 。

2

开发一个小程序

了解完小程序到底是什么，接下来是本文的重点 。没接触过小程序编程的，都看过来 。这一部分将从零开始开发一款微信小程序，功能很简单，是一个猜拳游戏。单击“开始”按钮后，会快速切换“锤子”、“剪刀”和“布”，直到按“停止”按钮，会显示“锤子”、“剪刀”和“布”中的一个，该游戏可以双方或多方进行，猜拳的规则就不多说了，大家都清楚。

3

搭建开发环境

腾讯推出微信小程序的同时，也推出了自己的开发工具，开发工具的最新版本下载地址：

https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1477656486010

本文主要使用 Mac OS X 版本进行讲解，Windows 版本和 Mac OS X 大同小异，并不影响学习。运行微信小程序 IDE 后，会看到如下图所示的窗口：

单击“小程序项目”按钮，会显示下图的小程序项目管理页面：

新创建小程序项目，需要单击右下角的加号按钮，会弹出如下图所示的页面，选择一个空的项目目录，然后输入 AppID，如果不输入 AppID，无法在真机上发布，最后输入项目名称。

一切都搞定后，单击“确定”按钮创建小程序项目，主界面如下图所示：

第一个小程序已经可以运行了，是不是很简单！

4

介绍一下猜拳游戏布局

单击如下图所示的 index.wxml 文件，输入布局代码，wxml 文件是小程序中的布局文件，用于描述小程序中的 UI。

下面先看一下猜拳游戏的主界面，如下图所示：

猜拳游戏的布局是纵向显示了三个组件：文本组件（text）、图像组件（image）和按钮组件（button）。在创建小程序工程时，默认建立了两个页面：index 和 logs。我们不需要管 logs，在这个例子中只修改和 index 页面相关的文件，index 是小程序第一个显示的页面，其中 index.wxml 文件是 index 页面的布局文件，现在打开该文件，并按下面的内容修改代码。

在这段代码中，image 和 button 组件的内容都需要动态改变，所以 image 组件的 src 属性和 button 组件的文本值（夹在 <button> 和 </button> 之间的部分）都分别于一个变量绑定，这是小程序的一个重要特性（和 React Native 完全相同）。

我们发现，就算按前面的布局，仍然不能像上图所示那样摆放组件，这是因为还需要将下面代码调整一下样式（index.wxss 文件）。

前面的布局代码主要调整了 userinfo-avatar 的宽度和高度，让图像显示得更大一些。最后，还需要修改一下 app.wxss 文件的代码，将 padding 属性的值改成 50 rpx 0，代码如下：

现在可能仍然无法显示图像，因为 imagePath 变量还没有设置，而且图像还没有放到工程目录。可以找三张剪子、石头和布的图片，在小程序工程根目录建立一个 images 目录，将这三个图像文件放到该目录中。

5

控制剪子、石头、布的快速切换

猜拳游戏的核心就是快速切换剪子、石头、布三个图像，当单击“停止”按钮后，会停到其中一个图像上，这里涉及到如下两个动作：

• 用定时器快速切换图像。
• 图像下方的按钮，当一开始单击时，文本变成了“停止”，当再次单击该按钮后，按钮文本又变成了“开始”，即一个按钮同时负责开始和停止图像快速切换两个动作。

控制图像快速切换和按钮文本变化两个动作的代码都要写在 index.js 文件中。首先将这三个图像文件名存储在一个全局的数组中，并使用定时器快速从这个数组中依次循环获取图像文件名，并将该文件名指定的图像显示到 image 组件中，修改按钮的文本只需要修改 title 变量即可。

这里涉及到两个主要变量：imagePath 和 title，这两个都定义在 data 对象中，单击按钮会执行 guess 函数（在 index.wxml 文件中使用 bindtap 属性指定按钮的单击事件函数名），该函数也需要在 index.js 中编写，完整的实现代码如下：

现在可以通过左侧的模拟器来测试成果了。单击“开始”按钮，看图像是否会快速切换，再单击“停止”按钮，看是否会停止在某个图像上。

6

真机测试小程序

如果只想在真机上测试，用管理员微信登录小程序 IDE 都可以，单击 IDE 工具栏中的“预览”按钮，会弹出一个带二维码的页面，如下图所示。用管理员的账号登录手机微信，扫描该二维码，猜拳游戏就会在手机上运行。

在真机上的测试效果如下图所示：

7

真机调试小程序

如果在模拟器上开发小程序，很容易在 Console 中查看调试信息，但如果在真机上运行呢？其实也有办法查看调试信息。现在按着前面讲解步骤在真机上运行小程序，然后点击右上角的省略号（…）菜单，会弹出如下图所示的菜单。

点击“打开调试”菜单项，这时当前小程序需要关闭，然后重新进入，此时会看到右下角有一个绿色的 vConsole 按钮，如下图所示。

点击 vConsole 按钮，就会显示打开真机上的 Console，并显示调试信息，如下图所示，关闭 Console，用同样的操作即可。

8

上传和审核小程序

如果觉得在真机上测试没问题，那么可以单击工具条上的“上传”按钮将小程序上传到腾讯的服务器，单击“上传”按钮后，也会显示一个如下图所示的窗口，输入版本号和描述，单击“上传”按钮，即可上传到腾讯服务器。

成功上传小程序后，回到小程序的后台，点击左侧的“开发管理”选项，会看到如下图所示的三个小程序版本的管理页面。我们直接上传的是开发版本，如果管理员认为没问题，可以单击“提交审核”按钮，会将小程序提交给腾讯，这就是审核版本，如果腾讯审核通过，就正式上线了，这就是线上版本。

9

总结

本文用一个完整的例子从头到尾演示了从开发小程序，到真机测试，再到上传发布的完整过程。尽管提供的例子非常简单，但足以清楚地展示了小程序开发的完整过程，不过，要想开发牛逼的小程序，还需要有系统的课程，这样学起来一定会更加轻松 。