1-3复习总结

微信小程序使用

1. 项目管理
   （1）在开发者工具中创建新项目或打开已有项目。
   （2）管理项目的目录结构，包括页面文件、样式、脚本等。

2. 编码
   （1）使用内置的代码编辑器编写小程序的前端代码，包括WXML（类似HTML）、WXSS（类似CSS）、JavaScript和JSON配置文件。
   （2）利用代码提示、自动补全等功能提高编码效率。

3. 调试与测试
   （1）利用模拟器预览小程序效果。
   （2）使用调试工具查看日志、设置断点、检查元素等。
   （3）测试不同机型的效果，确保兼容性。

4. 项目管理
   （1）提交代码至微信的版本控制系统。
   （2）申请体验版，进行内部测试。
   （3）提交审核，将小程序发布至生产环境。

5. 版本更新
   （1）在开发者工具中更新小程序版本，修改项目信息。
   （2）上传新版本的代码，并按照流程提交审核。

6. 资源管理
   （1）管理小程序使用的云资源，如数据库、云函数等。
   （2）利用腾讯云提供的资源和服务优化小程序的性能。

7. 获取帮助
   （1）阅读官方文档，了解最新的开发指南和API。
   （2）加入微信开发者社区，与其他开发者交流经验。

微信小程序开发基础

小程序的基本目录结构：

pages：目录中有2个子目录，分别是index和logs，每个子目录中保存着一个页面的相关文件。

utils：用来存放一些公共的.js文件，当某个页面需要用到utils.js函数时，可以将其引入后直接使用

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

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

app.wxss：小程序主样式表文件，类似HTML的.css文件。

小程序的开发框架：

页面样式文件：

页面布局

盒子模型：

.box{
  width: 70px;
  padding: 5px;
  margin: 10px;
}

盒子模型结构

盒子模型元素 

width和height 内容的宽度和高度。

padding-top、padding-right、padding-bottom和padding-left 上内边距、右内边距、底内边距和左内边距。

border-top、border-right、border-bottom和border-left 上边框、右边框、底边框和左边框。

margin-top、margin-right、margin-bottom和margin-left 上外边距、右外边距、底外边距和左外边距。

块级元素与行内元素

块级元素

块级元素的特点：

（1）一个块级元素占一行。

（2）块级元素的默认高度是由内容决定，除非自定义高度。

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

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

（5）块级元素可以容纳块级元素和行内元素。

行内元素

行内元素的特点：

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

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

（3）同一块内，行内元素和其他行内元素显示在同一行。

浮动与定位

元素浮动：

float

none——默认值，表示元素不浮动；

left——元素向左浮动；

right——元素向右浮动

清除浮动：

clear

left——清除左边浮动的影响，也就是不允许左侧有浮动元素；

right——清除右边浮动的影响，也就是不允许右侧有浮动元素；

both——同时清除左右两侧浮动的影响，

none——不清除浮动。

元素定位：
position

static——默认值，该元素按照标准流进行布局；

relative——相对定位，相对于它在原文档流的位置进行定位，它后面的盒子仍以标准流方式对待它；

absolute——绝对定位，相对于其上一个已经定位的父元素进行定位，绝对定位的盒子从标准流中脱离，它对其后的兄弟盒子的定位没有影响；

fixed——固定定位，相对于浏览器窗口进行定位。

flex布局

flex布局：

容器属性：

row——主轴为水平方向，起点在左端，当元素设置为flex布局时，主轴默认为row；

row-reverse——主轴为水平方向，起点在右端；

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

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

元素在不同主轴方向下的显示效果

（a）row（b）row-reverse（c）column（d）column-reverse

nowrap——不换行，默认值；

wrap——换行，第一行在上方；

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

flex-wrap不同值的显示效果

（a）nowrap（b）wrap（c）wrap-reverse

justify-content——与主轴方向有关，默认主轴水平对齐，方向从左到右；

flex-start——左对齐，默认值；

flex-end——右对齐；

center——居中；

space-between——两端对齐，项目之间的间隔都相等；

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

justify-content不同值的显示效果。

（a）flex-start（b）center（c）flex-end（d）space-between（e）space-around

align-items——与交叉轴方向有关，默认交叉由上到下；

flex-start——交叉轴起点对齐；

flex-end——交叉轴终点对齐；

center——交叉轴中线对齐；

baseline——项目根据它们第一行文字的基线对齐；

stretch——如果项目未设置高度或设置为auto，项目将在交叉轴方向拉伸填充容器，此为默认值。

align-content用来定义项目有多根轴线（出现换行后）在交叉轴上的对齐方式，如果只有一根轴线，该属性不起作用。

space-between——与交叉轴两端对齐，轴线之间的间隔平均分布；

space-around——每根轴线两侧的间隔都相等，轴线之间的间隔比轴线与边框间隔大一倍。

其余各属性值的含义与align-item属性含义相同。

（a）flex-start（b）center（c）flex-end

项目属性：