上一節(jié)寫(xiě)了一個(gè)首頁(yè)列表的展示，現(xiàn)在我們需要一個(gè)效果：
點(diǎn)擊每個(gè)列表項(xiàng)，能后看到更多的細(xì)節(jié)和大圖。在本頁(yè)面展示或者加個(gè)彈窗是基本不可能的了。下面我們就創(chuàng)建一個(gè)新的頁(yè)面來(lái)展示更多細(xì)節(jié)（我們之前已經(jīng)創(chuàng)建了2個(gè)頁(yè)面，其中rank頁(yè)面還是空的，這里故意先不寫(xiě)，后面自然會(huì)補(bǔ)在）
在pages下創(chuàng)建新的文件夾：detail，同時(shí)創(chuàng)建4個(gè)detail文件js,json,wxml,wxss
對(duì)于每一個(gè)頁(yè)面都需要寫(xiě)到app.json的pages中，因此要將我們新增的"pages/detail/detail"添加到“pages”數(shù)組中去。如果新增的頁(yè)面是底部tabBar欄中的一項(xiàng)，還需要添加到tabBar中的List數(shù)組，我們這里是列表點(diǎn)擊時(shí)的新頁(yè)面，所以不需要寫(xiě)到list中。
我們希望的效果大概是這樣的：
現(xiàn)在有一個(gè)問(wèn)題時(shí)：我如何在點(diǎn)擊的時(shí)候獲取到對(duì)應(yīng)的每一項(xiàng)的數(shù)據(jù)，并且在新的頁(yè)面展示出來(lái)呢？
這里要解決2個(gè)問(wèn)題：
導(dǎo)航 :
實(shí)現(xiàn)導(dǎo)航的方法有2種，一種是直接利用navigator組件, 另一種是利用導(dǎo)航api，通過(guò)給列表添加點(diǎn)擊事件，實(shí)現(xiàn)wx.navigateTo（保留當(dāng)前頁(yè)面，有左上角返回）或者wx.redirectTo（關(guān)閉當(dāng)前頁(yè)面，沒(méi)有右上角返回按鈕）。
為了方便我們這里直接采用組件來(lái)寫(xiě)
<block wx:for="{{moivelist}}"> //在這之后插入導(dǎo)航標(biāo)簽
<navigator url="../detail/detail">
//url對(duì)應(yīng)文件的路徑，不需要寫(xiě)后綴wxml
xxxxx還是原來(lái)的配方xxxxxxxx
然后我們就可以實(shí)現(xiàn)點(diǎn)擊跳轉(zhuǎn)的效果了，但是這時(shí)候detail.wxml還是空白的。
下面開(kāi)始寫(xiě)detail.wxml
<image class="imgs" style="" mode="" src="{{item.images.large}}" binderror="" bindload=""></image>
<text> {{item.title}} </text>
<text> {{"評(píng)分"+item.original_title}} </text>
<text> {{"導(dǎo)演"+item.directors[0].name}} </text>
<text> {{"主演"+item.rating.average}} </text>
跟之前index一樣，我們這里的數(shù)據(jù)也是從js拿過(guò)來(lái)，不過(guò)這里是從detail.js拿的，但是這個(gè)時(shí)候detail.js中的data是沒(méi)有數(shù)據(jù)的，因?yàn)槲覀兿Ｍ麛?shù)據(jù)是從index列表的每一項(xiàng)點(diǎn)擊時(shí)傳過(guò)來(lái)的，而不是我們直接寫(xiě)到detail.js里面的，這個(gè)時(shí)候就需要用到生命周期函數(shù)的onload函數(shù)了
也就是說(shuō)，每個(gè)頁(yè)面在Onload時(shí)，都可以獲取上一個(gè)頁(yè)面?zhèn)鬟f給你的參數(shù)（假如有的話），那么現(xiàn)在要解決2個(gè)問(wèn)題：1是上一個(gè)頁(yè)面如何傳給我，2是我如何接收數(shù)據(jù)。
-
舊頁(yè)面?zhèn)鬟f參數(shù)：
-
我們剛才在index里面加了一個(gè)導(dǎo)航并且 url="../detail/detail" ，需要傳遞參數(shù)時(shí)，僅需要在url后面：+?+數(shù)據(jù)
-
例如：url="../detail/detail?id=test"
-
例如：https://i.cnblogs.com/EditPosts.aspx?opt=1
-
可以發(fā)現(xiàn)格式其實(shí)就是get提交數(shù)據(jù)時(shí)的格式，寫(xiě)過(guò)html表單form的一定很熟悉了，需要提交多個(gè)參數(shù)時(shí)，需要在后面加 & 符號(hào)
-
例如： url="../detail/detail?id=test1&name=test2&age=12345"
-
新頁(yè)面接受數(shù)據(jù) (注意只有在Onload時(shí)才可以接受傳過(guò)來(lái)的數(shù)據(jù))
在新頁(yè)面js中 onLoad: function(options) {console.log(options)} 即可打印出傳過(guò)來(lái)的數(shù)據(jù)，你會(huì)發(fā)現(xiàn)這是一個(gè)對(duì)象，我們需要將這個(gè)對(duì)象,通過(guò)this.setData轉(zhuǎn)化為新頁(yè)面的數(shù)據(jù)，
//我們這里為什么要用item是因?yàn)槲覀兩厦娴臄?shù)據(jù)綁定用的是{{item.xxx}}, 需要對(duì)應(yīng)好，如果一個(gè)發(fā)生變動(dòng)，另一個(gè)也要跟著改變
onLoad:function(options){
detail.js就算寫(xiě)完了，CSS方面就不寫(xiě)了，比較無(wú)腦，沒(méi)什么好講的，簡(jiǎn)單設(shè)置一下樣式不要太丑即可，整個(gè)detail的文件都搞定了。
目前我們前面的第二個(gè)導(dǎo)航rank還空著呢，從表象上看，rank的格式跟index是一樣，僅僅是數(shù)據(jù)不同，那么我們只要把index的文件復(fù)制一份過(guò)來(lái)就可以了，把模擬的數(shù)據(jù)改一下即可。
雖然可以，但是代碼很多重復(fù)，下面我們就引進(jìn)一個(gè)新的東西叫模板 template 。
定義一個(gè)name為test的模板
<view>hhahahha我是模板{{item}}</view>
使用時(shí)，需要先引入所寫(xiě)的模板所在的位置
<template is="test" data={{item:"你好模板"}}></template>
因此，同樣的我們?cè)賱?chuàng)建一個(gè)文件夾template放模板，同時(shí)創(chuàng)建.js和.wxml文件這2個(gè)即可。 template.js并不需要數(shù)據(jù)，只是用來(lái)注冊(cè)一下頁(yè)面（不注冊(cè)控制臺(tái)有報(bào)錯(cuò)提示你page.js xxx什么的），將其他頁(yè)面的.js復(fù)制過(guò)來(lái)，并將data里面的數(shù)據(jù)和其他的事件都出掉，保留最基本的空數(shù)據(jù)和空函數(shù)。
template.wxml內(nèi)容如下：
<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 class="content-introduce">
<text>{{item.introduce}}</text>
<view class="content-author">
<text>{{item.author}}</text>
<text class="content-rank">{{item.rank}}</text>
定義好模板好，將rank.wxml內(nèi)容寫(xiě)為：
<view class="head-title" ">
<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>
//使用模板，并通過(guò)wx:for將數(shù)據(jù)循環(huán)展示出來(lái)
將index.wxss和index.js文件復(fù)制一份到rank.js，同時(shí)將rank.js中data的數(shù)據(jù)稍微修改一下，不要讓數(shù)據(jù)都跟index的一樣.同時(shí)將我們的index.wxml中列表也修改為使用上面的模板，至此就基本完成了。
回顧一下我們主要的知識(shí)點(diǎn)：導(dǎo)航寫(xiě)法，如何傳遞參數(shù)，聲明周期函數(shù)，如何獲取傳遞過(guò)來(lái)參數(shù)，如何定義和使用模板及使用參數(shù)。
到此我們使用的都是虛擬的數(shù)據(jù)，下一篇我們將調(diào)用豆瓣提供的接口來(lái)調(diào)用數(shù)據(jù)，模擬跟后臺(tái)的交互。
demo2源文件見(jiàn) https://github.com/linrunzheng/wx-samll-demo
|
