豆瓣电影小程序服务器,微信小程序实战:仿豆瓣电影
设计一款豆瓣电影微信小程序,可以用它查看上映的电影以及电影详情等内容。
image.png
1.电影顶部页签切换效果
在电影界面有3页页签:上映、影院、我看。页签的切换回带动相应的内容进行切换显示;采用顶部页签切换的方式,来完成各个页面的显示。
(1)添加一个项目,进入到app.json文件中,添加"pages/movie/movie","pages/movieDetail/movieDetail"2个文件路径,删除默认创建的index、logs文件路径,将窗口导航栏背景色设置为黑色(#1A1A1A),导航标题为豆瓣电影,文字颜色设置为白色(white)。
{
"pages": [
"pages/movie/movie",
"pages/movieDetail/movieDetail"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#1A1A1A",
"navigationBarTitleText": "豆瓣电影",
"navigationBarTextStyle": "white"
}
}
(2)在movie.wxml文件中,使用view视图容器来布局顶部的3个标签。需要设置两种样式,一种是选中样式select,另外一种是正常样式normal。定义currentTab变量与页签索引值做比较,id为索引值,添加switchNav绑定事件。在movie.wxss添加相应样式。
点击页签切换时,页签内容滑动进行切换,需要使用swiper滑块视图组件,根据currentTab变量的索引值来判断显示swiper哪个面板的内容。movie.wxml代码如下:
上映
|
影院
|
我看
上映内容
影院内容
我看内容
(3)在movie.js文件中,定义currentTab变量默认值为0,添加swItchNav页签点击事件,点击时获取页签的id索引赋值给currentTab变量。
添加onLoad生命周期函数,使用wx.getSystemInfo获取窗口的高度和宽度,并且分别赋值给页签内容高度winHeight和页签内容宽度winWidth.
Page({
data: {
currentTab: 0
},
onLoad: function (e) {
var page = this;
wx.getSystemInfo({
success: function (res) {
console.log(res);
page.setData({ winWidth: res.windowWidth });
page.setData({ winHeight: res.windowHeight });
}
});
this.loadMovies();
},
switchNav: function (e) {
var id = e.currentTarget.id;
this.setData({ currentTab: id });
}
})
2.电影海报轮播效果
海报轮播效果是很多网站都会使用到的,可以在有限的区域内动态地展示商品图片信息等内容。本次也涉及到的轮播图效果。
(1)进行轮播图的页面布局,引入所需的图片。
(2)movie.js文件中定义海报轮播需要的变量值,indicatorDots: false,autoplay: true,interval: 5000,duration: 1000。这样就实现了海报的轮播效果图。具体实现可参考之前写的关于swiper组件的使用文章。
3.电影列表方式布局
电影列表布局采用每行3列的方式来展示电影海报和电影名称。
(1)在movie.js文件,定义loadMovies函数使用wx.request来获取豆瓣电影的电影列表消息,在onLoadMovies函数中进行调用。定义movies变量用于承载电影列表数据。
(2)获取到电影列表信息后,在movie.wxml中绑定loadDetail查看电影详情事件。
Page({
onLoad: function (e) {
var page = this;
wx.getSystemInfo({
success: function (res) {
console.log(res);
page.setData({ winWidth: res.windowWidth });
page.setData({ winHeight: res.windowHeight });
}
});
this.loadMovies();
},
loadMovies: function () {
var page = this;
var key = util.getDataKey();
wx.request({
url: 'https://api.douban.com/v2/movie/in_theaters?apikey=' + key,
method: 'GET',
header: {
"Content-Type": "json"
},
success: function (res) {
console.log(res);
var subjects = res.data.subjects;
var size = subjects.length;//电影总数量
var len = parseInt(size / 3);//每行放置3个电影,计算出需要多少行
console.log(len);
console.log(subjects);
page.setData({ movies: subjects });
page.setData({ winHeight: (len + 1) * 230 });//动态的设置电影内容的高度
}
})
},
loadDetail: function (e) {
var id = e.currentTarget.id;
console.log(e.currentTarget.id)
wx.navigateTo({
url: '../movieDetail/movieDetail?id=' + id
})
}
})
注意:由于微信小程序请求服务器发起的是HTTPS请求,需要在微信公众平台配置HTTPS服务器域名。否则会报错无法成功请求数据。假如没有在微信公众平台配置只是想做些练习啥的,可以按照这个方法配置下,就可以成功请求了。
image.png
4.电影详情页
在电影列表界面中,点击电影海报图片可以进入到电影详情页面查看具体的信息。电影详情页面在顶部也是采用页面切换的方式进行布局,布局方式与电影首页一样,在这不做过多描述。页签的下面是介绍电影相关的信息的区域往下就是电影其他详细信息。
(1)可以看到在movie.js中loadDetail函数跳转到详情页里将电影的id带过去,在movieDetail.js通过拿到的id获取电影详情的信息并展示在页面上。具体布局就不赘述了,以下是movieDetail.js的代码:
var util = require('../../utils/util.js')
Page({
data: {
currentTab: 0,
winWidth: 0,
winHeight: 0,
movie: {},
directors: [],
casts: []
},
onLoad: function (e) {
var page = this;
var key = util.getDataKey();
wx.request({
url: 'https://api.douban.com/v2/movie/subject/' + e.id + '?apikey=' + key,
header: {
"Content-Type": "json"
},
success: function (res) {
console.log(res);
var movie = res.data;
page.setData({ movie: movie });
page.setData({ directors: movie.directors });
page.setData({ casts: movie.casts });
wx.setNavigationBarTitle({
title: movie.title
})
}
});
wx.getSystemInfo({
success: function (res) {
console.log(res);
page.setData({ winWidth: res.windowWidth });
page.setData({ winHeight: res.windowHeight });
}
});
},
switchNav: function (e) {
var id = e.currentTarget.id;
this.setData({ currentTab: id });
}
})
小结:
demo主要介绍了微信小程序如何请求服务器数据及页面布局等内容。
下次可能会介绍微信小程序文件上传,下载等API的使用。
豆瓣电影小程序服务器,微信小程序实战:仿豆瓣电影相关推荐
- 树莓派小程序服务器,微信小程序实现树莓派(raspberrypi)小车控制.pdf
微微信信小小程程序序实实现现树树莓莓派派 ((raspberry pi))小小车车控控制制 本文是基于上一篇" 网页版树莓派小车控制程序"改造而成. 要也练习了一下微信小程序的开发 ...
- 如何删去微信小程序服务器,微信小程序怎么注销
最近不少人问到这个问题: 通过查阅微信官方相关文档发现,作为用户是可以在手机删除使用过的小程序.作为管理者和开发者目前是无法在后台删除已发布小程序的,也就是目前小程序不支持「注销」. 如果不是要彻底清 ...
- iis 微信小程序 服务器,微信小程序 windos server 2008 iis 7 tls1.0 升级 tls1.2(示例代码)...
执行下面注册表:重启服务器 1.代码如下 Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlS ...
- 微信开发上传视频到服务器,微信小程序中实现上传视频的开发代码
微信小程序中实现上传视频的开发代码,视频,接口,上传,代码,服务器 微信小程序中实现上传视频的开发代码 易采站长站,站长之家为您整理了微信小程序中实现上传视频的开发代码的相关内容. 本篇文章给大家带来 ...
- 低成本免服务器微信小程序源码多功能集合搭建
现如今在线副业已经成为一种趋势,越来越多的人选择副业作为起步.小程序凭借不占内存.无论前期投入还是后期维护,成本都较低:如果你想副业来赚钱,选择小程序是非常不错的选择,有很多人可能会问,我不会做小程序 ...
- android源码大全 IOS游戏源代码打包下载 小游戏|视频教程 微信小程序源码带后台全套|公众号平台
不断更新中,下面是2017-12-22更新部分 IOS_源码及视频一小部分: 开发环境:Xcode 基于cocos2d的tweejump跳跃游戏ios经典游戏源码.rar https://pan.b ...
- 《微信小程序》微信小程序开发实例
wx-gesture-lock 微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 sh ...
- 【小程序】微信小程序云开发笔记详细教程(建议收藏)
1- 前言 1.1 微信云开发是什么? 微信云开发是微信团队联合腾讯云推出的专业的小程序开发服务. 开发者可以使用云开发快速开发小程序.小游戏.公众号网页等,并且原生打通微信开放能力. 开发者无需搭建 ...
- 【微信小程序】关于H5跳转微信小程序、微信小程序跳转H5、微信小程序跳转微信小程序的实现方法
0 说明 业务提出需求,要实现H5跳转微信小程序的需求,在浏览器.微信环境下,都能通过H5跳转进入小程序. 另外,本文也将微信小程序跳转到H5,以及微信小程序跳转到微信小程序的方法进行汇总. 对于,微 ...
- 小程序:微信小程序完成分享好友及自定义分享朋友圈功能(完整版)
前言 以下代码使用了: vant-ui库: 主要完成了: 上拉框显示分享朋友圈按钮,点击分享朋友圈后,弹框展示图片,点击图片保存到本地: 上拉框显示分享好友按钮,分享当前页的小程序给好友: 微信小程序 ...
最新文章
- Java服务器热部署的实现原理
- .Net下的签名与混淆
- C编程,随机数,排序
- 在Google的GPU上永远免费训练您的机器学习模型
- 【知识小课堂】 之 聚合函数
- 相对熵与交叉熵_详解机器学习中的熵、条件熵、相对熵、交叉熵
- 第一次作业:深入源码分析进程模型
- (转)IDE 而言,是 Xcode 的技术比较先进还是 Visual Studio?
- 布局文件是如何被解析的?
- linux下raid0创建教程,Linux下构建raid0、raid1、raid5
- Rxjava--背压(Backpressure)
- Linux底层IIC 总线的理解、调用函数以及常见面试问题
- 使用FMDB进行数据库操作
- Mint UI—loadmore—Pull down下拉刷新将下拉刷新的箭头标志更换成其他图片(图文)
- 英语听说读写 复读机软件LangStream
- ctr多少正常_亚马逊点击率多少算正常?点击率怎么算?
- HTML:常见的标签 实体 图片标签
- MATLAB 串口通信的实现。。
- 权证基础知识学习(二)
- 太极计算机工程与应用,论“大恒”、“太极”、“太极图”
热门文章
- php混淆解密,关于php混淆加密解密详解
- [WIFI]破解工具-BT4+unetbootin+spoonwep/wpa
- 未来计算机技术的发展趋势有哪些,浅谈计算机技术的发展趋势
- 【计算机网络】零拷贝之MMAP
- html+上下标+遇乘号无效,html中的特殊符号
- 30款各大论坛的XP
- 计算机开机错误62,请问主板诊断卡错误代码62怎么办啊 ?
- QT中使用ActiveX
- 黑莓9900 刷机体验(ROM:7.1.0.318_DoCoMo_Japan版)
- Linux客户/服务器程序设计范式——阿帕奇服务器(多进程)