微信小程序电影列表（一）

---

使用 template 来构建电影界面

创建文件目录结构

stars-template.wxml 文件作为评分（五颗五角星 和 得分）的模板

0.0

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

前端资料汇总