Micro letter applet naming rules

Contents Analysis

src is the main development directory, each file implements the following functions:

├─.idea 
│ └─libraries 
├─.temp 
├─config 
└─src 
    ├─assets 
    │ └─images 
    ├─components (common components) 
    │ ├─Brandbar 
    │ ├─Selectbar 
    │ ├─Specialbar 
    │ └─Toptab 
    └─ pages and the 
    | ├─cinema (theater list) 
    | ├─cinemaDetail (theater details page) 
    | ├─content (movie times) 
    | ├─detail (movie details page) 
    | ├─map (theater map locating pages) 
    | ├─movies ( movie list) 
    | ├─order (movie ticket order page) 
    | ├─person (user login page) 
    | ├─position (geographic selection page) 
    | ├─search (movies / theater search page) 
    | ├─seat (theater seat pages) 
    | └─user (user Center) 
    | __app.js (entrance profile) 
    | __app.scss
    |__index.html

Entrance profile app.jsanalysis

MoviesHome page is a list of micro-letter applet, the following code config configuration is that all the pages define the route using a small program. The following highlights some of the more important key points of the micro-letter applet page.

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",
    window: {
    a top disposed @ applet
    ],
      "Pages / Order / Order"
      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"));

MoviesMovie List

getCities()Routing is to obtain the current location of the city, because the cat's eye movie capture applet does not crawl to get the address of the interface of the current position, so to get the data for all cities in the cat's eye movie H5 end. Before using the easyMocksimulated data interface, it can not be used now. But now cloud development in micro letter applet, data can simulate up. TopTab which is being aggressively two classification and upcoming general assembly.

// 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 classification page

Which are upcoming and aggressively, made the main focus of a tab assembly code is:

<ClassName = View "tabItemContent" hidden = {0 === this.state.currentNavtab to false:? To true}> 
 <-! Case being aggressively -> 
 </ View> 
 <View className = "tabItemContent" hidden = { ? this.state.currentNavtab 1 === false: to true}> 
 ! <- upcoming case -> 
 </ View>

Which currentNavTabcontrols the upcoming and are aggressively sectionexplicit and implicit, hiddenis the recommended way taro official case provides implementation tab label components. Other methods may also be used. This page lists the main achievement of movie film evaluation and recommendation index, and prices. Micro letter applet substantially all interfaces rely on cityId, that is, moviesgetting the location address page. Here getMoviesOnListis to obtain real cat's eye movie online interface, you need to request forgeryheader

 

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