在京東凹凸實驗室開發Taro跨平臺早期之前，就已經進行Taro嘗鮮了。開發這個實例 貓眼電影 已經過去幾個月了。案例部分使用的是貓眼電影真實線上接口，關于訂座的座位數據是自己模擬實現的，案例只供參考學習。
開發環境
操作系統：Window 10
Taro版本：v0.0.69
Node版本：v8.11.1
github地址: https://github.com/Harhao/miniProgram
運行效果
目錄分析
src 是主要的開發目錄，各個文件實現功能如下所示:
├─.idea│ └─libraries├─.temp├─config└─src ├─assets │ └─images ├─components (公用組件) │ ├─Brandbar │ ├─Selectbar │ ├─Specialbar │ └─Toptab(電影詳情分類) └─pages | ├─cinema(影院列表) | ├─cinemaDetail(影院詳情頁) | ├─content(電影介紹) | ├─detail(電影詳情頁) | ├─map(影院地圖定位頁) | ├─movies(電影列表頁) | ├─order(電影票訂單頁) | ├─person(用戶登錄頁) | ├─position(地理位置選擇頁) | ├─search(電影/影院搜索頁) | ├─seat(影院座位頁) | └─user(用戶中心) |__app.js(入口配置文件) |__app.scss |__index.html
入口配置文件 app.js 分析
Movies 列表頁是微信小程序的首頁，下面代碼中config配置的是小程序中所有使用的頁面定義路由。下面重點介紹幾個比較重要的關鍵點微信小程序頁。
import Taro, { Component } from "@tarojs/taro";import Movies from "./pages/movies/movies";import "./app.scss";class App extends Component { config = { //訪問路由文件定義 pages: [ "pages/movies/movies", "pages/person/person", "pages/cinema/cinema", "pages/position/position", "pages/search/search", "pages/detail/detail", "pages/content/content", "pages/cinemaDetail/cinemaDetail", "pages/map/map", "pages/seat/seat", "pages/user/user", "pages/order/order" ], //小程序頂部設置 window: { backgroundTextStyle: "light", navigationBarBackgroundColor: "#e54847", navigationBarTitleText: "貓眼電影", navigationBarTextStyle: "white", enablePullDownRefresh: true }, //底部tab導航欄配置 tabBar: { color: "#333", selectedColor: "#f03d37", backgroundColor: "#fff", borderStyle: "black", list: [ { pagePath: "pages/movies/movies", text: "電影", iconPath: "./assets/images/index.png", selectedIconPath: "./assets/images/index_focus.png" }, { pagePath: "pages/cinema/cinema", text: "影院", iconPath: "./assets/images/themeOld.png", selectedIconPath: "./assets/images/theme.png" }, { pagePath: "pages/person/person", text: "我的", iconPath: "./assets/images/person.png", selectedIconPath: "./assets/images/personSelect.png" } ] } }; render() { // Movies小程序入口文件 return <Movies />; }}Taro.render(<App />, document.getElementById("app"));Movies 電影列表頁
getCities() 是獲取當前定位的城市的路由，因為在貓眼電影小程序抓包中沒有抓取到獲取當前定位的地址接口，所以在貓眼電影H5端獲取到了所有城市的數據。之前用了 easyMock 模擬數據接口，現在不能使用了。不過現在在微信小程序的云開發，可以把數據模擬上去。其中TopTab是正在熱映和即將上映的兩個分類總的組件。
// movies頁export default class Movies extends Component { config = { navigationBarTitleText: "貓眼電影" }; constructor(props) { super(props); } componentDidMount() { this.getCities(); } getCities() { Taro.request({ url: "https://www.easy-mock.com/mock/5ba0a7f92e49497b37162e32/example_copy/cities_copy_1541385673090", method: "GET", header: { Accept: "application/json, */*", "Content-Type": "application/json" } }).then(res => { if (res.statusCode == 200) { let data = res.data.data.data.data; Taro.setStorageSync("cities", data); } }); } render() { return ( <View className="movies"> <Toptab /> </View> ); }}Toptab分類頁
其中即將上映和正在熱映，做了一個tab組件主要重點的代碼是：
<View className="tabItemContent" hidden={this.state.currentNavtab === 0?false:true}> <!-- 正在熱映情況--> </View> <View className="tabItemContent" hidden={this.state.currentNavtab === 1?false:true}> <!--即將上映情況--> </View> 其中 currentNavTab 控制即將上映和正在熱映的 section 顯隱, hidden 是taro官方案例提供的推薦實現tab標簽組件的方式。使用其他方法亦可。該頁主要實現電影列表的影評價和推薦指數，價格等。微信小程序中基本所有接口都依賴于 cityId ,也就是在 movies 頁獲取定位地址。下面 getMoviesOnList 是獲取真實線上貓眼電影的接口，需要偽造請求 header
getMoviesOnList(){ let cityId = this.state.id Taro.showLoading({ title:"加載中" }); Taro.request({ url:"https://m.maoyan.com/ajax/movieOnInfoList?token=", method:"GET", header:{ "Cookie":`_lxsdk_cuid=164b6cae2cac8-02b7b032f571b5-39614706-1fa400-164b6cae2cbc8; v=3; iuuid=1A6E888B4A4B29B16FBA1299108DBE9CA19FF6972813B39CA13A8D9705187374; revrev=76338a29; _lx_utm=utm_source%3DBaidu%26utm_medium%3Dorganic; webp=true; __mta=3463951.1532075108184.1533098338076.1533118040602.20; _lxsdk=1A6E888B4A4B29B16FBA1299108DBE9CA19FF6972813B39CA13A8D9705187374; from=canary; selectci=true; __mta=3463951.1532075108184.1533118040602.1533118773295.21; _lxsdk_s=164f4f4c9e9-45e-d1b-46%7C%7C50; ci=${cityId}` } }).then(res=>{ if(res.statusCode == 200){ Taro.hideLoading(); res.data.movieList.forEach((value)=>{ let arr = value["img"].split("w.h"); value["img"] = arr[0]+"128.180"+ arr[1] }); this.setState({ onList:res.data.movieList, startIndex:res.data.movieList.length, lastIndex:res.data.total -1, movieIds:res.data.movieIds }); }else{ this.setState({ onList:null, movieIds:null }) } }) }seat (影院座位頁)
自己模擬實現了一個推薦座位與選座功能。為了實現座位信息選擇,使用了二維數組對座位信息已選和未選，其中0代表該處擁有座位、E代表該處為空。其中數組的行代表了影院的第幾排，嵌套的數組的索引代表了第幾列。
[ [0,0,0,0,0,0], [E,0,0,E,0,0]， [0,0,0,0,0,0], [E,0,0,E,0,0]]
初始化座位信息, https://m.maoyan.com/ajax/seatingPlan?timestamp=${Date.now()} 獲取貓眼電影線上座位信息接口， cityId 是當前定位城市ID， ci 是影院ID。 initParams 是獲取線上座位信息接口， seatData 是獲取到的影院座位信息，需要對座位信息做進一步的加工。遍歷座位信息，如果字段 st 為N,則arr設置為0(代表具有座位并未選)，為E則為該處不具有座位。
initParams(){ const params = this.$router.params; const self = this; Taro.setNavigationBarTitle({ title:params.cinemaName }) Taro.showLoading({ title:"加載中..." }); Taro.request({ url:`https://m.maoyan.com/ajax/seatingPlan?timestamp=${Date.now()}`, method:'post', header:{ 'Cookie': 'uuid_n_v=v1; iuuid=26F6BA50506A11E9A973FDD3C7EBDF0E29C7297EC72D4F77A53F9445EF0EE9F3; webp=true; ci=20%2C%E5%B9%BF%E5%B7%9E; _lxsdk_cuid=169be42cf28c8-098c7e821e63bd-2d604637-3d10d-169be42cf29c8; _lxsdk=26F6BA50506A11E9A973FDD3C7EBDF0E29C7297EC72D4F77A53F9445EF0EE9F3; from=canary; uid=124265875; token=9P1-5VoykD_qrpBxpTvSoVhMwzQAAAAAJwgAAE2za6eVZdI-oORrTHb8dP4JEMYCiza0zSSNoRkHx4qajm2Nu6ClhU00u5A1avIySg; __mta=250960825.1553675243337.1553675275840.1553675275842.6; user=124265875%2C9P1-5VoykD_qrpBxpTvSoVhMwzQAAAAAJwgAAE2za6eVZdI-oORrTHb8dP4JEMYCiza0zSSNoRkHx4qajm2Nu6ClhU00u5A1avIySg; _lxsdk_s=169be42cf2b-ca7-4ca-570%7C%7C14' }, data:{ cityId:params.cityId, ci:params.ci, seqNo:params.seqNo } }).then(res=>{ if(res.statusCode ==200){ Taro.hideLoading(); const seatData = res.data.seatData; const seatArray = []; seatData.seat.sections[0].seats.map(item=>{ let arr = []; item["columns"].map(seat=>{ if(seat["st"] == "N"){ arr.push('0'); }else{ arr.push('E') } }) seatArray.push(arr); }) self.setState({ seatData:seatData, seatArray:seatArray }); } }) } 做了影院座位信息是否為空篩選之后，接下來就是選座功能。其中影院座位的選擇與取消使用了 buySeat 進行保存。 selectSeat 函數是選擇座位， row :代表選擇第幾行， column 代表第幾列， item 是該座位是否被選的信息(0為未選表示可選擇、2為已選表示不可再選)
selectSeat(row,column,item){ const self = this; const arr = this.state.seatArray; // item代表該座位是否可選 if(item == 0){ if(self.state.buySeat.length ==4){ Taro.showToast({ title: '最多選擇4個座位', duration: 2000 }) return false; }else{ let buySeat = self.state.buySeat; arr[row][column]= '2'; buySeat.push({ "row":row, "column":column }); self.setState({ buySeat:buySeat, seatArray:arr }) } }else{ arr[row][column]= '0'; const buySeat = this.state.buySeat; let tmpArr = this.state.buySeat; buySeat.map((value,index)=>{ if(value["row"]== row && value["column"]== column){ tmpArr.splice(index,1); self.setState({ buySeat:tmpArr, seatArray:arr }) } }) } } 推薦座位功能實現, getRecomment 是推薦位實現，現在至于1人、2人、3人、4人推薦。情侶位實現沒有抓取到貓眼的推薦接口信息。
selectAll(seats){ const self = this; seats.map(item=>{ let row = parseInt(item.rowId.split('0')[0]); let column = parseInt(item.columnId.split('0')[0]); let itemIndex = self.state.seatArray[row][column]; self.selectSeat(row,column,itemIndex); }) } getRecomment(recomment,num){ switch(num){ case 1:this.selectAll(recomment.bestOne.seats);break; case 2:this.selectAll(recomment.bestTwo.seats);break; case 3:this.selectAll(recomment.bestThree.seats);break; case 4:this.selectAll(recomment.bestFour.seats);break; } }content電影詳情頁
電影詳情是一部電影簡略介紹。主要實現了，電影主要簡略描述和預告片的播放關閉，實現比較簡單。 getDetailData 是獲取電影詳情數據接口。其中獲取到img路徑直接獲取不到圖片數據，需要對路徑進行改寫，如下代碼所示：
getDetailData(){ Taro.showLoading({ title:"加載中" }); Taro.request({ url:`https://m.maoyan.com/ajax/detailmovie?movieId=${this.state.params.id}` }).then(res=>{ if(res.statusCode == 200){ Taro.hideLoading(); let data = res.data.detailMovie; let arr = data["img"].split("w.h"); data["img"] = arr[0]+"128.180"+ arr[1]; for(let index in data.photos){ let photo = data.photos[index]; let arr = photo.split('w.h'); data.photos[index] = arr[0]+'180.140'+arr[1]; } this.setState({ detailMovie:data }); } }).catch(err=>{ console.log(err.message); }) }在今天這個充滿戀愛酸臭味日子，滿懷期待地水完這篇短文。如果覺得喜歡的話，可不可以給我new個對象。說錯了，應該是new個star~。
github地址: https://github.com/Harhao/miniProgram
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VEVB武林網。
新聞熱點
疑難解答
