首先我来介绍一下微信开发者工具的核心功能，我们一起打开微信开发者工具，首先用微信扫描二维码，扫描二维码之后会进入如下界面，然后就可以点击侧边栏的小程序，查看本地的小程序项目了。

今天给大家展示如何从零开始创建一个小程序，大概如下图所示，我会一步步指导大家写出这样一个小程序，当你点赞一个按钮的时候，会出现“点赞成功”的效果，很简单的一个小程序。

那么，如何创建小程序呢？只需单击“+”号即可。

进入创建页面往下拉可以看到各种模板，可以复制模板然后重新编写。这里的模板有两种，一种是带微信云开发的，一种是不带微信云开发的。默认所有模板都带微信云开发的，微信云开发有比较强大的功能，比如数据存储等。关于微信云开发的简单介绍，请看本专题课程的最后一节。

今天我简单演示一下两个贴近学生生活的小程序，一个是活动报名，大家可以扫描这个二维码进入试用版，在手机上体验小程序的实际操作效果和功能。

我们先创建一个不使用云开发的模板，选择“基础模板”，选择“不使用云服务”。点击这里的下拉菜单，这里就会出现已经注册的小程序，你可以选择。如果你还没有注册小程序，可以点击选择“测试号”。

然后点击“确定”，就可以看到小程序最基本的界面了。

接下来我就简单介绍一下微信开发者工具的这些接口是用来做什么的。

首先可以看到最左边的是模拟器，可以本地看到小程序在手机上运行的效果，可以相对直观的展示小程序的真实效果，任何代码的改动都会直接反馈到这个模拟器上，是微信开发者工具最主要的功能。在模拟器的左上角可以切换到常用的机型，比如etc，这个功能一般用于机型兼容问题，大部分情况下保持默认就可以了。

右侧是编辑器区域，是IDE最核心的部分，用来编写代码。后面的课程会介绍目录下的这些文件有什么用。编辑器支持代码的增删改查，适配小程序的开发语法，还可以自动补全代码，让你的代码编写更加便捷。

最后一部分是调试器，这是课程中比较深入和困难的部分，就不深入讲了，今天的课程内容主要围绕模拟器和编辑器讲。

调试器有几个重要的面板。

wxml主要是用来查看小程序的节点数，节点树是指每个小程序都有不同的界面，这些界面以节点树的形式排列。

，用于查看代码执行日志，在其他IDE中也可以使用。

，可以看到微信的内置存储以及存储信息。

用于查看小程序发送的一些网络请求，比如后台请求某个接口，看它请求的数据是否正确，都可以通过这个面板来查看。

，用于查看当前页面的数据。小程序的每个页面都会有对应的数据，可以通过这个面板查看当前页面的数据。

微信开发者工具中的各个布局都可以通过长按拖动，并可以根据需要调整边界。你还可以通过这些按钮开关选择是否隐藏调试器、编辑器、模拟器。

接下来我们怎么写小程序的界面呢？可以看到这个界面包含的元素是一个头像和一个文案。点击→→.wxml，在这里可以看到整个小程序的布局，通过布局树可以查看wxml的布局。wxml是用来描述小程序节点树的语言，和前端的html类似。

js文件主要用来设计小程序的执行逻辑，比如点击某个按钮要触发什么样的逻辑，是否会出现弹窗或者跳转到哪个页面等，这些逻辑都需要写在js文件中。

wxss用于编写小程序的样式，描述页面上有哪些元素，各个元素的位置，各个元素的颜色等等，类似于前端的CSS。

json文件，小程序的关键文件，用于描述小程序页面的全局信息。

这里只需要了解三个文件：.js文件，.wxml文件，.wxss文件。

因为小程序是有界面的，所以除了js文件之外，还需要另外两种语言来描述它的界面。如果不写js文件，虽然可以写出小程序界面，但是没有执行逻辑，也无法实现跳转、弹窗等功能。如果只写js文件，不想写wxml文件和wxss文件，就成了没有界面的小程序，可以弹窗，可以跳转，但是没有界面。所以这三个文件是相辅相成的，如果要开发小程序，至少需要这三个文件的配合，才能写出有交互的小程序。

微信开发者社区有小程序框架、语法参考等相关文档，可以点击查看。