原生小程序思路

用户首次登录

1.实现授权弹窗 -> 组件button,添加标签属性open-type=“getUserInfo”
2.监听用户操作,接受用户数据
监听用户操作->绑定事件->事件名称:getuserinfo
获取用户数据->通过形参->event.detail内部
3.动态渲染
将数据放入data中,并在页面上使用插值语法显示

二次登录免授权

在onLoad中,使用wx.getUserInfo方法,检测用户是否已经授权过
如果已经授权,可以通过success得到用户信息

个人中心拖拽效果

问题一:如何控制元素移动
改变元素当前位置的手段:
1.定位
2.transform
3.margin(padding在一定程度上也可以,但是区别margin不会被背景色控制,padding,border会被渲染背景色)
决定使用transform去控制元素位置

问题二:如何知道要移动多少距离
距离=手指移动的位置-手指按下的位置
绑定touchstart获取用户手指按下位置,绑定touchmove获取用户手指移动当前位置

问题三:如何做到手指抬起之后,元素慢慢回到初始位置
拆分需求:
1)手指抬起之后
绑定touchEnd事件,监听用户操作
2)元素回到初始位置
将transform的值改为0
3)如何慢慢回去
使用过渡属性transition
出现问题:手指放开回到起始位置好使,但是拖动元素的时候会出现延迟
解决:拖动期间不开启过渡

移动端常见功能

1.下拉刷新数据
两种方法:
1)局部下拉刷新:通过scroll-view实现
1.给scroll-view标签添加refresher-enabled(开启下拉动画)
问题:当前动画不回家了
2.监视用户下拉操作,当用户下拉之后,发送请求
给scroll-view标签绑定事件:refresherrefresh
发送请求:getVideoList
3.当数据回来之后,关闭下拉动画
通过标签属性refresher-triggered,并通过data控制,将他变为false即可

	2)整个页面下拉刷新:通过页面配置开启enablePullDownRefresh:true+页面监听onPullDownRefresh

2.上拉加载更多
需求:当用户上拉触底,获取过多数据
拆解需求:
1.怎么知道用户什么时候上拉触底->监听
绑定事件监听,事件:scrolltolower
2.获取过多数据
由于没有真实接口,所以对旧数据进行了深拷贝

3.导航条中选项动画
1.使用scroll-into-view可以让某个节点跑到最前面去
匹配规则:scroll-into-view的值 === 标签id
使用data中的scrollId,控制scroll-into-view的值的切换
2.通过scroll-with-animation开启过渡动画

当当前视频开始播放时,停止上个视频的播放

问题:多个视频同时播放
需求:当当前视频开始播放时,停止上个视频的播放
拆解需求:
1.如何知道视频什么时候开始播放时
绑定事件监听->事件名称:play
2.如何停止视频播放
通过js代码控制视频播放
1)通过wx.createVideoContext方法得到对应的video组件
2)通过视频上下文对象(VideoContext),调用它的pause方法可以暂停视频播放
3.如何知道上个视频是哪个
在当前视频播放的时候,将他的id保存起来,留作下次使用
问题:一个视频播放两次,上一个视频的id就是当前的id
原因:上次和当前的id相同
解决:多进行一个判断,如果当前id和上次相同,不暂停

使用image标签替换video标签进行展示

问题:同一页面存在多个video时，video无法正常播放一直在加载转圈
需求1:需要使用image标签替换video标签进行展示

问题:当前已经使用image替换video,但是image无法播放视频
需求:当用户点击image时,播放对应的视频(用video替换image)
拆解需求:
1.如何知道用户什么时候点击image
绑定事件监听,事件名称:tap
2.如何播放视频
通过js播放视频
1.生成video组件对应的上下文对象(videocontext)
2.videocontext.play()播放视频
3.如何知道对应的视频是哪个
让image标签和video标签的id相同,产生对应关系
通过wx:if进行标签之间的切换,如果data中记录的id与某个image相同,就让对应的video组件显示出来,image隐藏

C3 bug解决

问题:当歌曲页面播放背景音频,然后离开song页面,在进入同一首歌的song页面,C3效果不对
需求:当song页面的背景音频正在播放,离开之后,再次进入当前这首歌的song页面,C3效果自动进入播放状态
拆解需求:
1.如何知道上次页面背景音频是否处于播放状态
问题一:如何知道当前页面是否正在播放
通过当前页面的isPlay属性判断,如果为true就说明正在播放,为false就说明已暂停
思路:将当前本次的isPlay保存下来,留给下次使用
问题二:如何缓存播放状态数据isPlay
缓存数据的位置:app实例对象
读取:
1.获取app实例对象 getApp()
2.通过属性名直接读取想要的数据
写入:
通过属性名直接修改
appInstance.globalData.msg=“我是修改之后的数据”

		本质:他就是一个普通的对象,属性名也可以不叫作globalData,随意取名

		缓存的时机:
			1.onUnLoad
			2.用户点击播放按钮的时候
	
2.如何知道用户什么时候进入song页面
	onLoad
3.如何知道当前song页面的歌曲和上次正在播放的歌曲是不是同一首歌
	问题:如何区分两首歌
	解决:比较两首歌的id
	问题:如何缓存上一首歌的id
		同需求1,在app实例中保存
4.C3效果进入播放状态
	通过data中的isPlay控制页面isplaying类名的添加和删除,从而控制C3效果

切换歌曲

需求:当用户点击上一首/下一首按钮,播放对应歌曲
拆分需求:
1.当用户点击上一首/下一首按钮的时候
绑定事件,事件名称:tap
2.播放对应歌曲
继续拆分:
1.如何播放歌曲
通过背景音频管理器进行播放
需要歌曲的id,用来请求数据
2.如何找到对应的歌曲
找到对应歌曲的id
问题:song页面只有当前歌曲详细信息,不可能有上一首或者下一首歌的id
数据源:recommendSong页面存储着所有歌曲的数据,其实recommendSong就是播放列表
数据在recommendSong,使用数据在song页面
问题:如何实现两个页面(组件)之间的通信
react可以使用PubSub,vue可以使用事件总线
前提条件(重要!!!):必须保证订阅者和发布者同时存在
订阅者:一方想要接收数据(听)
发布者:另一方想要分发数据(说)

			流程一:
			问题:业务场景是用户点击之后,才播放下一首歌
			tap事件在song页面执行,recommendSong根本不知道tap事件是否执行了
			recommenSong想知道用户什么时候点击了切换按钮,song需要告诉recommendSong
			订阅者:recommenSong页面
			发布者:song页面
			
			流程二:
			recommendSong知道用户点击了下一首按钮,去找下一首歌曲的id
			问题:怎么知道现在是哪一首
			思路:用户点击跳转到song页面的一瞬间,就已经可以确定当前歌曲是谁
			解决:跳转的一瞬间,记录当前点击的index

			流程三:
			recommendSong找到了下一首歌曲的id,需要把id发给song页面
			想要数据的是song,数据在recommendSong
			订阅者:song页面
			发布者:recommendSong页面

			

			问题:需要使用到PubSub
			解决:小程序使用npm包,分为四个步骤,详情看word
			思考:
				接收:函数	PubSub.subscribe('MY TOPIC', mySubscriber)
				发布:数据

背景音乐

问题:手机控制小程序背景音频播放状态的渠道有很多,如果暂停了背景音频,再次进入对应的页面显示的C3效果错误
需求:当背景音频正在播放,让页面的C3效果处于播放状态
拆解需求:
1.如何监听背景音频的播放状态
给backgroundAudioManager绑定play和pause监听
2.如何让页面的C3效果进入播放状态