超详细微信小程序开发学习笔记，看完你也可以动手做微信小程序项目

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

<!--
    1 长按文字复制 selectable
    2 对文本内容进行 解码
-->
<text selectable decode>    
    test &nbsp; 123 &lt;
</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