Taro小程式仿網易雲音樂

Izaya發表於2019-02-25

前言

前段時間用mpvue開發過一個仿網易雲音樂的微信小程式(連結)，但似乎mpvue好像是不再維護了，偶然得知有個Taro也可以開發小程式，但是用的是React，正好也想了解了解React,所以體驗了一下Taro。git地址

預覽

· 18/12/28 歌單詳情頁面

Taro小程式仿網易雲音樂

· 18/12/30 播放頁面1.0(還沒加入歌詞)
Taro小程式仿網易雲音樂

· 19/01/02 播放頁面2.0
Taro小程式仿網易雲音樂

· 19/01/03 個人頁面
Taro小程式仿網易雲音樂

· 19/01/03 每日推薦
Taro小程式仿網易雲音樂

· 19/01/04 熱門歌單、精品歌單
Taro小程式仿網易雲音樂

Taro小程式仿網易雲音樂
我的頁面
Taro小程式仿網易雲音樂
搜尋
Taro小程式仿網易雲音樂
Taro小程式仿網易雲音樂
個人歌單
Taro小程式仿網易雲音樂

Taro簡介

Taro 是一套遵循 React 語法規範的 多端開發 解決方案。使用 Taro，我們可以只書寫一套程式碼，再通過 Taro 的編譯工具，將原始碼分別編譯出可以在不同端（微信小程式、H5、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，

Taro小程式仿網易雲音樂
選擇新增到你自己的專案
Taro小程式仿網易雲音樂
Taro小程式仿網易雲音樂
複製上面的程式碼在瀏覽器裡開啟(前面記得加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 之後的值
 })
複製程式碼

相關文章