0x1、你看这个面又长又宽（开发环境搭建）

官网点击：「指南」-> 「开始」

1、申请账号

账号可以申请也可以不申请不是一定要申请账号，如果你只是想自己瞎玩不发布的话，可以跳过这一步。

当然，你也可以申请，申请后会给你的小程序分配一个「AppID」，类似于身份标识。

可以在小程序后台，依次点击「设置」->「开发设置」获取到这个「AppID」：

2、下载安装微信开发者工具

官网依次点击「工具」-> 「下载」，或者直接打开下述链接跳转下载：

developers.weixin.qq.com/miniprogram…

用哪个版本看个人喜欢，笔者用的是 开发版，你也可以使用稳定版，下载完以后，

无脑下一步安装即可。安装完后，其实就可以直接进行小程序开发，只是微信开发者

工具自带的IDE比较简陋，没有自带api智能提醒和语法高亮等，写起代码来不是

很顺手，所以一般只是拿微信开发者工具来「看下运行效果」和「调试」，写代码的话用的看看运行效果，调试，二用第三方的IDE来编写代码，常见的两款组合：

• VS Code + minapp插件

• Sublime Text 3 + Sublime wxapp插件

笔者使用的是前者，接着说下VS Code的下载安装。

3、下载安装VS Code并安装minapp插件

VS Code直接在官网下载就好：code.visualstudio.com/，默认英文。

如果你想使用中文可以按快捷键：

• Windows 或 Linux => Ctrl + Shift + P
• Mac => Command + Shift + P
• 
  

然后在弹出的对话框中输入：「Configure Language」，如图：

接着点击「Install additional languages…」，如图：

点击后左侧会出现一个插件安装的，选择中文，如图：

安装完，提示重启，重启后就是中文了，接着安装一波minapp插件。点击左侧边栏

的第四个图标，然后搜索栏键入「minapp」，然后点击Install进行安装，如图：。

安装后可能需要重启，重启即可。除此之外，还安利一个插件：「wechat-snippet」，

自动生成微信代码片段，如果想了解更多插件可见VS官网：

marketplace.visualstudio.com/

0x2、就像这个碗又大又圆（创建项目）

直接打开微信开发者工具，可以「新建项目」或者「导入项目」，填写项目相关的信息，这里如果你没有申请账号的话可以用随机生成的AppID，如图所示：

0x3、你们来这里吃饭（界面熟悉）

创建后会自动生成相关代码，创建后的页面如图所示：

简单介绍下，圈住的页面内容如下：

简单说下页面中圈住的部分都是些什么：

• ① 菜单栏：提供项目，文件，编辑等相关操作，自己点开看就知道了。

• ② 视图开关：控制模拟器，编辑器和调试器视图的显示和隐藏。

• ③ 模拟器：模拟小程序在手机上的界面效果，上面的栏可以进行模拟器的相关配置：模拟器分辨率、缩放比例、连接网络方式、模拟操作、是否静音、独立成小窗口。

• ④ 编辑器-项目文件目录：小程序文件目录，顶部菜单依次为：添加文件、搜索文件、从硬盘打开、折叠某个目录，隐藏。

• ⑤ 编辑器-文件内容编辑：就是编写代码的地方。

• ⑥ 调试器：定制版的Chrome开发者工具，用于调试：页面结构，CSS，抓包，AppData等。

• ⑧ 编译相关：可以选择编译选项：普通编译，添加编译模式(直接打开特定页面)或通过二维码编译，点击编译即可进行编译。点击预览可以生成二维码，然后在手机上查看效果。

• ⑨ 真机调试：同样是生成二维码扫描看效果，不过多了调试功能。

• ⑩ 切后台：切换场景值。

• ⑪ 清缓存：就是清理缓存，可以清理：数据，文件，授权，网络，登录状态。

• ⑫ 版本管理：小程序项目Git版本管理。

• ⑬ 详情：项目的相关信息，项目配置，以及域名信息配置。

• ⑭ 页面路径：当前页面的路径，场景值和页面参数。

关于微信开发者工具的界面的简单介绍就到这里，接着我们来说下小程序的基本结构。