基于原生小程序精仿的猫眼电影(可预览)
最近基于原生小程序精仿猫眼电影,数据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设置(我设置了也不管用,就在组件中又写了一遍样式)
做的过程中遇到了很多问题,并没有一一记录。总之只用自己写一遍才能更好的发现、理解和解决问题
运行本项目
- 克隆项目到本地后用微信开发者工具打开
- 关闭安全域名的校验(设置 --> 项目设置 --> 不校验合法域名)
其他个人项目
- 基于vue+vue-router+jsonp+vuex仿制的移动端
QQ音乐
- 基于React-Antd的
后台模板Demo
- 基于原生小程序精仿的
猫眼电影小程序
觉得不错的给个star鼓励支持!^_^
基于原生小程序精仿的猫眼电影(可预览)相关推荐
- 微信小程序实现图片是上传、预览功能
本文实例讲述了微信小程序实现图片上传.删除和预览功能的方法,分享给大家供大家参考,具体如下: 这里主要介绍一下微信小程序的图片上传图片删除和图片预览 1.可以调用相机也可以从本地相册选择 2.本地实现 ...
- 关于微信小程序开发环境苹果IOS真机预览报SSL协议错误问题解决方案
关于微信小程序开发环境苹果IOS真机预览报SSL协议错误问题解决方案 参考文章: (1)关于微信小程序开发环境苹果IOS真机预览报SSL协议错误问题解决方案 (2)https://www.cnblog ...
- 微信小程序saveFile,openDocument方法下载、预览pdf文件不能用本地应用打开(不能另存为)的问题
微信小程序saveFile,openDocument方法下载.预览pdf文件不能用本地应用打开(不能另存为)的问题 查看官方文档的openDocument()方法,发现加一个showMenu: tru ...
- 原生小程序之仿美团外卖
根据美团外卖仿写微信小程序 根据美团外卖仿写小程序,请求运用封装的微信小程序的原生方法wx.request,后台数据自己在本地搭建的mock模拟数据,封装store代替状态管理工具,即app.js中的 ...
- 微信小程序打开PDF、word等文件预览
近期在使用uniapp开发微信小程序时,碰到了要在小程序上打开PDF文件预览的需求,使用原生微信小程序开发的实现和这个也是类似的.实现大致代码如下: // 下载文件到本地,下载成功后会返回临时文件路径 ...
- WEB端和微信小程序端的文档文件在线预览方法
文件的在线预览方式汇总 文件在线预览功能可以提高用户体验,值得加入. 一般常见的文件有office套装.pdf.txt.md.和音视频. 音视频的预览是单独一块,今天主要说说文档文件的在线预览功能. ...
- 微信小程序轮播图放大全屏预览(爆料)
轮播图放大预览效果的实现 前言 一.wx.previewImage接口API 官方介绍: 代码示例: 二.图片全屏预览 1.效果展示 2.编码 img.wxml img.js img.wxss 三.轮 ...
- 微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
微信小程序开发交流qq群 581478349 承接微信小程序开发.扫码加微信. 正文: 先上效果图,再附上完整源码: 1.多张图片循环渲染后预览.保存.识别带参数二维码 <view w ...
- 【微信小程序】引用echarts 在真机上预览图表模糊的解决办法
1.获取移动设备的像素比 获取系统信息 ==> wx.getSystemInfo() API说明:wx.getSystemInfo() const getPixelRatio = () => ...
最新文章
- 【持续加精】几种强哥墙裂推荐的缓冲效果,各有千秋、各取所需
- malloc,calloc,realloc,free函数
- 关于Session_End()运行机制的一些细节!
- 【剑指offer】21、调整数组顺序使奇数在偶数前面
- ACL 2019开源论文 | 基于Attention的知识图谱关系预测
- sqlserver 2008 R2 删除重复数据
- eclipse物联网_Eclipse如何推动物联网发展
- HTML轮播图全宽,jq全兼容自适应宽度图片轮播(新手适用)
- 基于VisualStudio11开发Windows8的Metro sample讲解(1)MessageBox
- .Net之路(四)利用DataTable、DataSet返回SQL Server的表或者单个字段
- 启示录2:打造优秀的产品团队
- 批量压缩pdf文件大小,pdf批量压缩步骤
- 公考二十四节气考点汇总
- Docker数据卷挂载相关
- 推荐几款渗透测试常用的脚本(记得收藏)
- (天池)超级码力在线编程大赛初赛 第2场
- 获取三个数的中间值 宏
- 300万+企业财税服务平台微企宝,将于8月8日全球首发QB生态通证
- ROS入门:运行小海龟
- BSF深度搜索时到底是如何回溯的(小tip)
热门文章
- centos 更新时间
- 我们怎样才能过好这一生?
- php怎么使用sendcloud,PHP开发之SendCloud发送邮件知几何
- cadence安装完怎么打开_为何cadence软件在虚拟机里安装成功了以后打不开
- 《商君列传第八》–读书总结
- 亿级流量电商JVM调优(转图灵学院)
- AAAI2021论文: 时空Kriging的归纳式图神经网络
- python中abs和fabs的区别_abs()与fabs()的速度差异和fabs()的优势
- 计算机的硬件和价格,简述台式电脑的各硬件价格占比
- 什么是 make 和 makefile