首先，我介绍一下微信开发者工具的核心功能。大家和我一起打开微信开发者工具，先微信扫码，扫码后进入了这样一个界面。接着，可以点击侧边栏的小程序，可以看到本地的小程序项目。

今天会给大家演示从零开始创建一个小程序，大概会做成如下图所示，会带大家手把手写一个这样的小程序，当点赞时会有“点赞成功”的效果，很简单的一个小程序。

那么，小程序要怎么创建，就是点这个+号。

进入创建页面，下滑可以看到各种各样的模板，大家可以复制模板后再进行改写。这里的模板分为两种类型，一种是含有微信云开发的，一种是不含微信云开发的。默认情况下都是带有微信云开发，它会有比较强的功能，比如数据存储等。微信云开发的简单介绍可以看下本专题课程的 最后一节。

今天会给大家简单演示两个跟学生生活贴近的小程序，一个是活动报名。大家可以扫描这个二维码进入体验版，在手机体验该小程序的实际运行效果和功能。

我们先创建一个不使用云开发的模板，选择“JavaScript基础模板”，选“不使用云服务”。AppID这里点击下拉菜单，已经注册过的小程序AppID会出现在此处，可进行选择。若未注册过小程序，可点击选择“测试号”。

随后点击“确定”，即可看到小程序最基础的一个界面。

接下来，会简单介绍微信开发者工具这几个界面到底用于做什么的。

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

右侧这一块是编辑器区域，顾名思义，是IDE的最核心部分，用于写代码。后续课程会介绍一下目录里这些文件是干什么的。编辑器支持代码的增删改查，适应小程序的开发语法，还可以做到代码的自动补全，让你的代码编写更加方便。

最后一块比较复杂的是调试器，这块是作为比较深入、比较难的课程内容，不会深入讲。今天课程内容主要是围绕模拟器和编辑器。

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

Wxml，主要用来查看小程序的节点数，节点树就是每个小程序都有不同的界面，这些界面都在一棵节点树排列而成的。

Console，用于查看代码运行日志，在别的IDE里也有。

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

Network，用来看小程序发的一些网络请求，比如请求后台的一条接口，要看它请求过来的数据是否正确时，可以通过该面板进行查看。

AppData，用来查看当前页面的data数据，小程序每个页面都会有相应数据，可以通过该面板来查看当前页面的data数据。

微信开发者工具里每个布局都是可以按住进行拖拽的，可根据自身需求进行边界调整。也可以通过这几个按钮开关来选择是否隐藏调试器、编辑器、模拟器。

接下来，我们要怎么写出一个小程序界面。大家可以看到这个界面含有的元素，是一个头像、一个文案。点开pages→index→index.wxml，在这里大家可以看到整个小程序的布局。wxml的布局是可以通过布局树进行查看，wxml是用来描述小程序节点树的语言，跟前端html是类似的。

js文件主要用于设计小程序的执行逻辑，比如点一个按钮应该触发什么样的逻辑，是出现弹窗还是跳到哪个页面等。这些逻辑是需要我们到js文件里面去写的。

wxss用来写小程序的样式，描述页面中有哪些元素、每个元素的位置、每个元素的颜色等，跟前端css是类似的。

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

此处大家主要了解.js文件、.wxml文件、.wxss文件这三个文件即可。

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

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