前言

我们为什么要学习小程序，在这个各个行业都进入互联网的时代，我们需要将我们的产品推广出去，而微信作为国内流量巨头，使用微信小程序无疑是借东风，拼多多就是一个很好的例子。

我会用最简单的描述，用玩游戏的心态，带领想学习小程序的新人，又或者想了解小程序开发流程的人群，快速熟悉微信小程序。

当然如果你熟悉html，css，JavaScript会更好，当然不会也没关系

工具介绍篇

工欲善其事必先利其器，如果你想要玩王者荣耀，我们首先就得下载王者荣耀这个app，同样想要学习微信小程序，我们首先需要下载一个IDE（IDE就是用来开发程序的工具）。而微信专门为开发者设计了一个IDE，它叫做微信开发者工具。那么在我们开始游戏之前，我们先来熟悉一下这个工具吧。

1.关于下载与安装

知道了什么是IDE，我们就需要去下载到自己的电脑上。当然，这个开发工具和王者荣耀一样，支持多平台。macos与windows都支持。

微信开发者工具下载地址 

下面是进入下载页面的一个界面图

如上面所说，开发的话建议大家选择稳定版。好了我们用Windows系统举例，我们选择Windows64（现在基本很少有人使用32位的电脑了吧）进行下载。

点击下载以后我们得到一个.exe的安装文件，我们双击安装

双击之后进入一个安装向导，这里我们直接点击下一步，进行安装。

安装成功以后，我们的桌面就出现了这个微信开发者工具这个程序啦。接着我们双击打开

2.登陆账号

下面这张图是我们第一次打开应用的界面。这个只能使用微信扫码登陆。

3.创建小程序

在王者荣耀里，我们使用微信登陆成功以后，系统会让我们进行大区选择。如上图这个蓝色框部分，针对于我们开发的不同程序，我们也是需要进行选择的。黄色区域区域是对本地项目进行删除和批量删除的一个功能。

微信小程序工具除了可以开发微信小程序以外，他还可以开发 微信小游戏，公众号，以及分享代码片段。

当然作为微信小程序的开发，目前主要给大家介绍微信小程序。我们选好菜单小程序（游戏大区）以后。我们看右边红色区域的加号，我们点击以后可以新建一个本地微信小程序（创建了一个游戏房间），或者导入一个本地微信小程序。

如上图，我们进入游戏房间的配置。

项目名称： 这个就不说了吧 目录：这个就是在本地一个地方存储自己的项目，为了方便，我们直接存在桌面。AppID：这个我们点击输入框下面哪个，使用测试号。Appid它类似于一个身份证，我们上架的每一个小程序都会有一个唯一的AppId，这个我们后面讲到小程序的上架的时候会在具体讲。 开发模式： 这里当然选择小程序。 后端服务：我们选择不使用云服务。云服务 语言选择：JavaScript

注意在写程序的时候，我们的文件夹命名都需要使用英文字母。

完成以后我们选择新建，游戏排队时间，稍微等待一下。

上图所示，我们已经进入正式进入到小程序的开发界面了。界面大致分为菜单栏，模拟器，编辑器，调试器。

4.模拟器

一个好的应用程序，应该兼容绝大部分用户。

微信小程序主要还是移动端上呈现给用户，但是市面上的手机各种各样。仅仅针对于苹果用户人群都有好几种。当然还有魅族，华为，小米等安卓用户。所以在开发的时候，我们需要切换手机分辨率对程序的兼容性进行预览并调试。

下图中红色区域是针对于当前手机机型进行选择，在红色框右边它还支持当前网络的模拟(wifi,2g,3g,4g)，手机深色主题与浅色主题的切换。而下面蓝色区域是当前代码编写页面的路径。

5.编辑器

编辑器即是我们写代码的地方啦，在后面的章节我们会详细介绍。

6.调试器

下图为调试器区域，当我们编写程序，如果有代码错误的时候，微信开发者工具会给我们一个对应错误的提示。它更有利于我们找到程序错误。

7.关于独立窗口

刚才介绍了模拟器，编辑器，调试器。这3个功能区都可以独立成为一个窗口。而下图这3个按钮即可以对它们进行切换。不过个人还是喜欢合并着一起。在有的时候，比如使用2个显示屏的时候，一个显示屏写代码，看界面，一个显示屏看报错信息也是挺棒的。

8.预览程序

熟悉一个游戏界面需要一定的时间，当然这样一个开发者工具的话，也是需要我们多多使用。其他的操作我们会在后面用到的时候进行讲解，当然如果你等不及的话，也可以去尝试一下。如下我们先通过手机微信扫码，预览一下我们新创建的微信小程序。

注意：因为目前我们的小程序还没有发布，这只是一个开发版，所以我的这个二维码目前只能我自己扫描。

升级LV2

到这里恭喜你，已经成功升级到LV2。

下一期预告

下一期我将会给大家讲解一下我们创建的小程序，它究竟包含了哪些内容。下一期BOSS：微信小程序修炼之路LV2—项目文件介绍

----技术创作101训练营