Taro小程序仿网易云音乐

前言

前段时间用mpvue开发过一个仿网易云音乐的微信小程序(连接)，但彷佛mpvue好像是再也不维护了，偶然得知有个Taro也能够开发小程序，可是用的是React，正好也想了解了解React,因此体验了一下Taro。git地址

预览

· 18/12/28 歌单详情页面

· 18/12/30 播放页面1.0(还没加入歌词)

· 19/01/02 播放页面2.0

· 19/01/03 我的页面

· 19/01/03 每日推荐

· 19/01/04 热门歌单、精品歌单

个人页面

搜索

我的歌单

Taro简介

Taro 是一套遵循 React 语法规范的 多端开发 解决方案。使用 Taro，咱们能够只书写一套代码，再经过 Taro 的编译工具，将源代码分别编译出能够在不一样端（微信小程序、H五、RN 等）运行的代码，组件可使用Taro的Taro-ui。(摘至官网)

Taro-ui

Taro-ui是一款基于 Taro 框架开发的多端 UI 组件库,里面的一些组件仍是挺好用的，也挺好看的，官网很详细并且还有效果图提供观看和体验。

React

React的话跟着官网走一遍基本就能开发了，看了react之后仍是以为本身喜欢vue多一点(😂)

项目流程

npm install -g @tarojs/cli
taro init myApp
npm run dev:weapp
复制代码

开发小程序注意事项

（摘自官网）若使用 微信小程序预览模式 ，则需下载并使用微信开发者工具添加项目进行预览，此时须要注意微信开发者工具的项目设置

• 须要设置关闭 ES6 转 ES5 功能，开启可能报错
• 须要设置关闭上传代码时样式自动补全，开启可能报错
• 须要设置关闭代码压缩上传，开启可能报错
  还有一些其余问题须要注意的，这里基本都指出了，我在实际开发中好像也没遇到过里面说起过的问题(😂)

开发相关

app.js对应的就是小程序的app.json一些基本配置能够在这里完成，好比tarBar

"tabBar": {
   "list": [
     {
       "text": "音乐",
       "pagePath": "pages/music/music",
       "iconPath": "./img/music.png",
       "selectedIconPath": "./img/music.png"
     },
     {
       "text": "电影",
       "pagePath": "pages/index/index",
       "iconPath": "./img/movie.png",
       "selectedIconPath": "./img/movie.png"
     }
   ]
 }
复制代码

路由和传值

//可以使用Taro的
Taro.navigateTo({url:'/pages/some?tag=tags'})
//或者
<Navigator url="/pages/some?tag=tags">更多</Navigator>
//获取时使用
this.$router.params.tag
复制代码

引用iconfont

先去iconfont官网选择你想要的icon，

选择添加到你本身的项目

复制上面的代码在浏览器里打开(前面记得加https:)， 而后在本身的项目中src目录下新建一个icon.scss名字随意css也行，复制在浏览器打开之后的内容粘贴进去，最后在app.tsc中import './icon.scss'
使用 <Text class="iconfont icon-play-circle"></Text>

父子组件

在其余地方写好子组件后，父组件内直接 import就行，传值的话直接在引用子组件时写入须要传递的数据便可

<Child dataname={somedata} />
//在子组件中使用
this.props.dataname便可获取传递过来的数据
复制代码

获取setState之后的值

在开发过程当中发现不能直接获取setState之后的值，由于 this.state 和 props 必定是异步更新的，因此不能在 setState 后立刻拿到 state 的值，正确作法是

this.setState({
   somedata: 1
 }, () => {
   // 在这个函数内你能够拿到 setState 以后的值
 })
复制代码