taro-mbox是一个用taro实现的音乐类微信小程序项目(仿QQ音乐)
可能有朋友还没听说过taro, 不知道taro是什么。
下面是引用taro官方介绍:
多端统一开发框架,支持用 React 的开发方式编写一次代码,生成能运行在微信/百度/支付宝/字节跳动小程序、H5、React Native 等的应用。
公司项目主要是用的 vue, react用的较少 不过写起taro来感觉真的是很棒,因为taro的文档写的很详细,项目开始前花一两天仔细看看 官方文档 就好。
下面是项目效果图
推荐页 | 排行榜 | 搜索页 |
---|---|---|
列表页.gif
下面是项目部分代码
页面(首页)代码是这样子滴
1 | // 引入 Taro 和 Component |
组件(顶部导航)代码
1 | import Taro, { Component } from '@tarojs/taro' |
解决的坑
taro原本是不支持在小程序中注入全局的SCSS代码的,如果是H5的话是可以配置的。后来我在项目中找到了一种可行的方案,使得小程序也能支持这个功能。提交了PR,从taro v1.2.25开始支持。
只需要在plugins.sass添加下面连个属性即可1
2
3
4
5
6plugins: {
sass: {
resource: path.resolve(__dirname, '..', 'src/styles/variable.scss'),
projectDirectory: path.resolve(__dirname, '..')
}
}
有兴趣的可以看 文档 如何设置。
感兴趣的朋友可以点击 taro-mbox 去github看看源码吧
如果觉得这个项目对你有帮助请点个 star 呗!
| 微信小程序 | H5 |
| :——: | :——: |
| clone代码到开发者工具运行 | |