一至三单元复习

第一章（微信小程序概述）

微信小程序的特点包括：

1. 无需下载安装：用户可以直接通过微信打开小程序，无需下载和安装额外的应用程序。
2. 节约手机存储空间：由于小程序无需安装，用户可以节约手机存储空间，同时可以随时卸载不再需要的小程序。
3. 快速启动：小程序的启动速度较快，用户可以迅速进入并使用。
4. 便捷分享：通过微信内置的分享功能，用户可以轻松将小程序分享给微信好友或在朋友圈中发布。
5. 先进的开发框架：微信小程序提供

小程序的特征

1.无需安装

2.触手可及

3.用完即走

4.无需卸载

小程序应用场景的特点

1.简单的业务逻辑

2.低频度的使用场景

第二章（微信小程序开发基础）

小程序的基本目录结构

项目主目录

pages：所有页面，一个页面一个文件夹，设置页面路径

utils：工具包存放+

主体文件

app.js:小程序逻辑文件，用来注册小程序全局实例

app.json:小程序公共设置文件，配置小程序全局设置

app.wxss:小程序主样式表文件，设置小程序样式

页面文件

.js文件:页面逻辑文件

.wxml文件:页面结构文件

.wxss文件:页面样式文件

.json文件:页面配置文件

小程序的开发框架

视图层

将数据进行处理后将视图展现出来

逻辑层:

增加app和page方法，进行程序和 页面注册

提供丰富的api，如扫一扫，微信支付的能力

每个页面有独立的作用域，并提供模块化能力

数据层:

页面临时数据或存储

文件存储

网络存储与调用

配置文件

window配置项

navigationBarBackgroundColor：导航栏背景色

navigationBarTextStyle：导航栏标题颜色

navigationBarTitleText：导航栏标题文字内容

backgroundColor：下拉刷新窗口的背景色

backgroundTextStyle：下拉背景字体

enablePullDownRefresh：是否开启下拉刷新

tabBar配置项

color：标签页上的文字默认颜色

selectedColor：标签页上的文字被选中时呈现的颜色

borderStyle：标签页上的背景色

backgroundColor：标签条之上的框线颜色

list：标签页列表

第三章（页面布局）

盒子模型（4部分）

内容

内边距

边框

外边框

 

块级元素与行内元素

块级元素

1.一个块级元素占一行

2.块级元素的默认高度有内容决定，除非自定义高度

3.块级元素的默认高度是父级元素的内容区宽度，除非自定义高度

4.块级元素的高度。宽度。外边距及内边距都可以自定义设置。

5.块级元素可以容纳块级元素和行内元素

 

行内元素

1.行内元素不能被设置高度和宽度，其高度和宽度由内容决定

2.行内元素内不能放置块级元素，只能容纳文本或其他行内元素

3.同一块内，行内元素和其他行内元素显示在同一行

行内块元素

同时拥有行内元素和块元素特点可设置高度宽度

浮动与定位

元素浮动与清除

none--默认值，不浮动

left--左浮动

right--右浮动

清除元素

clear:

left--清除左浮动

right--清除右浮动

both--清除两边浮动

元素定位

static--默认值

relative--相对定位

absolute--绝对定位

fixed--固定定位

容器属性

1.dispiay
flex--块级flex布局

inline--flex行内flex布局

2.flex--direction
ron--主轴为水平方向，起点在左边

ron--reverse--主轴为水平方向，七点在右端

column--主轴为垂直方向，起点在顶端

column--reverse--主轴为垂直方向，起点在底端

 

3.flex--wrap

nowrap--不换行默认值

wrap--换行，第一行在上方

wrap--reverse--换行，第一行在下方

 

4.flex--flow
是flex--direction和flex--wrap的简写形式，默认值为row nowrap

5.justify--content
flex--start---左对齐，默认值

center--居中

flex--end--右对齐

space--between--两端对齐，项目之间间隔相等

space--around--每个项目两侧的间隔相等

6.aling--items

flex-start--交叉轴起点对其

flex-end--交叉轴终点对其

center--交叉轴中线对齐

baseline--根据第一行文字基线对齐

stretch--默认值

项目属性

flex-grow

定义项目放大比例

flex-basis

用来定义伸缩项目的基准值

flex-shrink

用来定义项目的缩小比例