1、微信小程序的基本目录结构： 主目录：、:app.js、app.json、app.wxss、.. json

：所有项目的子目录，展开的子目录为：、logs，每个子目录都保存一个页面的相关文件。通常，一个页面包含 4 个具有不同扩展名（.wxml.wxss、.js 和 .json）的文件，分别表示页面结构文件、页面样式文件、页面逻辑文件和页面要求文件。根据规定，同一页面上的四个文件必须具有相同的路径和文件名。

：该目录用于存储一些公共文件，当页面需要使用us.功能时，介绍后即可直接使用。在微信小程序中，您可以为一些资源文件（例如图片和音频）创建单独的子目录进行存储。

主文件：

微信小程序主体由3个文件组成，必须放在项目主目录下，负责小程序的整体配置，名称固定。

应用程序：

app.js：小程序逻辑文件，主要用于注册小单全局实例。在编译时，app. js文件将是程序的整体配置，它们的名称是固定的。和逻辑文件的其他页面合并到一个文件中。这个文件在项目中是必不可少的。

app.json：小程序公共设置文件，配置小程序的全局设置。这个文件在项目中是必不可少的。

app.wxss：小程序的主样式表文件，类似于 HTML 的 CS 文件。在主样式表文件中设置的样式在其他页面文件中也有效。此文件在项目中不是必需的。

页面文件：

小程序通常由多个页面组成，每个页面包含 4 个文件，同一页面上的这 4 个文件必须具有相同的路径和文件名。当小程序启动或小程序中的页面被重定向时，小程序会根据app.json设置的路径找到相应的数据绑定资源。

：

是文件页面逻辑文件，其中编写代码以控制页面的逻辑。这个文件在每个小程序的页面中都是必不可少的。

wxml 文本页面结构文件用于设计页面的布局和数据绑定，类似于 HTML 页面中的 .html 文件。这个文件在页面上是必不可少的。

WXSS 文件页面样式表文件，用于定义此页面上使用的各种样式表。当页面中有样式表文件时，文件中的样式规则将级联到 app.wxss 中的样式规则上;否则，请直接使用 app.wxss 中指定的样式规则。这个文件在页面上是必不可少的

ISON 文件页面配置文件。这个文件在页面上是必不可少的。

2. 小程序的开发框架 微信团队为小程序的开发提供了 MINA 框架。MINA通过微信客户端提供文件系统网络通信、任务管理、数据安全等基础功能，并为上层提供一整套API，让开发者可以轻松使用微信客户端提供的各项基础功能，快速构建应用。

小程序 MINA 框架将整个系统划分为视图层和逻辑层。视图层由框架设计的标签语言 WXML（ ） 和 WXSS（ ） 组成，用于描述 WXML 组件的样式，它们的关系类似于 HTML 和 CSS。逻辑层（App）是MINA框架的服务中心，通过微信客户端开启异步线程，单独加载运行。页面数据绑定所需的数据和页面交互处理逻辑在逻辑层实现。MINA 框架中的逻辑层用于编写交互式逻辑网络请求、数据处理，但不用于 DOM 操作。小程序中的每个页面都可以通过逻辑层实现数据管理、网络通信、应用生命周期管理、页面路由。

MINA 框架提供与事件侦听相关的属性，例如 ，并将它们绑定到逻辑层中的事件处理程序，以便与逻辑层中的用户同步和交互。MINA 框架也提供了多种方式将逻辑层的数据单向绑定到页面，当逻辑层中的数据发生变化时，小程序会主动触发对应页面组件的重新数据绑定。

微信小程序不仅在底层架构的运行机制上做了大量的优化，而且在重要功能上也使用了贴近系统层的组件（如页面切换、标签切换、多媒体、网络连接等）。因此，小程序的MINA框架具有接近原生应用的运行速度，对等端和iOS端可以高度一致，为开发者准备了完整的开发调试工具。

（1）视图层：MINA框架的视图层由WXML和WXSS编写，由组件展示。对于 F 微信小程序，视图层是所有 wxml 文件和 .wxss 文件的白色集合：.wxml 文件用于描述页面的结构;该文件用于描述页面的样式，wxsS

微信小程序在逻辑层处理数据，发送到视图层进行展示，同时接收来自视图层的事件反馈。视图层以给定的样式呈现数据，并将时间反馈给逻辑层，而数据表示是由 I 组件执行的组件，它是视图的基本构建块。

