使用vue3+ typeScript 开发小程序
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用vue3+ typeScript 开发小程序相关的知识,希望对你有一定的参考价值。
参考技术A 要求是使用 vue3 + typescript 进行开发小程序和H5的跨端应用在 uniapp 和 taro 这两个之中进行选择 在参了官方和社区示例后最终选择了 taro 。原因在于 uniapp 目前对于 vue3 的支持尚不完全比如说暂不支持 setup 语法糖对于h5的支持比较差 没有支持 vue3 的 ui 框架等等。
node.js
注意tarojs的版本 建议使用 taro 3.0.24 以上的版本
由于引用 node_modules 的模块,默认不会编译,所以需要额外给 H5 配置 esnextModules ,在 taro 项目的 config/index.js 中新增如下配置项:
如果出现类似 Could not find module View in @tarojs/components 的问题,请在进行如下设置:
详情请参考 https://github.com/dexterBo/mall
基于Taro与Typescript开发的网易云音乐小程序
基于
Taro
与网易云音乐api开发,技术栈主要是:typescript+taro+taro-ui+redux
,目前主要是着重小程序端的展示,主要也是借此项目强化下上述几个技术栈的使用,通过这个项目也可以帮助你快速使用Taro
开发一个属于你自己的小程序~
源码地址: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
功能列表
- [x] 用户登陆
- [x] 退出登陆
- [x] 我的关注列表
- [x] 我的粉丝列表
- [ ] 我的动态列表
- [x] 最近播放列表
- [ ] 我的电台
- [ ] 我的收藏
- [x] 推荐歌单
- [x] 推荐电台
- [x] 推荐电台
- [x] 我创建的歌单列表
- [x] 我收藏的歌单列表
- [x] 共用的歌单详情列表
- [x] 歌曲播放页面
- [x] 歌词滚动
- [x] 歌曲切换播放模式(随机播放/单曲循环/顺序播放)
- [x] 切换上一首/下一首
- [x] 喜欢/取消喜欢某首歌曲
- [ ] 评论列表
- [x] 统一的播放组件,方便进行切换页面后可以随时进入到播放页面
目录结构简要介绍
这里主要介绍下
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开发的网易云音乐小程序
以上是关于使用vue3+ typeScript 开发小程序的主要内容,如果未能解决你的问题,请参考以下文章
【笔记】使用Vite搭建Vue3(TypeScript版本)项目