在上一篇文章中，我们简要介绍了微信小程序（微信小程序购物商城系统开发系列工具）的IDE，我相信每个人都准备尝试构建自己的小程序来完成一个独立商城 网站。

别担心，让我们一步一步走，首先尝试编写一些自己的演示。

在本文中，我们主要介绍小程序的某些目录结构以及语法，为我们后面的微信小程序商城系统铺平道路。

首先，让我们了解小程序的目录结构

页面我们一些新创建的页面将保存在此文件夹下。每个小程序页面由四个不同的后缀文件组成，它们在同一路径下具有相同的名称，例如index.js，index.wxml，index。 wxss，index.json。具有.js后缀的文件是脚本文件，具有.json后缀的文件是配置文件，.wxss后缀的文件是样式表文件，具有.wxml后缀的文件是页面结构文件。

实用程序我们可以在其中放入一些公共工具js。

app.js是小程序的脚本代码。我们可以监视和处理小程序的生命周期函数，并在此文件中声明全局变量。调用框架提供的丰富API，例如本示例中的同步存储和同步读取本地数据。

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

{ "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" }}

注意：App.json是整个小程序的全局设置。当然，每个页面也都有自己的json文件。每个页面下的json文件只能设置为窗口，因此您只需要在页面的json文件下编写窗口的配置

{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" }

app.wxss是整个小程序的公共样式表。我们可以直接在页面组件的class属性上使用app.wxss中声明的样式规则。

您还可以在每个页面中定义自己的wxss。 Wxss是微信提供的css样式表，其内部文字几乎与css相同。但是，他支持相对较少的选择器。在撰写本文时，基本上可以使用某些先前项目的css，但是除了以下选择器之外，如果使用其他选择器，则整个页面可能会报告错误！

Index.whtml wxml后缀文件夹是微信小程序提供给我们的页面结构文档，该文档类似于我们以前的网页的html，不同之处在于他已自定义了一些自己的标签。

下一步，我们将创建一个新页面进行试用

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

首先，我们必须配置刚刚在app.json下创建的页面

注意：页面配置的顺序在实际操作中找到，第一个配置是主页。

配置后，我们可以编写页面代码。

如您所见，我们可以在app.json页面中直接配置当前页面的某些窗口属性

在Wxml中，我们可以编写页面显示的某些结构，这与我们之前编写html的结构相同。在中间，我们使用了标记，该标记相当于之前使用的p。

Wxss，每个人都可以看到它是否类似于我们之前编写的CSS。这是我们之前定义的.box以及样式。

test.js是页面的脚本文件。在此文件中，我们可以监视和处理页面的生命周期功能，获取小程序实例，声明和处理数据，以及响应页面交互事件。

在这里，我们使用bintap将click事件绑定到视图，然后弹出提示框。

注意：此处的js编写方法与我们以前的编写方法完全相同，只是在这里不能使用window对象和document对象，并且不能使用jquery，zepto之类的框架，因为这些框架会使用窗口和文档对象。

好的！今天，我仅向您简要介绍小程序的目录结构和简单用法。在下一节中，我们将开始准备商城系统。

以上是本文的全部内容，希望对大家的学习有所帮助，并希望您能更多地支持Scripthome。