- 基于Taro与typescript开发的网易云音乐小程序
基于[代码]Taro[代码]与网易云音乐api开发,技术栈主要是:[代码]typescript+taro+taro-ui+react-hooks+redux[代码],目前主要是着重小程序端的展示,主要也是借此项目强化下上述几个技术栈的使用,通过这个项目也可以帮助你快速使用[代码]Taro[代码]开发一个属于你自己的小程序~ [图片] [图片] [图片] github地址:taro-music,感兴趣的话可以[代码]star[代码]关注下,功能会进行持续完善 快速开始 首先需要在src目录下创建一个config.ts,可以根据自己的需要将其替换成线上地址,接口服务是使用的NeteaseCloudMusicApi [代码]export const baseUrl: string = 'http://localhost:3000' // 这里的配置的这个url是后端服务的请求地址 [代码] 在运行本项目前,请先确保已经全局安装了Taro,安装可见官网指导 [代码]启动后端接口服务 git clone https://github.com/Binaryify/NeteaseCloudMusicApi.git cd NeteaseCloudMusicApi npm i npm run start 接下来启动前端项目 git clone https://github.com/lsqy/taro-music.git cd taro-music npm i npm run dev:weapp [代码] 功能列表 用户登陆 退出登陆 我的关注列表 我的粉丝列表 我的动态列表 最近播放列表 我的电台 我的收藏 推荐歌单 推荐电台 推荐电台 我创建的歌单列表 我收藏的歌单列表 共用的歌单详情列表 歌曲播放页面 歌词滚动 歌曲切换播放模式(随机播放/单曲循环/顺序播放) 切换上一首/下一首 喜欢/取消喜欢某首歌曲 评论列表 统一的播放组件,方便进行切换页面后可以随时进入到播放页面 目录结构简要介绍 这里主要介绍下[代码]src[代码]目录,因为开发主要是在这个目录下进行的 [代码]- src - actions // `redux`中的相关异步操作在这里进行 - assets // 静态资源目录,这里引入了所需的图片资源,以及`fontawesome`字体图标资源 - components // 封装的项目中可复用的组件,目前只是抽象了`CLoading`(加载效果组件)、`CLyric`(歌词组件)、`CMusic`(正在播放组件)、`CSlide`(滑块组件)、`CTitle`、`CUserListItem` - constants // 项目中的常量定义,目前定义了`typescript`的公共定义、`reducers`的名称定义、状态码的定义 - pages // 项目中的业务页面都在这个目录中 - reducers // `redux`中的相关同步操作在这里进行 - services // 可复用的服务可以放在这个目录中,目前只是封装了接口请求的公共服务,可以根据自己项目的需要进行其他服务的扩充 - store // redux的初始文件 - utils // 可以复用的工具方法可以放到这个目录当中,目前封装了格式化、歌词解析的相关方法 - decorators // 抽象的装饰器,主要为了解决在切换页面之后仍然可以继续保持播放状态,因为目前`taro`不支持全局组件 - app.scss // 全局样式 - app.tsx // 全局入口文件 - base.scss // 基础样式 - config.ts // 项目的全局配置,目前只是配置了`baseUrl`是后端服务的基准请求地址 [代码] todo 复用的评论列表 搜索功能 [代码]react-hooks[代码]重构部分功能 最近更新 加入搜索功能(有待进一步完善) 加入了视频播放(有待进一步完善) [图片] 效果图预览 下面简要列出几张效果图 [图片] [图片] [图片] 有待完善部分 还有一些功能点以及细节都还有待进一步完善,目前先把大致主要的功能进行了下实现,当然如果发现什么问题,欢迎能够提交[代码]issues[代码],发现之后我会及时进行更正,欢迎 [代码]star[代码] 和 [代码]fork[代码],感谢大家支持🙏。 文章首发自个人博客基于Taro与typescript开发的网易云音乐小程序
2020-03-24 - 真机下hideLoading会关掉toast提示框
问题描述: wx.hideLoading()的功能时隐藏 loading 提示框,但是在真机环境下(小米,华为,iPhone)把wx.showToast(...)的提示框也关掉了。 而在开发工具里面是不会关掉toast提示框的。 以下是测试例子: 先延时10秒等加载完成,然后开始测试 显示toast提示框15秒,然后3秒后调用wx.hideLoading(); 开发工具里面toast提示框会显示15秒,正常 但真机里面显示3秒就被关掉了。 在页面onload()方法里面贴入以下代码就能测试出问题了 setTimeout(function(){ wx.showToast({ title: 'bbbbbb', duration: 15000 }) setTimeout(function(){ wx.hideLoading(); },3000); },10000);
2019-07-26 - 小程序真机上传视频时视频缩略图字段没有?
在开发工具中上传视频后有视频缩略图,[图片] 但是在真机调试的时候没有视频缩略图了 [图片] ,这目前是个bug吗,有什么方法可以在真机上,上传视频获取到视频第一帧的缩略图吗
2018-09-19 - Painter 一款轻量级的小程序海报生成组件
生成海报相信大家有的人都做过,但是canvas绘图的坑太多。大家可以试试这个组件。然后附上楼下大哥做的可视化拖拽生成painter代码的工具:链接地址https://developers.weixin.qq.com/community/develop/article/doc/000e222d9bcc305c5739c718d56813
2019-09-27 - 当页面存在多个video标签时,ios设备在视频缓冲时大概率会自动播放。
- 当前 Bug 的表现(可附上截图) 当页面存在多个video标签时,ios设备在视频缓冲时大概率会自动播放。(autoplay默认为flase,不应该自动播放) - 预期表现 未设置autoplay时不应该自动播放 - 复现路径 开发工具 -> 预览 -> ios扫码即显 - 提供一个最简复现 Demo https://developers.weixin.qq.com/s/YJyW8Mmm7C5d
2019-01-29 - 小程序 video 苹果手机视频自动播放bug( autoplay 没写 ),
- 当前 Bug 的表现(可附上截图) - 预期表现 - 复现路径 - 提供一个最简复现 Demo 小程序 video 苹果手机视频自动播放bug( autoplay 没写 ),安卓手机不会自动播放 一进入小程序, 苹果手机 很多时候video 就自动播放了 <video src='{{item.externalUrl}}' poster='{{ossUrl+item.imgUrl}}' wx:if="{{item.linkType == 4 && item.linkType}}" style='width:100%;height:100%' object-fit="cover"></video>
2019-05-05