超详细微信小程序开发学习笔记，看完你也可以动手做微信小程序项目
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
官网：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html#%E9%85%8D%E7%BD%AE%E9%A1%B9
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
test 123 <
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
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