本文主要介绍小程序的一些目录结构和一些语法，为我们后续的微信小程序商城系统做铺垫。

首先我们来了解一下小程序的目录结构

app.json是整个小程序的全局配置。在这个文件中，我们可以配置小程序由哪些页面组成，配置小程序的窗口背景颜色，配置导航栏样式，配置默认标题。

10

11

12

“”：[

“//”，

“/日志/日志”

],

“”：{

“”：“”，

“”：“#fff”，

“xt”：“”，

“乐”：“”

注意：app.json包含整个小程序的全局设置。当然，每个页面也有自己的json文件。每个页面下的json文件只能设置，所以只需要在页面json文件下写入配置即可。

“”：“”，

“”：“#fff”，

“xt”：“”，

“乐”：“”

带有 . wxml后缀是微信小程序提供给我们的页面结构文档，它和我们之前网页的HTML类似，只是定制了一些自己的标签。

接下来我们新建一个页面并尝试一下

创建一个新的测试页面。注意新创建的.js、.json、.xml 和.wxss。名称与页面下定义的测试文件夹名称保持一致。微信微信小程序会自动读取这些文件并生成小程序实例。

首先我们需要在app.json下配置新创建的页面

注：按照页面配置的顺序，实际操作中发现第一个配置的是首页。

配置完成后，我们就可以编写我们的页面代码了。

可以看到，我们可以在app.json页面直接配置当前页面的一些属性。

在Wxml中我们可以为我们的页面显示编写一些结构，就像我们以前编写html一样。中间我们使用了标签，几乎等同于我们之前使用的div。

wxss大家看到和我们之前写的css类似。这是我们之前定义的 .box 加上样式。

test.js是页面的脚本文件。在这个文件中，我们可以监控和处理页面的生命周期函数、获取小程序实例、声明和处理数据、响应页面交互事件等。

这里我们用来给视图绑定一个点击事件，然后弹出一个提示框。

注意：这里js的写法和我们之前的写法一模一样，只不过这里不能使用对象和对象，同样也不能使用这样的框架，因为这些框架中都会使用和对象。