H5部署地址:https://uniapp.dongjunhao.cn
接口用github的NeteaseCloundMusicApi开源数据,数据使用文档:https://binaryify.github.io/NeteaseCloudMusicApi/#/
1.简介
使用Vue.js开发跨平台应用的前端框架,一套代码可编译到IOS、Andriod、H5、小程序等平台,IED使用Hbuilder,类比Flutter在安卓 Ios表现优秀,学习成本高,注重小程序体验改善,Uni继承自vue.js,vue语法+小程序api,滑动更优秀
文档地址:https://uniapp.dcloud.io/
2.功能介绍
1.封装request请求,处理拦截和相关回调
2.通过组件加载数据列表
3.视频页使用scroll-view组件,引用iconfont 在线unicode字体图标,引用dcloud插件市场 下拉刷新组件mescroll, 组件文档地址https://www.mescroll.com/uni.html
4.标题栏uniNavBar组件应用,跨端布局条件编译代码
5.底部导航红点和账户统计,通过store存储消息条数(可优化为调用接口),和TabBarBadge相关api实现
6.帐号页用uni-list组件完成列表布局,border-top:1px solid #e6e6e6;transform:scaleY(0.5);解决0.5不同平台识别,扫码功能使用H5+ 封装对应接口成组件
7.在视频模块做搜索组件,搜索组件内通过setStorageSync、getStorageSync设置本地缓存保存、清除历史搜索记录
移动端,兼容和体验上的一些问题,一个页面展示的差异,h5运行在浏览器,顶部导航栏不支持编辑,安卓和最新小程序支持编辑头部,Ios滚动条回弹,原生滚动条在小程序卡顿
回滚路由的差异,小程序使用navigation特定api回滚,h5用写条件编译逻辑,借用中间页面,通过history.go()进行页面回滚
评论区