关于【积分获取】的说明关于【附件下载】的说明
查看: 3454|回复: 32

【微信小程序开发教程】电影影评小程序

[复制链接]

467

主题

563

帖子

13万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
137394
发表于 2017-8-14 16:12:38 | 显示全部楼层 |阅读模式

登录后查看更多内容,推荐微信扫码快速登录

您需要 登录 才可以下载或查看,没有帐号?【建议使用下方微信快捷登录注册】

x
微信小程序电影影评小程序开发步骤:
这是博主的项目包含的文件截图:
首先如图建立文件夹和page页面
然后app.json页面更新代码如下:
{  "pages": [    "pages/hotPage/hotPage",    "pages/comingSoon/comingSoon",    "pages/search/search",    "pages/more/more"  ],  "window": {    "backgroundTextStyle": "light",    "navigationBarBackgroundColor": "#fff",    "navigationBarTitleText": "WeChat",    "navigationBarTextStyle": "black"  },  "tabBar": {    "list": [{      "pagePath": "pages/hotPage/hotPage",      "text": "本地热映"    },{      "pagePath": "pages/comingSoon/comingSoon",      "text": "即将上映"    },{      "pagePath": "pages/search/search",      "text": "影片搜索"    }]  }}


然后是app.wxss页面(为后面的页面样式写的):
/**app.wxss**/.container {  height: 100%;  display: flex;  flex-direction: column;  align-items: center;  justify-content: space-between;  padding: 200rpx 0;  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.directors["0"].name}}演员:{{item.name}}分类:{{item.genres}}上映时间:{{item.year}}


然后是hotPage.js页面:
var that;var page = 0;// more.jsPage({  /**   * 页面的初始数据   */  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:
image{  width:350rpx;  height:280rpx;}


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

  
urldata改一下就好了
.wxss代码一致;
运行结果如下:

接着是第三个页面的代码:
search.wxml页面代码:
搜索名称:{{item.title}}导演:{{item.directors["0"].name}}演员:{{item.name}}分类:{{item.genres}}上映时间:{{item.year}}


search.js页面代码:

var input;var that;// search.jsPage({  /**   * 页面的初始数据   */  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        })      }    })  }})


search.wxss代码同hotPage.wxss代码一致;

运行代码结果如下:

最后是详情页面,点击影片后会跳转到详情页面获得影片的详细信息:
more.wxml页面代码:
名字:{{title}}导演:{{director}}主演:{{item.name}}年份:{{year}}评分:{{rate}}介绍:{{summary}}


more.js代码:
var that;// more.jsPage({  /**   * 页面的初始数据   */  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        })      }    })  }})


运行代码结果如下:

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


回复

使用道具 举报

0

主题

25

帖子

23

积分

新手上路

Rank: 1

积分
23
发表于 2017-8-25 12:51:24 | 显示全部楼层
学习学xi
回复

使用道具 举报

0

主题

30

帖子

32

积分

新手上路

Rank: 1

积分
32
发表于 2017-9-4 10:45:47 | 显示全部楼层
下载学习
回复

使用道具 举报

0

主题

4

帖子

10

积分

禁止发言

积分
10
发表于 2017-9-10 10:55:53 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复

使用道具 举报

0

主题

4

帖子

11

积分

禁止发言

积分
11
发表于 2017-9-13 14:54:48 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复

使用道具 举报

0

主题

2

帖子

11

积分

禁止访问

积分
11
发表于 2017-9-29 19:02:25 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复

使用道具 举报

0

主题

2

帖子

11

积分

禁止发言

积分
11
发表于 2017-9-29 20:43:40 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复

使用道具 举报

0

主题

29

帖子

38

积分

新手上路

Rank: 1

积分
38
发表于 2017-10-17 14:55:48 | 显示全部楼层
回复

使用道具 举报

0

主题

16

帖子

17

积分

新手上路

Rank: 1

积分
17
发表于 2017-12-31 00:56:21 | 显示全部楼层
Thank you
学习
回复

使用道具 举报

0

主题

93

帖子

97

积分

注册会员

Rank: 2

积分
97
发表于 2018-3-31 11:43:10 | 显示全部楼层

好 学习学习
回复

使用道具 举报

本版积分规则

关闭

站长推荐上一条 /1 下一条

QQ|Archiver|手机版|小黑屋|小程序大全|小程序开发者论坛-汇集最优质源码、开发者教程、小程序资源

GMT+8, 2018-10-20 11:08 , Processed in 0.158464 second(s), 10 queries , File On.

Powered by Discuz! X3.3

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表