如何导入小程序项目，分析结构并且分析

那么构建成小程序有几个结构呢？

1. 项目结构：包括pages（存放所有小程序的页面）、utils（存放工具性质的模块）、app.js（小程序项目的入口文件）、app.json（小程序项目的全局配置文件）、app.wxss（小程序项目的全局样式文件）、project.config.json（项目的配置文件）以及sitemap.json（用来配置小程序及其页面是否允许被微信索引）。
2. 页面结构：每个小程序页面由四个文件组成，分别是.js（页面的脚本文件，存放页面的数据，事件处理函数等）、.json（当前页面的配置文件，配置窗口的外观、表现等）、.wxml（页面的模板结构文件）、.wxss（当前页面的样式表文件）。
3. 配置文件：json是一种数据格式，实际开发过程中，总是以配置文件的形式存在。通过不同的.json配置文件，可以对小程序项目进行不同级别的配置。

项目的基本组成结构：

页面结构：都存放在 pages 目录中，以单独的文件夹存在，如图所示:

配置文件：

小程序项目中有 4种json 配置文件，分别是:
1.项目根目录中的 app.json 配置文件
2.项目根目录中的 project.config.json 配置文件
3.项目根目录中的 sitemap.json 配置文件
4.每个页面文件夹中的 .json 配置文件

1.app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、窗口外观、界面表现、底部 tab 等
Demo 项目里边的 app.json 配置内容如下:

2.project.config.json 是项目配置文件，用来记录我们对小程序开发工具所做的个性化配置，例如:

3.微信现已开放小程序内搜索，效果类似于 PC 网页的 SEO。sitemap.json 文件用来配置小程序页面是否允许微信索引。
当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索关键字和页
面的索引匹配成功的时候，小程序的页面将可能展示在搜索结果中。

注意:sitemap 的索引提示是默认开启的，如需要关闭 sitemap 的索引提示，可在小程序项目配置文件
project.config.json 的 setting 中配置字段 checkSiteMap 为 false

4..json 文件是用于配置小程序的不同方面和页面的。

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。在微信小程序中，.json 文件的主要用途如下：

1. 全局配置 (app.json)
   app.json 是小程序的全局配置文件，它包含了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等全局性的配置。例如，你可以在这里定义小程序的页面路径，设置网络请求的超时时间，或者配置底部导航栏等。

2. 页面配置 (page.json)
   每个小程序页面也可以有自己的 .json 配置文件，通常命名为 page.json。这个文件主要用于配置当前页面的窗口表现，如导航栏标题、窗口背景色、文字颜色等。这些设置会覆盖 app.json 中的全局设置。

3. 项目配置 (project.config.json)
   project.config.json 是项目的配置文件，用于配置小程序开发者工具的行为。例如，你可以在这里设置编译选项、代码上传时自动压缩等。

4. sitemap 配置 (sitemap.json)
   sitemap.json 用于配置小程序及其页面是否允许被微信索引。你可以在这里声明哪些页面需要被搜索引擎索引，哪些页面不需要。

接下来让我们来导入一个简单的计算器源码demo来分析一下：

进入网站：GitHub - dunizb/wxapp-sCalc: :speech_balloon:微信小程序版简易计算器demo，适合入门练手

下载并解压：

点击导入项目：知道自己解压的文件，直接选择就可以了

页面样式：

项目数据：

项目结构：

结构样式：