微信小程序之电影影评小程序制作代码
时间:2019-03-30
本文章向大家介绍微信小程序之电影影评小程序制作代码,主要包括微信小程序之电影影评小程序制作代码使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文实例为大家分享了微信小程序制作影评小程序的具体代码,供大家参考,具体内容如下
这是博主的项目包含的文件截图:
首先如图建立文件夹和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页面:
<view class="movies" wx:for="{{movies}}" id="{{item.id}}" bindtap="jumpTomore"> <view class="myimage"> <image src="{{item.images.medium}}"></image> </view> <view class="moveInfo"> <view class="title"> 名称:{{item.title}} </view> <view class="daoyan"> 导演:{{item.directors["0"].name}} </view> <view class="yanyuanlist"> <view class="left">演员:</view> <view class="right"> <block wx:for="{{item.casts}}">{{item.name}} </block> </view> </view> <view class="fenlei"> 分类:{{item.genres}} </view> <view class="year"> 上映时间:{{item.year}} </view> </view> </view>
然后是hotPage.js页面:
var that; var page = 0; // more.js Page({ /** * 页面的初始数据 */ 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代码也差不多,唯一需要改动的地方只有一个:
url和data改一下就好了
.wxss代码一致;
运行结果如下:
接着是第三个页面的代码:
search.wxml页面代码:
<input placeholder="输入关键字" bindinput="myInput" /> <button bindtap="mySearch">搜索</button> <view class="movies" wx:for="{{movies}}" id="{{item.id}}" bindtap="jumpTomore"> <view class="myimage"> <image src="{{item.images.medium}}"></image> </view> <view class="moveInfo"> <view class="title"> 名称:{{item.title}} </view> <view class="daoyan"> 导演:{{item.directors["0"].name}} </view> <view class="yanyuanlist"> <view class="left">演员:</view> <view class="right"> <block wx:for="{{item.casts}}">{{item.name}} </block> </view> </view> <view class="fenlei"> 分类:{{item.genres}} </view> <view class="year"> 上映时间:{{item.year}} </view> </view> </view>
页面代码:
var input; var that; // search.js Page({ /** * 页面的初始数据 */ 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.wxml--> <image src="{{imageUrl}}"></image> <view class="moveInfo"> <view class="title">名字:{{title}}</view> <view class="director">导演:{{director}}</view> <view class="castleft">主演:</view> <view class="casts" wx:for="{{casts}}"> <block class="castright">{{item.name}}</block> </view> <view class="year">年份:{{year}}</view> <view class="rate">评分:{{rate}}</view> <view class="summary">介绍:{{summary}}</view> </view>
more.js代码:
var that; // more.js Page({ /** * 页面的初始数据 */ 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 }) } }) } })
运行代码结果如下:
好了、全部代码如上都给出了..加油
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- winform 、WPF传值方式详解
- 你一定要知道!数据科学家提高工作效率的基本工具
- MySQL 大数据操作注意事项
- Winform窗口里的嵌入WPF的UserControl,关闭Winform父窗体的方法
- LINQ分页和排序,skip和Take 用法
- 这或许是对小白最友好的python入门了吧——21,导入模块
- opoa介绍
- 数据库记录安全解决方案
- 基于计算机视觉和OpenCV:创建一个能够计算道路交通流量的应用
- 这或许是对小白最友好的python入门了吧——20,定义函数简单应用
- 数据库结构版本控制
- Extjs4---Cannot read property 'addCls' of null 或者 el is null 关于tab关闭后再打开不显示或者报错
- 【干货】什么?Python3.X不能输出中文?原来是编辑器geany的锅?!
- Shell 历史记录异地留痕审计与监控
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Java离Linux内核有多远?
- 关于懒汉模式和恶汉模式的区别
- Chrome 新功能 — CSS Overview 尝鲜
- 0门槛,轻松实现条形竞赛图动画
- 读懂数据库中的乐观锁和悲观锁和MVCC
- CentOS 7.x安装微服务网关Apache APISIX
- Sentinel规则Pull模式持久化
- 如何用Cloudbase Framework部署一个Vue项目?
- 第17问:如何评估 alter table 的进度?
- 【LeeCode 困难 python3】329. 矩阵中的最长递增路径
- 干!一张图整理了 Python 所有内置异常
- 面试官问:孤儿进程和僵尸进程,你造吗~
- 最全Vue开发环境搭建
- apicloud api.openwin
- C#观察者模式实例