两天写一个电影资讯速览微信小程序（附源码）

简介

基于原生小程序精仿猫眼电影，数据API都是在网上抓取的，仅供学习和参考。

有人提供了一个城市列表接口可以获取城市ID：https://maoyan.com/ajax/cities

另外此小程序没有选座功能。选座功能需要页面的缩放、座位的生成、座位的选择、座位的推荐等等，没有实现。网上有很多例子可以参考

关注同名公众号【码农园区】，回复「电影」，获取项目源码

实现的功能

• 页面滚动到底部加载更多
• 电影详情页面、影院详情页面
• 电影购票功能、小吃购买功能
• 显示历史订单，可删除、可添加
• 电影显示所有评论功能
• 影院地图
• 电影预告播放页面
• 城市选择页面
• 客服功能
• 页面分享功能
• 用户拒绝地理位置授权情况处理

项目目录结构

总共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                      # 项目配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

首页效果图

数据请求

      url: 'https://m.maoyan.com/ajax/movieOnInfoList?token=',
      success(res) {
        const movieList0 = _this.formatImgUrl(res.data.movieList)
        wx.hideLoading()
        _this.setData({
          movieIds0: res.data.movieIds,
          movieList0
        })
        if (res.data.movieList.length >= res.data.movieIds.length) {
          _this.setData({
            loadComplete0: true
          })
        }
      }
    })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

完整wxml

  
    
      {{city}}
      
    
    
      正在热映
      即将上映