Runlin微信小程序係列教程一：從零開始寫一個demo《中》

時間：2016-10-16 18:59:00

上一節寫了一個首頁列表的展示，現在我們需要一個效果：

點擊每個(ge) 列表項，能後看到更多的細節和大圖。在本頁麵展示或者加個(ge) 彈窗是基本不可能的了。下麵我們(men) 就創建一個(ge) 新的頁麵來展示更多細節（我們(men) 之前已經創建了2個(ge) 頁麵，其中rank頁麵還是空的，這裏故意先不寫(xie) ，後麵自然會(hui) 補在）

在pages下創建新的文件夾：detail，同時創建4個detail文件js,json,wxml,wxss

對於(yu) 每一個(ge) 頁麵都需要寫(xie) 到app.json的pages中，因此要將我們(men) 新增的"pages/detail/detail"添加到“pages”數組中去。如果新增的頁麵是底部tabBar欄中的一項，還需要添加到tabBar中的List數組，我們(men) 這裏是列表點擊時的新頁麵，所以不需要寫(xie) 到list中。

我們(men) 希望的效果大概是這樣的：

現在有一個(ge) 問題時：我如何在點擊的時候獲取到對應的每一項的數據，並且在新的頁麵展示出來呢？
這裏要解決(jue) 2個(ge) 問題：

導航；
參數的傳遞；

下麵開始寫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一樣，我們(men) 這裏的數據也是從(cong) js拿過來，不過這裏是從(cong) detail.js拿的，但是這個(ge) 時候detail.js中的data是沒有數據的，因為(wei) 我們(men) 希望數據是從(cong) index列表的每一項點擊時傳(chuan) 過來的，而不是我們(men) 直接寫(xie) 到detail.js裏麵的，這個(ge) 時候就需要用到生命周期函數的onload函數了

也就是說，每個(ge) 頁麵在Onload時，都可以獲取上一個(ge) 頁麵傳(chuan) 遞給你的參數（假如有的話），那麽(me) 現在要解決(jue) 2個(ge) 問題：1是上一個(ge) 頁麵如何傳(chuan) 給我，2是我如何接收數據。

舊頁麵傳(chuan) 遞參數：
我們(men) 剛才在index裏麵加了一個(ge) 導航並且 url="../detail/detail" ，需要傳(chuan) 遞參數時，僅(jin) 需要在url後麵：+?+數據
例如：url="../detail/detail?id=test"
例如：https://i.cnblogs.com/EditPosts.aspx?opt=1
可以發現格式其實就是get提交數據時的格式，寫(xie) 過html表單form的一定很熟悉了，需要提交多個(ge) 參數時，需要在後麵加 & 符號
例如： url="../detail/detail?id=test1&name=test2&age=12345"
新頁麵接受數據 (注意隻有在Onload時才可以接受傳(chuan) 過來的數據)

在新頁麵js中 onLoad: function(options) {console.log(options)} 即可打印出傳(chuan) 過來的數據，你會(hui) 發現這是一個(ge) 對象，我們(men) 需要將這個(ge) 對象,通過this.setData轉化為(wei) 新頁麵的數據，

//我們(men) 這裏為(wei) 什麽(me) 要用item是因為(wei) 我們(men) 上麵的數據綁定用的是{{item.xxx}}, 需要對應好，如果一個(ge) 發生變動，另一個(ge) 也要跟著改變

//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的文件都搞定了。

目前我們(men) 前麵的第二個(ge) 導航rank還空著呢，從(cong) 表象上看，rank的格式跟index是一樣，僅(jin) 僅(jin) 是數據不同，那麽(me) 我們(men) 隻要把index的文件複製一份過來就可以了，把模擬的數據改一下即可。
雖然可以，但是代碼很多重複，下麵我們(men) 就引進一個(ge) 新的東(dong) 西叫模板 template 。

定義一個name為test的模板

<template name="test">

　　<view>hhahahha我是模板{{item}}</view>

</template>

使用時，需要先引入所寫的模板所在的位置

因此，同樣的我們(men) 再創建一個(ge) 文件夾template放模板，同時創建.js和.wxml文件這2個(ge) 即可。 template.js並不需要數據，隻是用來注冊(ce) 一下頁麵（不注冊(ce) 控製台有報錯提示你page.js xxx什麽(me) 的），將其他頁麵的.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>