🍇项目组成结构
在项目开始之前首先先了解一下创建项目的基本组成结构（标准划重点）
🌑基本文件构成
pages：用来存放所有小程序的页面
utils：用来存放工具性质的模块（例如：格式化时间的定义模块）
.eslintrc.js：是一个名为 ESLINT 的工具的配置文件，目标是使代码更加一致并避免错误
app.js：小程序的项目入口文件
app.json：小程序项目的全局配置文件
app.wxss：小程序项目的全局样式文件
project.config.json：项目公共配置文件
project.private.config.json：项目个人配置文件，相同设置优先级高于公共配置文件
sitemap.json：用来配置小程序及其页面是否允许被微信索引
🌒基本文件含义
.js文件：页面的脚本文件，存放页面的数据，事件处理函数等
.json文件：页面配置文件，配置窗口的外观，表现等
.wxml文件：页面的模板结构文件
.wxss文件：页面的样式表文件
🍈项目开发准备
在日常开发中可能会遇到一些不舒服的警告或要根据自己的喜好设置风格，现在开始解决。
🌑解决索引问题
出现以上索引问题，我们一般会通过 project.config.json 配置文件解决。
通过设置 checkSiteMap 为 false 即可，新版本可能没有 checkSiteMap 可以手动添加。
🌒解决自动热重载问题
点开详情找到本地设置关闭热重载按钮即可。
🌓配置首页颜色
找到pages页面文件下的.json文件，配置如下命令，个人配置会覆盖app.json下的全局配置。
🌔新建页面
在app.json下的pages中新增页面的存放路径，小程序开发者工具即可帮我们自动创建对应的页面文件。
🌕修改页面首页
将自己想要放到首页的文件，提到app.json文件下，pages配置中的首位就可以了。
🍉WXML模板
🌑什么是WXML
WXML (WeiXin Markup Language) 是小程序框架设计的一套标签语言，用来构建小程序页面结构，其作用类似于网页开发中的 HTML 。
🌒WXML 和 HTML 的区别
标签名称的不同
HTML（div,span,img,a）
WXML（view,text,image,navigator）
属性节点的不同
<a href="#">超链接</a>
<navigator url="/pages/home/home"></navigator>
提供了类似于 Vue 中的模板语法
数据绑定、列表渲染、条件渲染
🍊WXSS样式
🌑什么是WXSS
WXSS (WeiXin Style Sheets) 是一套样式语言，用于描述 WXML 组件的样式，类似于网页开发中的CSS。
🌒WXSS 和 CSS 的区别
新增了 rpx 尺寸单位
CSS中需要手动进行像素单位换算，例如 rem
WXSS在底层支持新的尺寸单位 rpx，在不同大小的屏幕上小程序会自动进行换算
提供了全局样式和局部样式
项目根目录中的 app.wxss 会作用于所有小程序页面
局部页面的 .wxss 样式仅对当前页面生效
WXSS 仅支持部分 CSS 选择器
.class 和 #id
element
并集选择器、后代选择器
::after 和 ::before 等伪类选择器
🍋宿主环境
宿主环境 (host environment) 指的是程序运行所必须依赖的环境。
Android 系统和 iOS 系统是两个不同的宿主环境。安卓版的微信App是不能在iOS环境下运行的，所以，Android是安卓软件的宿主环境，脱离了宿主环境的软件是没有任何意义的!
手机微信是小程序的宿主环境，小程序借助宿主环境提供的能力，可以完成许多普通网页无法完成的功能。例如：微信扫码、微信支付、微信登录、地理定位等
🌑小程序宿主环境——通信与运行
小程序的通信主体是 渲染层 和逻辑层，其中：
WXML 模板和 WXSS 样式工作在渲染层
JS脚本工作在逻辑层
通信模型
小程序的通信模型分为两部分：
渲染层 与 逻辑层 之间的通信：由微信客户端进行转发
逻辑层 与 第三方服务器 之间的通信 ：由微信客户端进行转发
运行机制
小程序启动过程：
1、把小程序的代码包下载到本地
2、解析 app.json 全局配置文件
3、执行app.js 小程序入口文件，调用 App() 创建小程序实例
4、渲染小程序首页
5、小程序启动完成
页面渲染过程：
1、加载解析页面的 .json 配置文件
2、加载页面的 .wxml 模板和 .wxss样式
3、执行页面的 .js 文件，调用Page()创建页面实例
4、页面渲染完成
今天的讲解就到这，下期继续讲解认知小程序的开发 ！
