在京東凹凸實驗室開發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"));