起风网目录分析
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 }) } }) }
评论前必须登录！
立即登录