从零开始写个一个豆瓣电影 (小程序教程2)”
2016-10-14 20:56
309 查看
要我用Markdown重新写,弄得我特地去学习了一下语法,瞎搞了几下,不管了
上一节写了一个首页列表的展示,现在我们需要一个效果:
点击每个列表项,能后看到更多的细节和大图。在本页面展示或者加个弹窗是基本不可能的了。下面我们就创建一个新的页面来展示更多细节(我们之前已经创建了2个页面,其中rank页面还是空的,这里故意先不写,后面自然会补在)
在pages下创建新的文件夹:detail,同时创建4个detail文件js,json,wxml,wxss
对于每一个页面都需要写到app.json的pages中,因此要将我们新增的"pages/detail/detail"添加到“pages”数组中去。如果新增的页面是底部tabBar栏中的一项,还需要添加到tabBar中的List数组,我们这里是列表点击时的新页面,所以不需要写到list中。
我们希望的效果大概是这样的:
现在有一个问题时:我如何在点击的时候获取到对应的每一项的数据,并且在新的页面展示出来呢?
这里要解决2个问题:
###导航;
参数的传递;
导航 :
实现导航的方法有2种,一种是直接利用navigator组件, 另一种是利用导航api,通过给列表添加点击事件,实现wx.navigateTo(保留当前页面,有左上角返回)或者wx.redirectTo(关闭当前页面,没有右上角返回按钮)。
为了方便我们这里直接采用组件来写
<block wx:for="{{moivelist}}"> //在这之后插入导航标签 <navigator url="../detail/detail"> //url对应文件的路径,不需要写后缀wxml xxxxx还是原来的配方xxxxxxxx </navigator> </block>
然后我们就可以实现点击跳转的效果了,但是这时候detail.wxml还是空白的。
下面开始写detail.wxml
<view class="container"> <image class="imgs" style="" mode="" src="{{item.images.large}}" binderror="" bindload=""></image> <text> {{item.title}} </text> <text> {{"评分"+item.original_title}} </text> <text> {{"导演"+item.directors[0].name}} </text> <text> {{"主演"+item.rating.average}} </text> </view> <view> {{item.summary}} </view>
跟之前index一样,我们这里的数据也是从js拿过来,不过这里是从detail.js拿的,但是这个时候detail.js中的data是没有数据的,因为我们希望数据是从index列表的每一项点击时传过来的,而不是我们直接写到detail.js里面的,这个时候就需要用到生命周期函数的onload函数了
也就是说,每个页面在Onload时,都可以获取上一个页面传递给你的参数(假如有的话),那么现在要解决2个问题:1是上一个页面如何传给我,2是我如何接收数据。
旧页面传递参数:
我们刚才在index里面加了一个导航并且 url="../detail/detail" ,需要传递参数时,仅需要在url后面:+?+数据
例如:url="../detail/detail?id=test"
例如:https://i.cnblogs.com/EditPosts.aspx?opt=1
可以发现格式其实就是get提交数据时的格式,写过html表单form的一定很熟悉了,需要提交多个参数时,需要在后面加 & 符号
例如: url="../detail/detail?id=test1&name=test2&age=12345"
新页面接受数据 (注意只有在Onload时才可以接受传过来的数据)
在新页面js中 onLoad: function(options) {console.log(options)} 即可打印出传过来的数据,你会发现这是一个对象,我们需要将这个对象,通过this.setData转化为新页面的数据,
//我们这里为什么要用item是因为我们上面的数据绑定用的是{{item.xxx}}, 需要对应好,如果一个发生变动,另一个也要跟着改变 //detai.js代码如下: Page({ data:{ title:"加载中", item:{}, loading:false }, onLoad:function(options){ this.setData({ item:options }) }, onReady:function(){ }, onShow:function(){ }, onHide:function(){ }, onUnload:function(){ } })
detail.js就算写完了,CSS方面就不写了,比较无脑,没什么好讲的,简单设置一下样式不要太丑即可,整个detail的文件都搞定了。
目前我们前面的第二个导航rank还空着呢,从表象上看,rank的格式跟index是一样,仅仅是数据不同,那么我们只要把index的文件复制一份过来就可以了,把模拟的数据改一下即可。
虽然可以,但是代码很多重复,下面我们就引进一个新的东西叫模板 template 。
定义一个name为test的模板
<template name="test"> <view>hhahahha我是模板{{item}}</view> </template>
使用时,需要先引入所写的模板所在的位置
例子:
<template is="test" data={{item:"你好模板"}}></template>
因此,同样的我们再创建一个文件夹template放模板,同时创建.js和.wxml文件这2个即可。 template.js并不需要数据,只是用来注册一下页面(不注册控制台有报错提示你page.js xxx什么的),将其他页面的.js复制过来,并将data里面的数据和其他的事件都出掉,保留最基本的空数据和空函数。
template.wxml内容如下:
<template name="try" > <navigator url="../detail/detail?imgsrc={{item.imgsrc}}&title={{item.title}}&author={{item.author}}&introduce={{item.introduce}}&rank={{item.rank}}"> <view class="moive-item"> <image class="moive-img" style="" mode="" src="{{item.imgsrc}}" binderror="" bindload=""></image> <view class="moive-content"> <view class="content-titile"> <text>{{item.title}}</text> </view> <view class="content-introduce"> <text>{{item.introduce}}</text> </view> <view class="content-author"> <text>{{item.author}}</text> </view> </view> <text class="content-rank">{{item.rank}}</text> </view> </navigator> </template>
定义好模板好,将rank.wxml内容写为:
<view class="head-title" "> <text>电影top20</text> </view> <scroll-view class="main" scroll-y="true" bindscrolltoupper="" bindscrolltolower="" bindscroll="" scroll-into-view="" scroll-top=""> <import src="../temple/temple.wxml"></import> //引入模板 <block wx:for="{{moivelistB}}"> <template is="try" data="{{item}}"></template> //使用模板,并通过wx:for将数据循环展示出来 </block> </scroll-view>
将index.wxss和index.js文件复制一份到rank.js,同时将rank.js中data的数据稍微修改一下,不要让数据都跟index的一样.同时将我们的index.wxml中列表也修改为使用上面的模板,至此就基本完成了。
回顾一下我们主要的知识点:导航写法,如何传递参数,声明周期函数,如何获取传递过来参数,如何定义和使用模板及使用参数。
到此我们使用的都是虚拟的数据,下一篇我们将调用豆瓣提供的接口来调用数据,模拟跟后台的交互。
demo2源文件见 https://github.com/linrunzheng/wx-samll-demo
相关文章推荐
- 从零开始写个一个豆瓣电影 (小程序教程1)
- 从零开始写个一个豆瓣电影 (小程序教程3)
- 微信小程序怎么申请 从零开始做一个微信小程序教程
- 神技!微信小程序(应用号)抢先入门教程(附最新案例DEMO-豆瓣电影)持续更新
- 一个简单的python爬虫程序 爬取豆瓣热度Top100以内的电影信息
- 一个修改电影字幕时间偏移的小程序
- Sprite Kit教程:制作一个通用程序 1
- Linux平台下从零开始写一个C语言访问MySQL的测试程序
- 最近写的一个QVOD电影小偷程序
- 使用ASP.NET MVC(C#)15分钟内创建一个电影数据库程序
- Simple-TODO: 一个简易的 todo 程序 - web.py 中文教程
- 基于豆瓣API的电影信息浏览程序
- UNIX-LINUX编程实践教程->第八章->实例代码注解->写一个简单的shell->在shell中启动另一个程序
- 一个使用Win32SDK编写Windows GUI程序的教程: "theForger's Win32 API Tutorial"
- ffmpeg+sdl教程----编写一个简单的播放器4(让程序更模块化)
- Sprite Kit教程:制作一个通用程序 2
- 从零开始写一个arm下的裸板程序
- ffmpeg+sdl教程----编写一个简单的播放器4(让程序更模块化)
- [翻译:ASP.NET MVC 教程]用ASP.NET MVC 创建一个电影数据库应用程序——补充
- 涂鸦板,一个简单的绘图程序@GTK+ 2.0 中文教程连载