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 以後的值
 })
複製代碼