01-基本配置
新建项目：vant-contrib.gitee.io/vant-weapp/…
第一步：新建miniprogram文件夹 拖进xx文件
指定根目录
第二步：配置project.config.json文件的， 根目录root，显示优化后的目录 ，这个是在最下面， 和setting 、appid同级别
第三步：yarn init -y 初始化
第四步：导入vant 组件库 yarn add @vant/weapp --production
第五步： 修改app.json 删除style:v2
第六步： 修改project.config.json 优化了目录所以手动打包npm以及它的详情
第七步：工具---构建npm 就会生成 miniprogram_npm文件夹
第八步：修改app.json数组的排列顺序或者添加编译模式
第九步：新建vant文件夹---新建page文件index
第十步：app.json可以引入组件
app.json全局注册组件 usingComponents:{}
第十一步：vant组件 index.wxml里面
02-插槽的用法
个人理解：默认插槽就不写，其他插槽就写 slot="xxx"
03-swipeCell滑动单元格
app.json中全局引入vant组件
右边插槽实现左滑删除 反馈组件 SwipeCell
清除缓存 重新编译
优化删除样式
通过控制台小手去找到组件
自定义类名
根节点样式类---自定义类
通过important强行修改！
控制台找样式非常不方便
建议每次都要去编译一下
样式覆盖
- 简单粗暴，通过调试工具查找要修改样式的盒子，找到已定义的类名，然后强制覆盖原有的样式
- 通过外部样式类
Vant 大部分组件都支持 custom-class 来指定一个类名，通过这个类名来修改组件根节点的样式，以 van-cell-group 为例：
- 使用样式变量
新版本的 css 支持定义变量，其语法样式为: --变量名: 值，定义的变量通过 var 关键字来使用：
记住是分号！！！
css也有作用域的概念
在box 下面，css变量拥有作用域的概念
box定义的变量，可以在他自身及后代元素中使用
没有就使用默认值,逗号分隔开
css变量可以支持传默认值，可以写在page全局里面使用
总结：
vant组件-样式覆盖
页面配置修改样式
还可以调整这一块的文字大小，鼠标一摸，40rpx
size="large" 不能去掉哦~
修改类名的方法
- 直接类型，加权重
- 看组件是否暴露类名
- 新版本的css变量
04-分包
使用分包
分包加载有点类似 Vue 中的按需加载的功能，将小程序拆分成若干个部分叫做分包，在分包的基础上能够实现自动加载当前所需部分小程序代码，在一定程序能够提升小程序的加载速度，同时也能解决小程序代码包大小不能超过 2M 的限制。
root：代码的根目录 目录的名字
pages ：两个页面 分页的路径
app.json 文件通过 subPackages 配置要加载的分包：自动去添加
不会首次加载就执行~
主包：首次加载的包
除了他们以外都是主包，分包某些场景下才会加载对应分包的代码，tabbar的页面只能放在主包当中以及分包也有数量的限制。
整个小程序所有分包大小不超过 20M。
单个分包/主包大小不能超过 2M
分包预下载
提前加载
是和分包是同级别的！
参考抖音：分包预加载技术可以提前去下载 分包的代码，分包页面的访问速度才会提升
打开调试器观察
访问哪个页面去预下载一个分包。
表示预加载成功~
05-框架接口
01-getApp
实现数据和方法的共享：
getApp()获取小程序实例
02-getCurrentPages
demo/index.js
获取数组getCurrentPages()
06-内置API
头像昵称填写
开发文档：open-type
手动编译模式
第一步：复制样式和结构
第二步：1.必须得是Button按钮，2. 添加属性open-type, 获取头像 chooseAvatar
3.获取用户回调bind:chooseavatar ="xxx"
编译没有效果，不显示具体的内容，版本太低了2.21.2
查看右侧
控制台有报错请忽略掉~
更新头像
上面可以监听，ev返回一个对象
获取头像
获取用户昵称必须用到 input 组件，当 input 获得焦点后小程序会自动展示用户的昵称
以下是 input 的使用细节：
- 设置 input 的 type 属性值为 nickname
- 监听 input 组件的 input 、blur 、change 等事件获取表单中的值
bind:change 第一次是用了对象的方法
看appdata控制台是否有更新
以上两种是有坑的，上传了头像昵称就没了，有了昵称头像就没了。
如果只更新对象中的属性，引号包裹~就会解决上面的报错。更新对象中的属性
07-内置API路由
新建router 文件夹,里面三个文件夹
demo 、detail、index 三个文件夹
手动编译：路由测试 pages/router/index/index
open-type navigate redirect
跳转的路径 open-type="" navigate/ redirect
code......
首页 详情页 demo页
使用场景：已经登录了，没有必要返回登录页了
tabbar跳转 switchTab
app.json配置tabbar 有tab快捷键~此时在首页点击去跳转到详情页没有反应了，因为此时的详情页升华了，不再是它啦！不能普通跳转，用switchTab
app.json 指定跳转类型
open-type="switchTab"
js跳转
developers.weixin.qq.com/miniprogram…
exit离开小程序
reLaunch 全部清空，只有最后一条
困死 记得看视频
总结
主要是思想
- vant组件
- cell单元格引入 注册 使用
- 样式：简单暴力 看文档是否暴露雷属性 新版css变量进行覆盖
- 分包加载：重点 第一：提高首次打开的速度，第二点不能超过2M的限制
- 分包预下载 ：提前加载 不影响用户体验
- 框架接口---getApp获取小程序的实例 token 属性和方法
- 框架接口---getCurrentPages获取对应的页面栈 、上一个路径
- Behavior---mixin混入---【还没了解】
- 内置API--获取头像Button
- 内置API--获取昵称input type=nickname 保证版本库大于2.21.1
- 路由--单纯的页面跳转 navigate redirect switchTab。。。
