前言
前段時(shí)間用mpvue開發(fā)過一個(gè)仿網(wǎng)易云音樂的微信小程序(鏈接)，但似乎mpvue好像是不再維護(hù)了龙誊，偶然得知有個(gè)Taro也可以開發(fā)小程序，但是用的是React，正好也想了解了解React,所以體驗(yàn)了一下Taro哺壶。git地址
· 18/12/28 歌單詳情頁面
· 18/12/30 播放頁面1.0(還沒加入歌詞)
· 19/01/02 播放頁面2.0
· 19/01/03 個(gè)人頁面
· 19/01/03 每日推薦
· 19/01/04 熱門歌單、精品歌單
Taro簡(jiǎn)介
Taro 是一套遵循 React 語法規(guī)范的 多端開發(fā) 解決方案。使用 Taro山宾，我們可以只書寫一套代碼至扰，再通過 Taro 的編譯工具，將源代碼分別編譯出可以在不同端（微信小程序资锰、H5敢课、RN 等）運(yùn)行的代碼，組件可以使用Taro的Taro-ui绷杜。(摘至官網(wǎng))
Taro-ui
Taro-ui是一款基于 Taro 框架開發(fā)的多端 UI 組件庫,里面的一些組件還是挺好用的直秆，也挺好看的，官網(wǎng)很詳細(xì)而且還有效果圖提供觀看和體驗(yàn)鞭盟。
React
React的話跟著官網(wǎng)走一遍基本就能開發(fā)了圾结，看了react以后還是覺得自己喜歡vue多一點(diǎn)(??)
項(xiàng)目流程
npm install -g @tarojs/cli
taro init myApp
npm run dev:weapp
開發(fā)小程序注意事項(xiàng)
（摘自官網(wǎng)）若使用 微信小程序預(yù)覽模式 ，則需下載并使用微信開發(fā)者工具添加項(xiàng)目進(jìn)行預(yù)覽齿诉，此時(shí)需要注意微信開發(fā)者工具的項(xiàng)目設(shè)置
- 需要設(shè)置關(guān)閉 ES6 轉(zhuǎn) ES5 功能疫稿，開啟可能報(bào)錯(cuò)
- 需要設(shè)置關(guān)閉上傳代碼時(shí)樣式自動(dòng)補(bǔ)全，開啟可能報(bào)錯(cuò)
- 需要設(shè)置關(guān)閉代碼壓縮上傳鹃两，開啟可能報(bào)錯(cuò)
還有一些其他問題需要注意的遗座，這里基本都指出了，我在實(shí)際開發(fā)中好像也沒遇到過里面提及過的問題(??)
開發(fā)相關(guān)
app.js對(duì)應(yīng)的就是小程序的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>
//獲取時(shí)使用
this.$router.params.tag
引用iconfont
先去iconfont官網(wǎng)選擇你想要的icon途蒋，
選擇添加到你自己的項(xiàng)目
復(fù)制上面的代碼在瀏覽器里打開(前面記得加https:)，
然后在自己的項(xiàng)目中src目錄下新建一個(gè)icon.scss名字隨意css也行馋记，復(fù)制在瀏覽器打開以后的內(nèi)容粘貼進(jìn)去号坡，最后在app.tsc中import './icon.scss'
使用
<Text class="iconfont icon-play-circle"></Text>
父子組件
在其他地方寫好子組件后，父組件內(nèi)直接
import就行梯醒，傳值的話直接在引用子組件時(shí)寫入需要傳遞的數(shù)據(jù)即可
<Child dataname={somedata} />
//在子組件中使用
this.props.dataname即可獲取傳遞過來的數(shù)據(jù)
獲取setState以后的值
在開發(fā)過程中發(fā)現(xiàn)不能直接獲取setState以后的值宽堆，因?yàn)?this.state 和 props 一定是異步更新的，所以不能在 setState 后馬上拿到 state 的值茸习，正確做法是
this.setState({
somedata: 1
}, () => {
// 在這個(gè)函數(shù)內(nèi)你可以拿到 setState 之后的值
})
