1.小程序
是什么 为什么 怎么做
可以同App进行互补,提供同app类型的功能,比app使用方便简洁。
开发门槛低,成本低 小程序的全局对象是微信 小程序事件冒泡bindtap和非冒泡catchtap 动态是{{}}模板语法 navigteTo当前页面没死 redirectTo当前页面会死 小程序开发文档: (1)页面的配置和语法找框架 (2)页面的布局搭建找组件 (3)实现特定功能的时候找API
2.flex布局
水平的主轴和垂直的交叉轴 6种 flex-direction属性决定主轴的方向 flex-wrap属性定义如果一条轴线排不下如何换行。 flex-flow属性是flex-direction属性和flex-warp属性的简写。 justify-content属性定义了项目在主轴上的对齐方式 align-items属性定义项目在交叉轴上如何对齐 align-content属性定义了多根轴线的对齐方式如果项目只有一根轴线该属性不起作用
3.适配
物理独立像素 css独立像素 设备独立像素 以设计稿为出发点 rem设置根字体
4.项目
摆样式的时候先摆样式再摆边距 复习html和css可以去仿网站的登录和注册功能 wx:for遍历的时候,不需要写item和index默认每一项都会取名叫item下标叫index wx:key它在使用的时候拿到遍历的这个数组,第一层对象当中的东西,不需要写item.id,只需要写id就可以上面这样的wx:for用法只适于一层循环遍历,多层循环item和index就重复了需要自己重新制定。
使用scroll-view 1.切记给高度 2.标示是横向滚动还是竖向滚动scroll-x 3.开启flex布局enable-flex
项目中this.setData在循环里面会设置4次 在循环外面只会设置一次，效率高但是用户体验差
封装组件：结构和样式行为一样封装组件,定义注册使用,动态数据要抽离出来使用的时候在用
5.个人中心
touchstart bindtouchmove bindtouchend手指事件 pc端鼠标事件是紧密相连的,移动端三个是独立的 处理覆盖盒子向下拖拽回弹的效果 盒子移动两种办法定位和transform target目标元素 currentTarget绑定事件元素 touches是一个数组,代表手指的个数 手指移动的距离就是盒子要移动的距离 手指抬起,元素要恢复到原来的位置 小程序里面存储Storage不需要把对象转化为json串
6.登录
[]语法： 点语法和[]语法 1.取值(拿变量当中或者表达式的值) 2.拿到值再次和外部组成新语法
7.视频
scroll-into-view的值必须和下面子项的id对应，和谁的id值对应，那么谁就在第一项 之前我们view当中通过id，把当前项的id的值传递到回调函数当中 而现在id属性不再是我们传递的属性了，而是要和上面scroll-into-view去配合 那么我们现在就得再想另外一个办法把当年咱们的当前项id值传递给回调函数 这里我们选择使用data-id去传递
flex:1 ====> flex-grow:1; flex-shrink: 0; flex-basis: auto; flex-grow: 1; 把剩余的空间全部给search
calc() 可以实现计算 屏幕的高度 - （header+nav）的高度
cookie是再res里面的 我们需要在这判定是不是登录操作，如果是登录操作 需要把res里面的cookie信息保存起来，后续添加到header
视频 单例模式 只有一个 视频播放的时候依赖视频播放上下文对象,而整个页面只允许一个执行上下文工作。 如何保证只有一个执行上下文对象存在,存储执行上下文在this身上单例模式 函数 参数 返回值 上拉触底 下拉刷新 内网穿透 性能优化,图片替代视频 无论是按钮转发还是菜单转发 最终触发的都是页面 onShareAppMessage(object object) 每个视频的播放记录是一个对象,对象里面包含id和time
8.今日推荐
把小盒子放在大盒子里面居中的方式有4种 1.display:flex justify-content:center align-items:center
2.top:0 left:0 bottom:0 right:0 margin:auto
3.left:50% top:50% transform:translate(-50%,-50%)
4.left:50% top:50% margin-left:-100rpx margin-top:-100rpx
定位的元素永远比不开启定位的元素高 继承 color font-size aline
动画里面有几个属性 c3动画8个属性 animation-delay 规定动画开始的延迟。 animation-direction 定动画是向前播放、向后播放还是交替播放。 animation-duration 规定动画完成一个周期应花费的时间。 animation-fill-mode 规定元素在不播放动画时的样式（在开始前、结束后，或两者同时）。 animation-iteration-count 规定动画应播放的次数。 animation-name 规定 @keyframes 动画的名称。 animation-play-state 规定动画是运行还是暂停。 animation-timing-function 规定动画的速度曲线。
详情页面和分包
跳转到详情页携带点击歌曲的id
点击暂停和播放音乐需要跟着暂停播放根据函数isPlay调用播放器的play()和pause()
同步系统播放器的播放和暂停和自己页面的播放和暂停
发布订阅npm i pubsub-js 每次安装一个包都要去工具当中构建一次npm让小程序可以找到
切换歌曲 点击上一曲和下一曲回调当中使用pubsub-js把上下的标志传递给推荐列表页 推荐页面接收到后根据标志计算上下的id再通过pubsub-js回传给详情页 详情页接好到新歌曲id后根据新的id请求获取新歌的详情和url修改播放器的src和title
歌曲完成自动播放下一曲 使用pubsub-js发送给next给推荐列表页就可以播放下一曲
歌曲进度条和时间的动态显示 搭建进度条监听歌曲更新时间的回调定义当前的时间和总时间和width 通过播放器的属性获取当前时间和总时间 时间改变进度条也要改变通过时间比例计算
分包
常规分包 独立分包 分包预下载
常规分包： 打包的体积不允许大于2M，实际项目可能大于2M 特点：分包可以使用主包的资源及自己的资源，不能使用其它分包的资源（子包依赖主包） 主包里面包含首页及tabBar页面 点击需要访问分包的页面才会加载分包
做法： 1、先把主包当中需要分的包页面拿过来，形成分包package 2、配置分包声明 3、配置好了，可以重新编译代码，可以正常打开，并且在预览或者详情当中可以查看分包信息 4、分包虽然可以使用主包里面的资源，但是之前我们所写的路径可能有问题，所以 要去查看分包里面的路径，修改正确
独立分包： 按照官方把推荐和歌曲详情分包 添加一个字段"independent": true就变为独立分包 独立分包可以不用加载主包 当依赖主包的资源的时候出问题（除了图片） 需要给分包拷贝一份资源 需要在分包内部也引入一次 如果一些页面功能比较独立，可以使用独立分包
分包预下载： 开发者可以通过配置，在进入小程序某个页面时，由框架自动预下载可能需要的分包， 提升进入后续分包页面时的启动速度。对于独立分包，也可以预下载主包。
