微信小程序之电影影评小程序制作代码

本文实例为大家分享了微信小程序制作影评小程序的具体代码，供大家参考，具体内容如下

这是博主的项目包含的文件截图：

这里写图片描述

首先如图建立文件夹和page页面

然后app.json页面更新代码如下：

搜索" }] } }

是app.wxss页面（为后面的页面样式写的）：

Box-sizing: border-Box; } /* hotPage.wxss */ .movies{ display:flex; } .myimage{ flex: 1; } .moveInfo{ flex: 2; } .yanyuanlist{ display:flex; } .left{ flex:1; } .right{ flex:2; }

页面显示如图：

这里写图片描述

然后是hotPage.wxml页面：

名称:{{item.title}} 分类:{{item.genres}}

然后是hotPage.js页面：

/**

页面的初始数据
*/
data: {
movies: []
},/**
生命周期函数--监听页面加载
/
onLoad: function (options) {
that = this;
that.linkNet(0);
},jumpTomore: function (e) {
console.log(e.currentTarget.id);
wx.navigateTo({
url: '/pages/more/more?id=' + e.currentTarget.id,})
},linkNet: function (page) {
wx.request({
header: {
"Content-Type": "json"
},url: 'https://api.douban.com/v2/movie/in_theaters',data: {
start: 10 page,count: 10,city: '成都'
},success: function (e) {
console.log(e);
if (e.data.subjects.length == 0) {
wx.showToast({
title: '没有更多数据',})
} else {
that.setData({
movies: that.data.movies.concat(e.data.subjects)
})
}
}
})
},onReachBottom: function () {
that.linkNet(++page);
}
})

运行程序结果如图：

然后是hotPage.wxss:

接着是第二个页面的布局和第一个页面一样，所以直接把第一个页面hotPage.wxml代码copy过来就好了；同样comingSoon.js代码和hotPage.js代码也差不多，唯一需要改动的地方只有一个：

这里写图片描述

url和data改一下就好了

.wxss代码一致;

运行结果如下：

接着是第三个页面的代码：

search.wxml页面代码：

名称:{{item.title}} 分类:{{item.genres}}

页面代码：

/**

页面的初始数据
*/
data: {
movies: []
},/**
生命周期函数--监听页面加载
*/
onLoad: function (options) {
that = this;
},myInput: function (e) {
input = e.detail.value;
},mySearch: function () {
wx.request({
header: {
"Content-Type": "json"
},url: 'https://api.douban.com/v2/movie/search?q=' + input,success: function (e) {
that.setData({
movies: e.data.subjects
})
}
})
}

})

.wxss代码同hotPage.wxss代码一致；

运行代码结果如下：

这里写图片描述

最后是详情页面，点击影片后会跳转到详情页面获得影片的详细信息：

more.wxml页面代码：

more.js代码：

/**

页面的初始数据
*/
data: {
title: 0,imageUrl: 0,director: 0,casts: [],year: 0,rate: 0,summary: 0
},/**
生命周期函数--监听页面加载
*/
onLoad: function (options) {
that = this;
wx.request({
header: {
"Content-Type": "json"
},url: 'https://api.douban.com/v2/movie/subject/' + options.id,success: function (e) {
console.log(e)
that.setData({
title: e.data.original_title,imageUrl: e.data.images.large,director: e.data.directors["0"].name,casts: e.data.casts,year: e.data.year,rate: e.data.rating.average,summary: e.data.summary
})
}
})
}

})

运行代码结果如下：

好了、全部代码如上都给出了..加油

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

原文链接：https://www.f2er.com/weapp/37403.html

微信小程序之电影影评小程序制作代码

猜你在找的微信小程序相关文章