咱们先理清一下知识脉络：
小程序基础知识
建立第一个小程序
小程序代码的构成 wxml wxss js
小程序运行环境
小程序组件
小程序API
总结
一、小程序基础
与传统网页区别
1.运行环境不同，网页在浏览器中运行，小程序在微信中运行 2、 开发模式不同 网页是浏览器加编译器开发 小程序是在微信开发者工具中创建和配置小程序项目 3、api不同。小程序无法调用浏览器BOM和DOM提供的api。但是有微信自己提供的API
第一个小程序
注册流程：
1.浏览器点开网址：https://mp.weixin.qq.com/ 2. 小程序官网右上角点击注册。 3.选择账号类型小程序 4.填写相关信息 邮箱激活 5.点击激活激活账号 6.选择主体类型为个人 7、主体信息登记 8、获取小程序的APPID（在学习阶段可以使用测试号） {注册流程我就不放截图了比较简单}
微信开发者工具
微信开发者工具是官方推荐使用的小程序开发工具，它提供的主要功能如下： ① 快速创建小程序项目 ② 代码的查看和编辑 ③ 对小程序功能进行调试 ④ 小程序的预览和发布
https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html 这个是下载地址，下载流程和安装流程都比较简单我就不写了
登录建立项目
1、扫码登录， 2、手机登录 3、 这是登录后的页面
4、创建项目 需要更改的是项目名称，目录，语言。
三、小程序代码的构成
项目结构
1、
具体含义：
① pages 用来存放所有小程序的页面 ② utils 用来存放工具性质的模块（例如：格式化时间的自定义模块） ③ app.js 小程序项目的入口文件 ④ app.json 小程序项目的全局配置文件 ⑤ app.wxss 小程序项目的全局样式文件 ⑥ project.config.json 项目的配置文件 ⑦ sitemap.json 用来配置小程序及其页面是否允许被微信索引/
2、pages里面的一个文件夹就是一个页面，正常我们写一个小程序的页面就单独放一个文件夹
其中，每个页面由 4 个基本文件组成，它们分别是： ① .js 文件（页面的脚本文件，存放页面的数据、事件处理函数等） ② .json 文件（当前页面的配置文件，配置窗口的外观、表现等） ③ .wxml 文件（页面的模板结构文件） ④ .wxss 文件（当前页面的样式表文件）
json配置文件的作用
json是一种数据格式，在实际开发中json时配置文件的形式出现
小程序项目中有 4 种 json 配置文件，分别是： ① 项目根目录中的 app.json 配置文件 ② 项目根目录中的 project.config.json 配置文件 ③ 项目根目录中的 sitemap.json 配置文件 ④ 每个页面文件夹中的 .json 配置文件 注：由于本文要讲的内容太多，每个json的配置文件我在后期单独写一篇文章来解释，再次就不过多复述了
wxml模板
定义：
wxml是小程序的一套标签语言，用来构建小程序页面结构的，相当于网页开发中的html
区别：
① 标签名称不同 HTML （div, span, img, a） WXML（view, text, image, navigator）
② 属性节点不同
<a href="#">超链接</a>"
<navigator url="/pages/home/home"></navigator>
wxss样式、
定义：同理，wxss是一套样式语言，用于描述wxml的组件样式，类似于网页开发中的css
区别：
① 新增了 rpx 尺寸单位 CSS 中需要手动进行像素单位换算，例如 rem WXSS 在底层支持新的尺寸单位 rpx，在不同大小的屏幕上小程序会自动进行换算
② 区分全局的样式和局部样式 项目根目录中的 app.wxss 会作用于所有小程序页面 局部页面的 .wxss 样式仅对当前页面生效
③ WXSS 仅支持部分 CSS 选择器 .class 和 #id 类选择器和id选择器 element 并集选择器、后代选择器 ::after 和 ::before 等伪类选择器
小程序的js
我在看小程序的js的时候把它分为三类：
① app.js 是整个小程序项目的入口文件，通过调用 App() 函数来启动整个小程序
② 页面的 .js 文件 是页面的入口文件，通过调用 Page() 函数来创建并运行页面
③ 普通的 .js 文件 是普通的功能模块文件，用来封装公共的函数或属性供页面使用。和之前学的js作用一样。
## 四、小程序运行环境 知识点：
通信模型 运行机制 组件 API定义
运行环境又叫宿主环境
之前我们学的js运行环境就是浏览器，所以可以使用DOM，和BOM进行操作，
按照这种理解，小程序的运行环境就是微信。那么小程序也就不能再使用原来的DOM和BOM操作元素了，取而代之的是微信提供的各种接口。 同时也出现了一些浏览器没有的API 如微信扫码，微信支付微信登录，地理定位等 微信有ios和安卓两种环境也是不一样的。
这里重点讲手机微信的环境，浏览器环境不懂的同学自行去回去补知识点
小程序的通信模型
通信主体：
小程序中通信的主体是渲染层和逻辑层，其中： ① WXML 模板和 WXSS 样式工作在渲染层 ② JS 脚本工作在逻辑层
通信模型：
小程序中的通信模型分为两部分： ① 渲染层和逻辑层之间的通信 |由微信客户端进行转发 ② 逻辑层和第三方服务器之间的通信 |由微信客户端进行转发
微信客户端在拿到数据请求后在和第三方服务器进行数据交互和响应，相当于起到一个中介的作用
小程序启动的过程：
① 把小程序的代码包下载到本地 ② 解析 app.json 全局配置文件 ③ 执行 app.js 小程序入口文件，调用 App() 创建小程序实例 ④ 渲染小程序首页 ⑤ 小程序启动完成
页面渲染过程
① 加载解析页面的 .json 配置文件 ② 加载页面的 .wxml 模板和 .wxss 样式 ③ 执行页面的 .js 文件，调用 Page() 创建页面实例 ④ 页面渲染完成 总结：json 》 wxml 》 wxss 》 js
五、小程序组件
组件的分类
小程序中的组件由微信官方提供 主要分为九类 ① 视图容器 ② 基础内容 ③ 表单组件 ④ 导航组件 ⑤ 媒体组件 ⑥ map 地图组件 ⑦ canvas 画布组件 ⑧ 开放能力 ⑨ 无障碍访问
常用视图容器组件
1、view
普通视图区域 类似于 HTML 中的 div，是一个块级元素 常用来实现页面的布局效果
2、scroll-view
可滚动的视图区域 常用来实现滚动列表效果
3、swiper和swiper-item
轮播图容器组件 和 轮播图 item 组件
4、swiper 组件的常用属性
属性 ： 类型 ； 默认值 ； 说明 indicator-dots ： boolean ； false ；是否显示面板指示点 indicator-color: color; rgba(0, 0, 0, .3) ;指示点颜色 indicator-active-color: color #000000 ;当前选中的指示点颜色 autoplay :boolean ;false ;是否自动切换 interval :number; 5000; 自动切换时间间隔 circular :boolean ;false ;是否采用衔接滑动
常用基础内容组件
text：
文本组件 类似于 HTML 中的 span 标签，是一个行内元素
rich-text：
富文本组件 支持把 HTML 字符串渲染为 WXML 结构
其他常用组件
button：
按钮组件 功能比 HTML 中的 button 按钮丰富 通过 open-type 属性可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等）
image：
图片组件 image 组件默认宽度约 300px、高度约 240px
navigator: 1
页面导航组件 类似于 HTML 中的 a 链接
image 组件的 mode 属性:
image 组件的 mode 属性用来指定图片的裁剪和缩放模式，常用的 mode 属性值如下： mode: 值 ; 说明 scaleToFill （默认值）缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 aspectFit 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 aspectFill 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方 向是完整的，另一个方向将会发生截取。 widthFix 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变 heightFix 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变
六、小程序API
定义：
小程序中的 API 是微信环境提供的，通过API，可以方便的调用微信提供的能力， 例如：获取用户信息、本地存储、支付功能等。
分类：
事件监听API
特点：以 on 开头，用来监听某些事件的触发 举例：wx.onWindowResize(function callback) 监听窗口尺寸变化的事件
同步API
特点1：以 Sync 结尾的 API 都是同步 API 特点2：同步 API 的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常 举例：wx.setStorageSync('key', 'value') 向本地存储中写入内容
异步API
特点：类似于 jQuery 中的 $.ajax(options) 函数，需要通过 success、fail、complete 接收调用的结果 举例：wx.request() 发起网络数据请求，通过 success 回调函数接收数据
比较：
同步缺点 单线程执行，一个任务没有完成的时候后面的代码就无法执行 异步优点？ 代码会立刻走完，然后获取到缓存以后，由框架再去调用success，整个流程会很快的走完，不会让UI有停滞的效果。 能用异步API的时候就尽量用异步API
最后，给大家发一波上边的小程序图标部分合集，原图请自行下载
