最近基於原生小程序精仿貓眼電影，數據API都是在網上抓取的（如何抓包）
由於沒有獲得貓眼城市ID的API，所有數據接口沒有添加城市ID參數，僅靠IP定位，所以數據可能不準確
2019.12.14更新
今天看自己做的小程序時，發現很多頁面都顯示不了，原因是貓眼電影部分的API限制了，不能訪問了，後期如果有時間準備自己搭建一個服務器來代理請求
2018.12.26更新
有人提供了一個城市列表接口可以獲取城市ID：https://maoyan.com/ajax/cities
另外此小程序沒有選座功能。選座功能需要頁面的縮放、座位的生成、座位的選擇、座位的推薦等等，稍微複雜，所以就沒有實現。網上有很多例子可以參考(用Vue實現一個美團app的影院推薦選座功能)
github地址：基於原生小程序精仿的貓眼電影
掃描體驗：
項目截圖
 |
 |
 |
 |
 |
 |
 |
 |
注：點擊圖片可放大;gif圖可能有些失幀
實現的功能
- 頁面滾動到底部加載更多
- 電影詳情頁面、影院詳情頁面
- 電影購票功能、小喫購買功能
- 顯示歷史訂單，可刪除、可添加
- 電影顯示所有評論功能
- 影院地圖
- 電影預告播放頁面
- 城市選擇頁面
- 客服功能
- 頁面分享功能
- 用戶拒絕地理位置授權情況處理
…
項目目錄結構
總共18個page、3個component、6個template
├── assets
│ ├── font # 項目的icon文件
│ ├── images # 圖片資源
│ └── libs # 三方支持庫
├── components
│ ├── filter-nav # 篩選條件組件
│ ├── select-movie # 選擇電影組件
│ └── select-time # 選擇時間組件
├── pages
│ ├── subPages # 非tab頁面
│ │ ├── about-page # “關於”頁面
│ │ ├── buy-snack # “購票確認訂單”頁面
│ │ ├── buy-ticket # “小喫確認訂單”頁面
│ │ ├── cinema-detail # “影院詳情”頁面
│ │ ├── cinema-map # “影院地圖”頁面
│ │ ├── city-select # “選擇城市”頁面
│ │ ├── comment-page # “評論”頁面
│ │ ├── movie-detail # “電影詳情”頁面
│ │ ├── movie-order # “電影訂單”頁面
│ │ ├── movie-order-detail # “電影訂單詳情”頁面
│ │ ├── search-page # “搜索”頁面
│ │ ├── select-cinema # “選擇影院”頁面
│ │ ├── snack-order # “小喫訂單”頁面
│ │ ├── snack-page # “小喫詳情”頁面
│ │ └── video-page # “電影預告”頁面
│ └── tabBar # tab頁面
│ ├── cinema # “影院”頁面
│ ├── movie # “電影”頁面
│ └── user # “我的”頁面
├── templates
│ ├── cinemaMap # 影院地圖section樣式模板
│ ├── cinemaSection # 影院section樣式模板
│ ├── commentSection # 評論section樣式模板
│ ├── loadingMore # 加載更多功能樣式模板
│ ├── movieSection # 電影section樣式模板
│ └── nothing # 查詢空值樣式模板
├── utils
│ └── util.js # 工具函數
├── app.js # 小程序邏輯
├── app.json # 小程序公共配置
├── app.wsxx # 小程序公共樣式表
└── project.config.json # 項目配置文件
問題
- 數據全部是線上抓取的，由於沒有獲得貓眼城市ID的API，所有數據接口沒有添加城市ID參數，僅靠IP定位，所以數據可能不準確。貓眼電影的票價經過加密了，返回的數據爲其實這就是電影的票價，不過貓眼通過動態生成@font-face來將數據還原成正常的數字。小程序有wx.loadFontFace來動態添加字體，但是需要字體鏈接，而貓眼電影只給了字體文件名，缺少具體的鏈接
- 城市選擇頁面需的一些事件進行了事件優化（函數節流、函數防抖）
- 滾動穿透問題。參照了這裏，並自己編寫了watch功能，監聽遮罩的狀態
- 對於tabBar的頁面onLoad生命週期只會觸發一次，切換tab或從非tab進入都不會觸發onLoad。只有第一次進入tab頁面時纔會觸發。對於非tabBar頁面來說，每次進入頁面都會觸發onLoad生命週期，每次都可以在此拿到路由參數。
- 關於template和component的使用。複用樣式用template，複用功能用component，外部樣式不能作用到組件中，需要externalClasses設置（我設置了也不管用，就在組件中又寫了一遍樣式）
做的過程中遇到了很多問題，並沒有一一記錄。總之只用自己寫一遍才能更好的發現、理解和解決問題
運行本項目
- 克隆項目到本地後用微信開發者工具打開
- 關閉安全域名的校驗（設置 --> 項目設置 --> 不校驗合法域名）
其他個人項目
覺得不錯的給個star鼓勵支持！^_^