（2）逻辑层：逻辑层用于处理事务逻辑。对于微信小程序来说，逻辑层是所有·js脚本文件的集合，微信小程序在逻辑层处理完数据后将数据发送到视图层，同时接受来自视图层的事件反馈。

微信小程序开发框架的逻辑层是用 编写的。在此基础上，微信团队进行了适当的修改，以提高小程序的开发效率。主要修改包括：

（1） 添加 app（） 和 Page（） 方法注册程序和页面。

（2）提供丰富的API，如扫描、支付等微信特有的功能。

（3）每个页面都有独立的范围，并提供模块化。

逻辑层是通过每个页面的.js脚本文件实现的。由于小程序不在浏览器中运行，因此网页上的某些功能无法在小程序中使用，例如

，

开发者开发编写的所有代码最终都会打包成一个单独的文件，在小程序启动时运行，直到小程序被销毁。

（3）数据层：数据层在逻辑上包括页面临时数据或缓存、文件存储（本地存储）、网络存储和调用。

1. 页面临时数据或缓存

在 Page（） 中，使用函数将数据从逻辑层发送到视图层，同时更改 this.data 的相应值。

（） 函数的参数接收一个对象，该对象以 （key，） 的形式表示，并将 this.data 中 key 的相应值更改为 。

2.文件存储（本地存储）。

使用数据 API 接口，如下所示：

wx。获取本地数据缓存。

wx。设置本地数据缓存。

wx。清理本地数据缓存。

3. 网络存储和检索

上传或下载文件的API接口如下：

wx。发起网络请求。

wx。上传文件。

wx。下载文件

URL的API接口调用如下：

wx。一个新窗口将打开页面

wx。原始窗口将打开页面。

3. 创建小程序页面：

启动微信开发工具，创建一个新项目。此处未选中“创建项目”复选框

点击“确定”按钮后，可以看到开发工具中的“目录结构”界面仅显示项目配置文件（.. json），系统显示错误信息

在项目的主目录中创建一个目录，在该目录中创建一个列表文件夹，并在列表目录中为 list.js、list.json、list.wxml 和 list.wxss 创建空文件。

如下图所示：

全局配置文件内容的整体结构如下：

