微信小程序1~6章总结

第一章 微信小程序概述

小程序特征：1.无需安装；2.触手可及；3.用完即走；4.无需卸载。

微信小程序开发者工具界面介绍：1.工具栏；2.模拟器；3.目录文件区；4.编辑区；5.调试器(有9个调试功能模块，分别是Console模版显示错误信息、Sources面板显示当前项目脚本文件、Network、Security、Storage、AppData、Wxml、Sensor、Trace)

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

小程序的基本目录结构

主目录下有2个子目录（pages和utils）和4个文件（app.js、app.json、app.wxss、project、config、json）

页面文件：.js文件在编写JavaScript代码控制页面的逻辑；.wxml文件用于设计页面布局、数据绑定等；.wxss文件用于定义页面样式的各种类型；.json页面配置文件。

小程序的开发框架

视图层：.wxml和.wxss文件的集合、逻辑层、数据层。

配置文件

全局配置文件：pages配置项用来指定小程序由那些页面组成；window配置项负责设置小程序状态栏、导航条、标题、窗口背景色等系统样式；tabBar配置项可以设置程序顶部底部的菜单栏；networkTimeout配置项设置各种网络请求API的超时时间值

逻辑层文件

1. 项目逻辑文件
2. 页面逻辑文件

页面结构文件

1. 数据绑定：简单绑定指用双大括号{{}}将变量包起来，运算是在{{}}内做一些简单的运算
2. 条件数据绑定：wx:if判断是否数据绑定当前组件
3. 列表数据绑定：wx:for将数据循环进行并数据绑定到该组件；block wx:for使用<block>包装多个组件进行列表数据绑定。
4. 模版：定义模版，<template>为模版标签name属性用于定义模版名称；调用模版，is属性用于进行调用模版名称，data属性定义传入的数据。
5. 应用页面文件：import方式，include属性
6. 页面事件
7. 页面样式文件

第三章 页面布局

盒子模型

块级元素与行内元数 

1. 块级元素 ：块级元素默认占一行高度，一行内通常只有一个块级元素，添加新的块级元素时，会自动换行，块级元素一般作为盒子出现。
2. 行内元素：不必从新的一行开始，在界面显示不全会自动出现在下一行，不能设置长、宽、高。
3. 行内块元素：当元素的display属性被设置为inline-block时，元素被设置成行内块元素，能设置长、宽、高。

浮动与定位

1. 元素浮动与清除：设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中指定位置的过程。在CSS中，通过float属性定义浮动，值分别有默认值(none)、左浮动(left)、右浮动(right)。
2. 元数定位：在CSS中通过position属性可以实现对页面元素的精确定位。其值有默认值(static)、相对定位(relative)、绝对定位(absolute)、固定定位(fixed)。

 flex布局

容器属性：flex容器支持的属性有7个

1. display：设置了flex布局之后子元素的float，clear，和vertical-align属性会失效。
2. flex-direction：row,水平方向左端起；row-revers，水平方向右端起；column，垂直方向顶端起；column-revers，垂直方向低端
3. flex-wrap：当项目在一根轴线的排列位置不够时，项目是否换行。nowrap默认值；warp换行正序排列；warp-reverse换行反向
4. 前两个属性的简写形式。
5. justify-content：与主轴方向有关，默认主轴水平对齐，方向从左到右。flex-start左对齐；flex-end右对齐；center居中；space-between项目之间的间隔相等；space-around项目两侧的间隔相等  
6. align-items：flex-start交叉轴起点对齐；flex-end终点对齐；center中线对齐；baseline根据它们的第一行文字的中线对齐；stretch如果未设置高度，项目将在交叉轴方向拉伸填充容器 
7. align-content：当换行后出现多根轴线，可定义轴线在交叉轴的对齐方式 

项目属性有6个属性：

1. order：定义项目的排列顺序，数值越小排列越靠前。
2. flex-grow:定义项目的放大比例，默认值0，即不变大。
3. flex-shrink：定义项目的缩小比例，默认值1。
4. flex-basis：属性用来定义伸缩项目的基准值，剩余空间将按比例进行缩放。
5. flex：是前面2,3,4的简写，其默认值分别是0,1，auto。
6. align-self：用来指定单独的伸缩项目在交叉轴上的对齐方式。

第四章 页面组件

组件的定义及属性

组件是页面层的基本组成单位。不同的组件可以有不同的属性，但它们也有一些共同的属性，如：id，class，style，hidden，data-*，bind*/catch*等。

语法格式：<标签名 属性名=“属性值”>内容</标签名>

容器视图组件

容器视图组件是能容纳其他组件的组件，是构建小程序页面布局的基础组件，主要包括view,srcoll-view，swiper组件

1. view组件是块级元素，主要用于布局展示。
2. srcoll-view实现滚动视图的功能。
3. swiper可以实现轮播图、图片预览、滑动页面等效果。

基础内容组件

1. icon组件及图标组件，通常用于表示一种状态。
2. text组件用于展示内容，类似html中的span，属于行内元素。
3. progress组件用于显示进度条状态，如资源加载、用户资料完成度等。属于块级元素。

表单组件

1. button按钮组件
2. radio单选框组件
3. chekbox复选框组件
4. switch开关组件
5. slider滑块组件
6. picker滚动选择器组件
7. pick-view嵌入页面的滚动选择器组件
8. input输入框组件
9. textarea多行输入框组件
10. label标签组件
11. form表单组件

多媒体组件

1. image图像
2. audio音频
3. video视频播放
4. camera相机

其他组件

1. map地图组件
2. canvas绘制图形组件

第五章 即速应用

1.即速应用概述

网址：https://www.jisuapp.cn/

即速应用的优势

1. 开发流程简单，零门槛制作
2. 行业模版多样，种类齐全
3. 丰富的功能组件和强大的管理后台

2.即速应用组件

布局组件：

1. 双栏组件
2. 面板组件
3. 自由面板组件
4. 顶部导航组件
5. 底部导航组件
6. 分割线组件
7. 动态组件

基本组件:

1. 文本组件
2. 标题组件
3. 图片组件
4. 按钮组件
5. 轮播组件
6. 分类组件
7. 图片列表组件
8. 图文集组件
9. 视频组件

高级组件:

1. 动态列表组件
2. 个人中心组件
3. 动态表单组件
4. 评论组件
5. 计数组件
6. 地图组件
7. 城市定位组件
8. 悬浮窗组件

其他组件:

1. 音频组件
2. 动态容器组件

3.即速应用后台管理

第六章 API应用

网络API

微信小程序处理的数据通常从后台服务器获得，再将处理结果保存到后台服务器。微信原生API接口或第三方API提供了各类接口实现前后端交互。

1. 发起网络请求
2. 上传文件
3. 下载文件

图片API

1. 选择图片或拍照
2. 预览图片
3. 获取图片信息
4. 保存图片到系统相册

录音API

1. 开始录音
2. 停止录音

音频播放控制API

1. 播放语音
2. 暂停语音
3. 结束语音

音乐播放控制API

文件API

1. 保存文件
2. 获取本地文件列表
3. 获取本地文件的文件信息
4. 删除本地文件
5. 打开文档

本地数据及缓存

1. 保存数据
2. 获取数据
3. 删除数据
4. 清空数据

位置信息API

1. 获取位置信息
2. 选择位置信息
3. 显示位置信息

设备相关API

1. 获取系统信息
2. 网络状态
3. 拨打电话
4. 扫描二维码