小程序的开发基础

小程序的基本目录结构

在微信小程序的基本目录结构中项目主目录下有“pages”和“utils”2个子目录以及“app.js”"app.json""app.wxss""project.config.json"。

在主目录中，3个以“app”开头的文件是微信小程序框架的主描述文件，是应用程序级别的文件。这3个文件不属于任何页面。 project. config. json文件是项目配置文件，包含项目名称、AppID等相关信息。

pages 目录中有2个子目录，分别是index和logs，每个子目录中保存着一个页面的相关文件。通常，一个页面包含4个不同扩展名(.wxml、.wxss、.js和.json)的文件，分别用于表示页面结构文件、页面样式文件、页面逻辑文件和页面配置文件。按照规定，同一个页面的4个文件必须具有相同的路径与文件名。

utils 目录用来存放一些公共的.js文件，当某个页面需要用到utils.js函数时，可以将其引人后直接使用。在微信小程序中，可以为一些图片、音频等资源类文件单独创建子目录用来存放。

主体文件

微信小程序的主体部分由3个文件组成，这3个文件必须放在项目的主目录中，负责小程序的整体配置，它们的名称是固定的。
——app.js  小程序逻辑文件，主要用来注册小程序全局实例。在编译时，app.js文件会和其他页面的逻辑文件打包成一个JavaScript文件。该文件在项目中不可缺少。

——app.json  小程序公共设置文件，配置小程序全局设置。该文件在项目中不可缺少。

——app.wxss  小程序主样式表文件，类似HTML的、ess文件。在主样式表文件中设置的样式在其他页面文件中同样有效。该文件在项目中不是必需的。

页面文件

小程序通常是由多个页面组成的，每个页面包含4个文件，同一页面的这4个文件必须具有相同的路径与文件名。当小程序被启动或小程序内的页面进行跳转时，小程序会根据 app.json设置的路径找到相对应的资源进行数据绑定。
——  .js 文件   页面逻辑文件，在该文件中编写JavaScript代码控制页面的逻辑。该文件在每个小程序的页面中不可缺少。
——  .wxml 文件   页面结构文件，用于设计页面的布局、数据绑定等，类似HTML页面中的.html文件。该文件在页面中不可缺少。
——  .wxss 文件   页面样式表文件，用于定义本页面中用到的各类样式表。当页面中有样式表文件时，文件中的样式规则会层叠覆盖app.wxss中的样式规则;否则，直接使用 app.wxss中指定的样式规则。该文件在页面中不可缺少。
——  .json 文件   页面配置文件。该文件在页面中不可缺少。

小程序的开发框架

微信团队为小程序的开发提供了MINA框架。MINA框架示意图如下

小程序的开发框架主要由两部分组成：视图层（View）和逻辑层（App Service）。

1. 视图层：

   • 负责页面的渲染和显示。
   • 使用WXML（WeiXin Markup Language）描述页面的结构，类似于HTML。
   • 使用WXSS（WeiXin StyleSheet）描述页面的样式，类似于CSS，但有一些特有的特性和限制。
   • 支持自定义组件的开发，允许开发者创建可复用的组件。
   • 提供了一套事件系统，用于处理用户的交互行为，如点击、滑动等。

2. 逻辑层：

   • 负责处理业务逻辑和数据交互。
   • 使用JavaScript编写业务逻辑，包括数据处理、网络请求等。
   • 提供了丰富的API，如网络请求、本地存储、设备操作等，方便开发者实现各种功能。
   • 通过与视图层的数据绑定，实现数据与视图的同步更新。

在小程序的开发框架中，视图层和逻辑层之间的数据传输和事件系统由框架提供。开发者只需要关注数据和逻辑的实现，而不需要关心底层的渲染和显示细节。这种分离的设计模式使得开发者可以更加高效、便捷地开发出具有原生APP体验的服务。

此外，小程序的开发框架还提供了丰富的开发工具和社区资源，如调试工具、组件库、插件等，帮助开发者提高开发效率和质量。同时，随着技术的发展，小程序的开发框架也在不断更新和优化，以满足不断变化的用户需求和市场环境。

创建小程序页面

启动微信开发工具，创建一个新的项目，不勾选“创建QuickStart项目”。

创建完成后系统提示错误信息。

在项目的主目录下建立3个主体文件（app.js、app.json和app.wxss）,小程序依然报错。

在项目主目录下新建一个pages目录，在pages目录下新建一个news目录，并在news目录下新建news.js、news.json、news.wxml和news.wxss空文件。

首先，打开news.wxml文件，输入“欢迎学习小程序”

然后告诉系统这个文件的名称和路径，因此，打开项目配置文件app.json，输入下图代码：

接下来打开news.json文件，输入下图代码：

在news.json文件中，只需要加入一对空的{}即可

打开news.js文件，输入下图代码：

将4个文件保存后进行编译，在模拟器中就可以得到所需的运行结果

配置文件

全局配置文件

小程序的全局配置保存在app.json中使用全局配置文件来配置页面文件（pages）的路径、设置窗口（window）表现、设定网络请求API的超时时间值（networkTimeout）以及配置多个切换页（tabBar）等。

pages配置项

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

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

window配置项

window配置项负责设置小程序状态栏、导航条、标题、窗口背景色等系统样式。window配置项可以配置的对象参考表如下：

在“app.json”中设置window配置项

tabBar配置项

当需要在程序顶部或底部设置菜单栏时，可以通过tabBar配置项来实现。window配置项可以配置的对象参考表如下：

        其中，list（列表）接受数组项，数组的每一项也都是一个对象。对象的数据值说明如下：

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

networkTimeout配置项

小程序中各种网络请求API的超时时间值只能通过networkTimeout配置项进行统一设置，不能在API中单独设置。networkTimeout可以配置的熟悉如下所示：

为了提高网络响应效率，可以在app.json中使用下列超时设置：

debug配置项

debug配置项用于开启开发者工具的调试模式，默认为false。

页面配置文件

页面配置文件（*.json）只能设置本页面的窗口表现，而且只能设置window配置项的内容，代码如下所示：

逻辑层文件

小程序的逻辑层文件分为项目逻辑文件和页面逻辑文件。

项目逻辑文件

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

在app.js加入下图代码：