微信小程序开发--项目文件夹--详解

首先先介绍一下小程序的运行机制，包括两个方面，一方面是小程序启动的过程，一方面是页面渲染的过程，这个大家可以简单了解一下，这里需要注意小程序启动的顺序，当多个页面做交互时，需要考虑到这类问题

小程序启动的过程

1. 把小程序的代码包下载到本地
2. 解析app.json全局配置文件
3. 执行app.js小程序入口文件，调用App()创建小程序实例
4. 渲染小程序首页
5. 小程序启动完成

页面渲染的过程

1. 加载解析页面的.json配置文件
2. 加载页面的.wxml模板和.wxss样式
3. 执行页面的.js文件，调用Page()创建页面实例
4. 页面渲染完成

项目结构是项目所有文件的组成部分，了解各个项目的具体使用，后续写入项目能更快入手，这里是博主大致总结的

项目结构

1. pages 用来存放所有小程序的页面
2. utils 用来存放工具性质的模块（例如：格式化时间的自定义模块）
3. app.js 小程序项目的入口文件
4. app.json 小程序项目的全局配置文件
5. app.wxss 小程序项目的全局样式文件
6. project.config.json 项目的配置文件
7. sitemap.json 用来配置小程序及其页面是否允许被微信索引

JSON配置文件

作用：json是一种数据格式，在实际开发中，json总是以配置文件的形式出现。小程序项目中也不例外：通过不同的.json配置文件，可以对小程序进行不同级别的配置。

小程序中有4种json配置文件，分别是：

• 项目根目录中的app.json配置文件 是当前小程序的全局配置，包括了小程序的所有页面路径、窗口外观、界面表现、底部tab等。通常项目里边的app.json配置项有：
  • sitemapLocation：用来指明sitemap.json的位置
  • style：全局定义小程序组件所使用的样式版本（目前最新为v2，可以手动更改）
  • window：全局定义小程序所有页面的背景色、文字颜色等
  • pages：用来记录当前小程序所有页面的路径（第一行所在的页面路径的为首页）
• 项目根目录中的project.config.json配置文件
• 项目根目录中的sitemap.json配置文件
• 每个页面文件夹中的.json配置文件

WXML和HTML的区别

• 标签名不同
  • HTML(div，span，img，a)
  • WXML(view，text，image，navigator)
• 属性节点不同
  • < a href='#'>超链接 </a>
  • <navigator url ="/page/home/home"></navigator>
• 提供了类似于vue中的模块语法
  • 数据绑定
  • 列表渲染
  • 条件渲染

WXSS和CSS的区别

• 新增了rpx尺寸单位
  • CSS中需要手动进行像素单位换算，例如rem
  • WXSS在底层支持新的尺寸单位rpx，在不同大小的屏幕上小程序会自动进行换算
• 提供了全局的样式和局部样式
  • 项目根目录中的app.wxss会作用于所有小程序页面
  • 局部页面的.wxss样式仅对当前页面生效
• WXSS仅支持部分CSS选择器
  • .class和#id
  • element
  • 并集选择器和后代选择器
  • ：：after和：：before等伪类选择器