微信小程序命名规则

目录分析

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

        })

      }

    })

  }

巴特西

微信小程序命名规则

目录分析

`Movies`电影列表页

Toptab分类页

最新文章

热门文章

巴特西

微信小程序命名规则

目录分析

Movies电影列表页

Toptab分类页

最新文章

热门文章

`Movies`电影列表页