黑马微信小程序P6-

新建小程序页面：

只需要在app.json->pages中新增页面的存放路径，小程序开发者工具即可帮我们自动创建对应的页面文件

 修改项目首页：

只需要调整app.json->pages数组中页面路径的前后顺序，即可修改项目的首页。小程序会把排在第一位的页面，当作项目首页进行渲染，如图所示：

 什么是WXML：

WXML(WeiXin Markup Language)是小程序框架设计的一套标签语言，用来构建小程序页面的结构，其作用类似于网页开发中的HTML。

WXML和HTML区别：

 什么是WXSS：

WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML的组件样式，类似于网页开发中的CSS

WXSS和CSS区别：

 小程序中的.ts文件：

我们通过.ts文件来处理用户的操作。例如：响应用户点击等。

.ts文件的分类：

①app.ts

②页面的.ts文件

③普通的.ts文件

P7小程序的宿主环境

宿主环境：

指的是程序运行所必需的依赖环境。

eg.Andriod是安卓软件的宿主环境，不能在iOS环境下运行。

小程序的宿主环境：

手机微信是小程序的宿主环境。

小程序宿主环境包含的内容：

 ①通信模型

通信主体：

小程序的通信主体是渲染层和逻辑层。

渲染层由wxss和wxml组成工作，js脚本工作在逻辑层

 小程序的通信模型：

渲染层和逻辑层之间通信

逻辑层和第三方服务器之间通信

两者均由微信客户端进行转发。

 ②运行机制

小程序启动过程：

①先下载小程序的代码包到本地

②解析app.json全局配置文件

③执行app.js小程序入口文件，为的调用app（）创建小程序实例

④渲染小程序首页

⑤小程序启动完成

页面渲染过程：

①加载解析页面的.json配置文件

②加载.wxml模板和.wxss样式

③执行.ts，调用page（）创建页面实例

④页面渲染完成

P8组件-view和scroll-view组件

小程序中的组件也是宿主环境提供，小程序的组件分为9大类，常用的几类如下：

①视图容器

②基础内容

③表单组件

④导航组件

常用视图容器组件：

view、scroll-view、swiper和swiper-item

 view组件的基本使用：

实现如图flex横向布局效果：

 提示：在wxml里写结构，在wxss里写样式

<view class="container1">：这是一个视图容器，类似于HTML中的<div>元素，用于包裹一组视图元素。class="container1" 是一个类名，可以用来在样式文件中定义该容器的样式。

<view>：这是 WXML 中的一个标签，用于定义一个视图元素，类似于 HTML 中的<div>元素。在微信小程序中，<view>元素用于包裹其他视图元素，或者用来显示一段文本。

A、B、C：这些是在 <view> 标签中显示的文本内容，它们将被显示在页面上，依次排列在一起。

</view>：这是闭合 <view> 标签，表示该视图元素的结束。

这段代码是微信小程序中的样式文件，用于定义容器 `container1` 中子视图元素的样式。让我来解释它的含义：

1. `.container1 view{}`: 这是一个 CSS 选择器，用于选中容器 `container1` 内部的所有 `<view>` 元素，并对其应用样式。在这里，设置了每个 `<view>` 元素的宽度为 100px，高度为 100px，文本水平居中对齐，行高为 100px。

2. `.container1 :nth-child(1){}`、`.container1 :nth-child(2){}`、`.container1 :nth-child(3){}`: 这些是 CSS 选择器，分别用于选中容器 `container1` 中的第一个、第二个和第三个子元素，并对它们分别应用不同的背景颜色。这里分别设置了第一个子元素的背景色为 lightskyblue、第二个子元素的背景色为 lightpink、第三个子元素的背景色为 lightgoldenrodyellow。

3. `.container1`: 这是一个 CSS 选择器，用于选中容器 `container1` 元素本身，并对其应用样式。在这里，设置了容器为 flex 布局，子元素水平间距平均分布，且子元素会在容器中水平居中显示。

因此，这段代码的含义是定义了容器 `container1` 中子视图元素的样式，包括宽高、文本居中、行高等，以及不同子元素的背景颜色，最后将容器设置为 flex 布局，并使子元素水平间距平均分布，且水平居中显示。