{ //设置页面路径 "pages":[], //设置默认页面的窗口表现 "window":{}, //设置底部tab的表现 "tabBar":{}, //设置网络请求API的超时时间值 "networkTimeout":{}, //设置是否开启debug模式 "debug":false }

配置项目

配置项接受一个数组来指定小程序由哪些页面组成，数组中的每个项都是一个字符串，代表对应页面的“路径”+“文件名”。配置项是必需的。

配置配置项时，需要注意以下三点：

1. 数组的第一项用于设置小程序的初始页面。

2. 在小程序中添加或删除页面时，需要修改数组。

3.文件名不需要写文件扩展名。小程序框架会自动找到路径并.js，.json、.用于数据绑定的 wxml 和 .wxss 文件。

例如，app.json文件的配置如下：

{ "pages":[ "pages/news/news", "pages/index/index" ] }

配置项负责设置小程序的状态栏、导航栏、标题、窗口背景色等系统样式。

可以为配置项目配置的对象参考表

在app.json中设置以下配置项：

"window": { "navigationBarTextStyle": "black", "navigationBarTitleText": "Weixin", "navigationBarBackgroundColor": "#ffffff", "backgroundColor": "#ccc", "backgroundTextStyle":"light" }

当您需要在程序的顶部或底部设置菜单栏时，可以通过配置配置项来实现。下表描述了可以为 CI 配置的属性

该列表接受数组的值，并且数组中的每个项目也是一个对象。对象的数据值说明如下表所示：

在app.json文件中设置以下配置：

"tabBar": { "color": "666666", "selectedColor": "#f00", "backgroundColor": "#ffffff", "borderStyle": "black", "list": [ { "pagePath": "pages/list/list", "iconPath": "images/loo.png", "selectedIconPath": "images/ool.png", "text": "首页" }, { "pagePath": "pages/logs/logs", "iconPath": "images/loo.png", "selectedIconPath": "images/ool.png", "text": "新闻" } ] }

配置的页面如下图所示：

配置项目

小程序中各种网络请求API的超时期限值只能通过配置项统一设置，不能在API中单独设置。下表描述了可以配置的属性

例如，为了提高网络响应能力，开发人员可以在app.json中使用以下超时设置：

"networkTimeout" :{ "request":20000, "connectSocket":20000, "uploadFile":20000, "downloadFile":20000 }

配置项目

配置项用于开启开发者工具的调试模式，默认值为。开启后，页面注册、路由数据更新、事件触发器等调试信息将以信息的形式输出到控制台面板。

页面配置文件

页面配置文件（*.json）只能设置该页面的窗口性能，并且只能设置配置项的内容。配置页面配置文件后，页面中的配置值将覆盖全局配置文件 （app.json） 中的配置值。

5. 逻辑层文件

项目逻辑文件：在项目逻辑文件中，可以使用App（）函数在项目逻辑app.js文件中注册小程序生命周期函数、全局属性、全局方法，注册的小程序实例可以通过其他页面逻辑文件中的（）获取。

App（） 函数用于注册小程序，参数用于指定小程序的生命周期函数、用户自定义属性和方法，其参数如下表所示

页面逻辑文件

页面逻辑文件的主要功能有：设置初始数据;定义当前页面的生命周期功能;定义事件处理程序等。每个页面文件都有一个对应的逻辑文件，该文件在纯引擎中运行。因此，特定于浏览器的对象 （， ） 不能在逻辑文件中使用，并且不能通过操作 DOM 来更改页面，而只能通过数据绑定和事件响应来进行。

在逻辑层面，Page（） 方法用于注册一个页面，每个页面只有一个且只有一个，其参数如下：

（1）设置初始数据

设置初始数据是第一个数据绑定到页面。对象数据将以 JS0N （ ， Js ） 的形式从逻辑层传递到视图层。因此，数据必须采用可转换为 JSON（字符串、数字、布尔值、对象、数组）的格式。

视图层可以通过 WXML 绑定数据。

数据初始化、数据绑定和操作效果如下图所示

数据初始：

数据绑定：

影响：

（2）定义当前页面的生命周期功能

在 Page（） 函数的参数中，您可以定义当前页面的生命周期函数。在 Page（） 函数的参数中，您可以定义当前页面的生命周期函数。页面的生命周期功能主要、、、、。

页面加载功能。加载页面时调用此函数。一个页面只能调用一次。

页面显示功能。显示页面时调用此函数。每次打开页面时都会调用它。

页面数据绑定函数。当页面的初始数据绑定完成时，将调用此函数。一个页面只会被调用一次，表示该页面已准备好与视图图层进行交互。

页面隐藏功能。当页面处于隐藏状态以及在小程序底部或小程序底部切换选项卡时，将调用此函数。

页面卸载功能。当页面被卸载、执行或操作时，将调用此函数。

（3） 定义事件处理程序

这

开发人员在 Page（） 中自定义的函数称为事件处理程序。视图层可以向组件添加事件绑定，当达到触发事件时，小程序将执行 Page（） 中定义的事件处理程序。

//list.wxml 单击执行逻辑层事件 //list.js Page({ myclick:function(){ console.log("点击了view">} } });

（4） 使用更新的数据

该小程序在 Page 对象中封装了一个名为 （） 的函数，以更新数据中的数据。

6. 页面结构文件

页面结构文件（WXML）是框架设计的一组类似HTML的标签语言，可以与基本组件和事件系统相结合，构建页面的结构，即.wxml文件。在小程序中，类似HTML的标签被称为组件，是页面结构文件的基本构建块。这些组件具有开始（例如）和结束（例如）标志，每个组件可以具有不同的属性（例如 id 等），并且组件也可以嵌套。WXML 还能够绑定数据、绑定条件数据、绑定列表数据、模板、引用页文件和页事件。

数据绑定

当小程序绑定页面上的数据时，框架会将WXML文件与逻辑文件中的数据动态绑定，以显示页面中的数据。小程序的数据绑定使用语法（{{}}）来包装变量或操作规则。

简单绑定

简单绑定是指使用双大括号 （{{}}） 来包装变量，并将其直接用作页面中的字符串输出。

注： 当将简单绑定应用于组件属性或控件属性时，应将双引号添加到双大括号中。

{{name}} 男 Page({ data:{ name:'/wk', img:'/images/news2.png', sex:true }, })

操作

一些简单的运算（主要是算术运算、逻辑运算、三元运算、字符串运算等）可以在{{}}中完成，这些运算应该符合运算规则。

条件数据绑定

条件数据绑定是根据绑定表达式的逻辑值来判断是否绑定当前组件。

（1） wx.if 条件数据绑定