1、官网
https://developers.weixin.qq.com/miniprogram/introduction/
1、微信小程序介绍
1.1 为什么是微信小程序
1.2 微信小程序历史
1.3 疯狂的微信小程序
1.4 还有其它小程序不容忽视
1.5 体验
1.5.1 官方微信小程序体验
1.5.2 其它优秀的第三方小程序
2、环境准备
2.1 注册账号
2.2 获取APPID
登录微信公众号：https://mp.weixin.qq.com/
2.3 开发工具
3、第一个微信小程序
3.1 打开微信开发者工具
3.2 新建小程序项目
3.3 填写项目信息
不使用模板，创建出来的项目是这样。
创建项目的时候，使用模板。创建的项目结构不一样。如3.4
3.4 成功
4、微信开发者工具介绍
官网工具介绍：https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html
5、小程序结构目录
5.1 小程序文件结构和传统web对比
5.2 基本的项目目录
6、小程序配置文件
6.1 全局配置 app.json
官网：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
6.1.1 快速生成一个新的页面
新的页面放在最前面， 默认打开新页面地址。
6.1.2全局配置文件（window）
6.1.3 tabbar
官网：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar
6.2 页面配置page.json
6.3 sitemap 配置-了解即可
7、模板语法
7.1 数据绑定
7.1.1 普通写法
7.1.2 组件属性
7.1.3 bool类型
7.2 运算
7.2.1 三元运算
7.2.2 算数运算
7.2.3 逻辑判断
7.2.4 字符串运算
7.3 列表渲染
官网：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html
7.3.1 wx:for
7.3.2 block
7.4 条件渲染
7.4.1 wx:if
7.4.2 hidden
8、小程序事件的绑定
8.1 wxml
8.2 page
8.3 特别注意
9、样式WXSS
9.1 尺寸单位
案例
需要实现的需求
/*
1 设计稿 750px
750 px = 750 rpx
1 px = 1 rpx
2 把屏幕宽度 改成 375 px
375 px = 750 rpx
1 px = 2 rpx
1rpx = 0.5px
3 存在一个设计稿 宽度 414 或者未知 page
1 设计稿 page 存在一个元素 宽度100px
2 拿以上的需求 去实现 不同宽度的页面适配
page px = 750 rpx
1 px = 750 rpx / page
100 px = 750 rpx * 100 / page
假设 page = 375px
4 利用 一个属性 calc属性 css 和 wxss 都支持 一个属性
1 750 和 rpx 中间不要留空格
2 运算符的两边也不要留空格
*/
view{
/* width:200rpx; */
height:200rpx;
font-size:40rpx;
background-color:aqua;
/* 以下代码写法是错误的 */
/* width: 750 rpx * 100 / 375 ; */
width:calc(750rpx*100/375)
}
9.2 样式导入
9.3 选择器
9.4 小程序中使用less
10、常见组件
10.1 view
10.2 text
<!--
1 长按文字复制 selectable
2 对文本内容进行 解码
-->
<text selectable decode>
test 123 <
</text>
10.3 image
官网：https://developers.weixin.qq.com/miniprogram/dev/component/image.html
10.4 swiper
官网：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
<!--
1 轮播图外层容器 swiper
2 每一个轮播项 swiper-item
3 swiper 标签 存在默认样式
1 width 100%
2 height 150px image 存在默认宽度和高度 320px * 240
3 swiper 高度 无法实现由内容撑开
4 先找出来 原图的宽度和高度 等比例 给swiper 定 宽度和高度
原图的宽度和高度 1125 * 352 px
swiper 宽度 / Swiper 高度 = 原图的宽度 / 原图的高度
swiper 高度 = swiper 宽度 * 原图的高度 / 原图的宽度
height: 100 vm * 352 / 1125
5 autoplay 自动轮播
6 interval 修改轮播时间
7 circular 衔接轮播
8 indicator-dots 显示 指示器 分页器 索引器
9 indicator-color 指示器未选择的颜色
10 indicator-active-color 选中的时候指示器的颜色
-->
<swiper autoplay interval="1000" circular indicator-dots indicator-color="#0094ff" indicator-active-color="#ff0094">
<swiper-item> <image mode="widthFix" src="https://gw.alicdn.com/imgextra/i2/6000000006671/O1CN01kmf0MN1z9N0TQusrK_!!6000000006671-0-octopus.jpg_q90.jpg_.webp" /> </swiper-item>
<swiper-item> <image mode="widthFix" src="https://gw.alicdn.com/imgextra/i2/6000000002347/O1CN01C5Y67M1TCyPwSr2uM_!!6000000002347-0-lubanimage.jpg_q90.jpg_.webp" /> </swiper-item>
<swiper-item> <image mode="widthFix" src="https://gw.alicdn.com/imgextra/i4/2206525783763/O1CN010lspLY1dfVA8PCKwq_!!2206525783763-0-alimamacc.jpg_q90.jpg_.webp" /> </swiper-item>
</swiper>
10.4.1 swiper
swiper的宽度：100%，100vm
10.4.2 swiper-item
10.5 navigator
官网：https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html
10.6 rich-text
官网：https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html
10.7 button
提示 ：如果按钮设置的type=“warn”没有效果
10.8 icon
官网：https://developers.weixin.qq.com/miniprogram/dev/component/icon.html
10.9 radio
官网：https://developers.weixin.qq.com/miniprogram/dev/component/radio.html
10.10 checkbox
官网：https://developers.weixin.qq.com/miniprogram/dev/component/checkbox.html
11 自定义组件
使用步骤
1、创建自定义组件
2、引入组件(.json文件)
3、使用组件（wxml文件）
11.1 创建自定义组件
如何快速生成组件的四个文件。在微信开发者工具中，右键文件夹，选择新建Component
11.1.1 声明组件
11.1.2 编辑组件
11.1.3 注册组件
11.2 声明引入自定义组件
11.3 页面中使用自定义组件
11.4 其它属性
11.5 组件传参（父传子）
官网：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/
步骤：
1、父组件，标签中传值
2 子组件中js，properties接收参数
3 子组件正常使用该参数
父传子组件数据解析：
11.6 组件传参（子传父）
demo17
步骤：1、子组件触发父组件 （子组件绑定的触发事件，父组件中接收：bind+绑定的事件名）
2、父组件被触发的事件执行业务
12 小程序生命周期
官网：https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html
12.1 应用生命周期
12.2 页面生命周期
12.3 页面生命周期图解
官网：https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html
