微信小程序命名規則

目錄分析

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
        })
      }
    })
  }