使用 template 来构建电影界面
创建文件目录结构
stars-template.wxml 文件作为评分(五颗五角星 和 得分)的模板
movie-template.wxml 文件作为异步电影的(海报 名称 评分) 的模板
movie-list-template.wxml 文件作为一列电影(分类的名称 更多按钮 包含三部电影)的模板
将模板构建在电影页面中:
moview.wxml 文件
还没有加样式,比较丑,但是元素都设置成功!
编写样式
编写评分的样式 stars-template.wxss
.stars-container{
display: flex;
flex-direction: row;
}
.stars{
display: flex;
flex-direction: row;
height: 17rpx;
margin-right: 24rpx;
margin-top: 6rpx;
}
.stars image{
padding-left: 3rpx;
height: 17rpx;
width: 17rpx;
}
.star-score{
color: #1f3463;
}
编写电影海报和名称的样式 movie-template.wxss
/* 导入写好的评分的样式 */
@import “…/stars/stars-template.wxss”;
.movie-container {
display:flex ;
flex-direction: column;
padding: 0 22rpx;
}
.movie-img {
width: 200rpx;
height: 270rpx;
padding-bottom: 20rpx;
}
.movie-title{
margin-bottom: 16rpx;
font-size: 24rpx;
}
编写三部电影排列的样式 movie-list-template.wxss
@import “…/movie/movie-template.wxss”;
.movie-list-container{
background-color: #fff;
display: flex;
flex-direction: column;
}
.inner-container{
margin: 0 auto 20rpx;
}
.movie-head{
padding: 30rpx 20rpx 22rpx;
/* display: flex;
flex-direction: row;
justify-content: space-between; */
}
.slogan{
font-size: 24rpx;
}
.more{
float: right;
}
.more-text{
vertical-align: middle;
margin-right: 10rpx;
color: #1f4ba5;
}
.more-img{
width: 9rpx;
height: 16rpx;
vertical-align: middle;
}
.movies-container{
display: flex;
flex-direction: row;
}
编写电影界面整体样式 movies.wxss
@import “movie-list/movie-list-template.wxss”;
从服务器获取数据
我们将使用豆瓣的API接口获取数据
豆瓣API官网:https://developers.douban.com/wiki/?title=guide
注意!因为现在很多小程序学习视频都是拿豆瓣做实验,来自小程序的调用过多,豆瓣来自于小程序的调用被禁止。解决方法:将 https://www.api.douban.com 换成代理 https://douban.uieee.com 。亲测有效!
修改 movies.wxml 文件代码
修改 movise.wxss 文件代码
@import “movie-list/movie-list-template.wxss”;
.container{
background-color: #f2f2f2;
}
.movies-template{
margin-bottom: 30rpx;
}
修改 movises.json 文件代码
{
“navigationBarTitleText”: “光与影”
}
将豆瓣API连接放进全局变量,即 修改 app.js 文
App({
globaData:{
// 指代音乐是否被播放
g_isPlayingMusic:false,
// 哪一个音乐正在被播放
g_currentMusicPostId:null,
// 豆瓣接口的全局变量
doubanBase:“https://douban.uieee.com”
}
})
修改 movise.js 文件,获取豆瓣 正在热映、 即将上映、 top250 三组数据
// 获取全局的app
var app = getApp();
Page({
// RESTFUL API json
// SOAP XML 用的相当少
/**
- 页面的初始数据
*/
data: {
},
/**
- 生命周期函数–监听页面加载
*/
onLoad: function(event) {
// 正在热映
var inTheatersUrl = app.globaData.doubanBase + “/v2/movie/in_theaters”;
// 即将上映
var comingSoonUrl = app.globaData.doubanBase + “/v2/movie/coming_soon”;
// 前250
var top250Url = app.globaData.doubanBase + “/v2/movie/top250”;
this.getMovieListData(inTheatersUrl);
this.getMovieListData(inTheatersUrl);
this.getMovieListData(inTheatersUrl);
},
getMovieListData:function(url){
wx.request({
url: url,
method: ‘GET’,
header: {
‘content-type’: ‘application/xml’ // 豆瓣一定不能是json
},
success: function (res) {
console.log(res)
},
fail: function (error) {
console.log(error)
}
})
}
})
默认每组数据20条数据,我们只需要三条,我们需要传参数设置只每组获取三条数据 movise.js
// 获取全局的app
var app = getApp();
Page({
// RESTFUL API json
// SOAP XML 用的相当少
/**
- 页面的初始数据
*/
data: {
},
/**
- 生命周期函数–监听页面加载
*/
onLoad: function(event) {
// 正在热映
var inTheatersUrl = app.globaData.doubanBase + “/v2/movie/in_theaters” + “?start=0&count=3”;
// 即将上映
var comingSoonUrl = app.globaData.doubanBase + “/v2/movie/coming_soon” + “?start=0&count=3”;
// 前250
var top250Url = app.globaData.doubanBase + “/v2/movie/top250” + “?start=0&count=3”;
this.getMovieListData(inTheatersUrl);
this.getMovieListData(inTheatersUrl);
this.getMovieListData(inTheatersUrl);
},
getMovieListData: function(url) {
wx.request({
url: url,
method: ‘GET’,
header: {
‘content-type’: ‘application/xml’ // 豆瓣一定不能是json
},
success: function(res) {
console.log(res)
},
fail: function(error) {
console.log(error)
}
})
}
})
处理接收过来的方法
movies.js 文件:获取豆瓣数据
// 获取全局的app
var app = getApp();
Page({
// RESTFUL API json
// SOAP XML 用的相当少
/**
- 页面的初始数据
*/
data: {
inTheaters:{},
comingSoon:{},
top250:{}
},
/**
- 生命周期函数–监听页面加载
*/
onLoad: function(event) {
// 正在热映
var inTheatersUrl = app.globaData.doubanBase + “/v2/movie/in_theaters” + “?start=0&count=3”;
// 即将上映
var comingSoonUrl = app.globaData.doubanBase + “/v2/movie/coming_soon” + “?start=0&count=3”;
// 前250
var top250Url = app.globaData.doubanBase + “/v2/movie/top250” + “?start=0&count=3”;
this.getMovieListData(inTheatersUrl,“inTheaters”);
this.getMovieListData(comingSoonUrl,“comingSoon”);
this.getMovieListData(top250Url,“top250”);
},
getMovieListData: function(url,settedKey) {
var that = this;
wx.request({
url: url,
method: ‘GET’,
header: {
‘content-type’: ‘application/xml’ // 豆瓣一定不能是json
},
success: function(res) {
that.procseeDoubanData(res.data, settedKey)
},
fail: function(error) {
console.log(error)
}
})
},
// 处理数据函数
procseeDoubanData: function (moviesDouban, settedKey) {
var movies = [];
for (var idx in moviesDouban.subjects) {
var subject = moviesDouban.subjects[idx];
var title = subject.title;
if (title.length >= 6) {
title = title.substring(0, 6) + “···”;
}
var temp = {
title: title, // 电影名称
average: subject.rating.average, // 评分
coverageUrl: subject.images.large, // 海报
movieId: subject.id // id
}
movies.push(temp);
var readyData={};
readyData[settedKey] = {
movies: movies,
}
// 数据绑定
this.setData(readyData);
}
},
})
movies.wxml 文件:与数据进行绑定
movies-list-template.wxml 文件
前端面试题汇总
JavaScript
性能
linux
前端资料汇总