久久精品国产精品亚洲色婷婷,国产成人精品日本亚洲网址,亚洲黄色永久看视频

原創(chuàng)聲明:本文為作者原創(chuàng)，未經(jīng)允許不得轉(zhuǎn)載，經(jīng)授權(quán)轉(zhuǎn)載需注明作者和出處

寫在前面

此帖承接從0 到1：初學(xué)者入門Demo，原計(jì)劃內(nèi)容是一個(gè)兩個(gè)頁面的小程序，現(xiàn)在暫時(shí)增加到三個(gè)頁面，包括從0 到1：初學(xué)者入門Demo 篇中的歡迎頁，該篇的內(nèi)容列表頁面，和下一篇的內(nèi)容詳情頁面。

相信閱讀過筆者從0到1 內(nèi)容的同學(xué)，已經(jīng)了解了小程序從無到有的過程，那么現(xiàn)在我們就直接來內(nèi)容。

初學(xué)者通過該帖將學(xué)習(xí)到

0、小程序的基本組件 view、image、text、swiper
1、小程序推薦的布局方式 flex （本帖子重點(diǎn)使用）
2、小程序的請(qǐng)求API wx:request
3、小程序的模板化編程 template
4、小程序的列表渲染
5、小程序升級(jí)更新之后的新內(nèi)容
6、建立一個(gè)頁面的全過程：先骨架（wxml），再穿衣服（wxss），最后搞個(gè)小動(dòng)作（js）
7、其他更多內(nèi)容… …

8、體會(huì)前后端分離的開發(fā)過程：如何一步一步抽象 mock 數(shù)據(jù)，得到數(shù)據(jù)結(jié)構(gòu)，并最終向服務(wù)器端獲取對(duì)應(yīng)結(jié)構(gòu)的數(shù)據(jù)，直接用于視圖層的渲染！
9、體會(huì)前后端分離的開發(fā)過程：如何一步一步抽象 mock 數(shù)據(jù)，得到數(shù)據(jù)結(jié)構(gòu)，并最終向服務(wù)器端獲取對(duì)應(yīng)結(jié)構(gòu)的數(shù)據(jù)，直接用于視圖層的渲染！
10、體會(huì)前后端分離的開發(fā)過程：如何一步一步抽象 mock 數(shù)據(jù)，得到數(shù)據(jù)結(jié)構(gòu)，并最終向服務(wù)器端獲取對(duì)應(yīng)結(jié)構(gòu)的數(shù)據(jù)，直接用于視圖層的渲染！

重要的事情說三遍！

展示效果

說明：和從0到1 之中有些許的配色變化！

展示頁

準(zhǔn)備

為了更好更流暢的學(xué)習(xí)這部分內(nèi)容，請(qǐng)確保已經(jīng)閱讀過先導(dǎo)篇：從0 到1：初學(xué)者入門Demo。本文將一改從0 到1 中風(fēng)格，不再細(xì)枝末節(jié)的闡述，只寫重要內(nèi)容，當(dāng)然該填的坑依然會(huì)填。

在從0 到1 中，筆者從0 開始創(chuàng)建了一個(gè)歡迎頁的內(nèi)容，作為大家在小程序編程生涯中的 hello world小禮物。最終使用名為 toMina 的點(diǎn)擊 tap 時(shí)間跳轉(zhuǎn)到了 index 頁面，index 展示的是一個(gè)下拉刷新和上拉加載更多的內(nèi)容，這一部分我將暫時(shí)挖一個(gè)坑，在后續(xù) 從4到5 專題帖中更加貼合實(shí)際的實(shí)現(xiàn)這個(gè)效果，大家期待一下吧。

廢話不說，看看本文將帶你完成什么吧！

內(nèi)容列表頁

這是一個(gè)文字展示內(nèi)容的列表頁面，主要由三個(gè)個(gè)部分組成：導(dǎo)航欄、上方的輪播圖（一個(gè)輪播圖，3個(gè)圖片循環(huán)輪播）、下方的文與字簡介內(nèi)容（6個(gè)不同文與字的簡介）。

原型設(shè)計(jì)圖展示

輪播圖	文與字簡介

1、導(dǎo)航欄

戴個(gè)帽子（json）：導(dǎo)航欄的背景色（#5B7896）和文字內(nèi)容僅僅表現(xiàn)在當(dāng)前頁面中，因此設(shè)置在 index.json 文件中即可。自己動(dòng)手完成吧。

2、輪播圖實(shí)現(xiàn)

老規(guī)矩：先骨架（wxml），再穿衣服（wxss），最后搞個(gè)小動(dòng)作（js），隨便帶個(gè)帽子（當(dāng)前頁面的json）

（1）構(gòu)建 index.wxml 頁面骨架，填充內(nèi)容
index.wxml 中需要使用 swiper、view、image、text 組件，后三個(gè)組件已經(jīng)在從0到1內(nèi)容說明，不再贅述，直接開始 swiper 組件的說明（很重要的說明）：

a、swiper是一個(gè)輪播試圖容器，其中只可以存放 swiper-item 組件，其余組件將會(huì)被自動(dòng)刪除；
b、swiper-item 應(yīng)該僅僅作為輪播的一個(gè)子容器使用，并繼承父容器的寬高設(shè)置。
c、swiper 在新版本中已經(jīng)支持循環(huán)輪播了，只需要設(shè)置其屬性 circular 為true即可；其實(shí)，還有一個(gè)隱藏的屬性，官方文檔沒有，但是確實(shí)是有效果的：垂直輪播屬性 vertical，需要時(shí)，設(shè)置為true 即可。

說明：筆者迄今為止介紹的最詳細(xì)的也就是 swiper 輪播容器組件了，跟著我的魔鬼的步伐一步一步實(shí)現(xiàn)。PS：最終的代碼是和官方案例一樣的，但是你將會(huì)知道那是怎么來的，不信的話，繼續(xù)看下去！！！

PPS：基本屬性和時(shí)間還是需要各位去看官文的。哈哈

一個(gè)輪播圖，3個(gè)圖片循環(huán)輪播：

<!-- index.wxml -->
<view class="container">
  <swiper class="post-swiper" circular="true" autoplay="true" indicator-dots="true">
      <swiper-item>
          <!-提示： 不要糾結(jié) image 的高度和寬度，實(shí)際發(fā)時(shí)，這個(gè)是大家試出來的，或者是UI給的-->
          <image src="/imgs/wx.png" style="height:400rpx;width:100%" bindtap="onPostTap"/>
      </swiper-item>
      <swiper-item>
          <image src="/imgs/vr.png" style="height:400rpx;width:100%"/>
      </swiper-item>
      <swiper-item>
          <image src="/imgs/iqiyi.png" style="height:400rpx;width:100%"/>
      </swiper-item>
  </swiper>
  <view class="post-item-container">
    <view class="post-item">
        這里是一個(gè)文與字簡介的內(nèi)容
    </view>
    <view class="post-item">
        這里是一個(gè)文與字簡介的內(nèi)容
    </view>
    <view class="post-item">
        這里是一個(gè)文與字簡介的內(nèi)容
    </view>
  </view>
</view>

上述完成之后得到的效果圖是：

圖片描述

（2）頁面骨架穿上衣服 index.wxss ，定義樣式

設(shè)置 swiper 的寬高和 image 的寬高一致，實(shí)際開發(fā)中寬高上可以有所差異，比如：如果設(shè)置了 swiper 的高度比 image 高的話，會(huì)發(fā)現(xiàn) 三個(gè)輪播點(diǎn) 向下走了一點(diǎn)。具體自己玩玩吧。試試吧，電腦又不會(huì)爆炸！

/* index.css */
.post-swiper{
    height:400rpx;
    width:100%;
}

/*關(guān)于post-item的樣式設(shè)計(jì)只是為了讓大家清晰看到是不同的view分割，可先不設(shè)定*/
.post-item{
    margin-top: 20rpx; 
    background-color:aquamarine;
    border: 1px solid red; 
}

（3）搞點(diǎn)小動(dòng)作 index.js

輪播圖存在的意義：除了展示，當(dāng)然必須具有點(diǎn)擊事件，這基本是真理了。想象一下，輪播圖只是輪播圖的話，你能忍嗎？

某寶的輪播圖，點(diǎn)擊去的商品詳情頁。設(shè)置我們輪播圖的點(diǎn)擊事件，點(diǎn)擊之后到文與字詳情頁面（使用從0到1中提及的快速創(chuàng)建page頁的四個(gè)組成文件的小技巧，創(chuàng)建文與字詳請(qǐng)頁面 pages/index/post-detail/post-detail【文與字詳情頁的具體構(gòu)建過程將在《從2到3》中完成】。

// pages/index/index.js
Page({
  data:{},
  onLoad:function(options){
    // 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)
  },
  onPostTap:function(event){
    // 點(diǎn)擊輪播圖片之后后 跳轉(zhuǎn)到 post-detail 詳情頁
    wx.navigateTo({
      url: 'post-detail/post-detail'
    })
  }
})

（4）如何確認(rèn)點(diǎn)擊的輪播圖是哪一個(gè)輪播圖呢？又怎么知道跳轉(zhuǎn)到誰的詳情頁呢？

你的名字和名片：在一個(gè)交際晚會(huì)上，那么多人遞名片，你怎么讓別人知道你是誰，又怎么聯(lián)系你呢？哼簡單，讓別人記住你的名字，當(dāng)別人需要聯(lián)系你的時(shí)候，通過名字找到你的名片即可！（忽略同名的情況，如果你叫張偉的話，… …）

同樣的，給每個(gè)輪播圖添加一個(gè)“名字”，點(diǎn)擊時(shí)通過“名字”確認(rèn)發(fā)揮哪一個(gè)輪播圖對(duì)應(yīng)的詳情頁。在編程中確定唯一的標(biāo)識(shí)，那就是 id 了。

非常重要的一點(diǎn)：小程序中，數(shù)據(jù)動(dòng)態(tài)綁定是單向的，在邏輯層（js）中將需要綁定到的視圖層（wxml）上的數(shù)據(jù)，通過 this.setData 設(shè)置到 data 中（PS：如果數(shù)據(jù)不需要傳遞到視圖層的，建議不要設(shè)置到 data 中），視圖層通過 {{}} 動(dòng)態(tài)獲取數(shù)據(jù)，實(shí)現(xiàn)局部渲染；那么問題來了，視圖層（wxml）的數(shù)據(jù)變化怎么傳遞回邏輯層呢（js），答案是：通過事件監(jiān)聽。

這里介紹一種常用的小技巧，實(shí)現(xiàn)視圖層向邏輯層的數(shù)據(jù)傳遞，特別適合點(diǎn)擊到達(dá)詳情頁的場景中。步驟如下：

組件上設(shè)置一個(gè)事件（這是重要的前提）
需要傳遞到邏輯層的數(shù)據(jù)，將以 data- 開頭的屬性設(shè)置到已綁定事件的組件上（比如：data-post-id）
邏輯層從事件函數(shù)的 event 參數(shù)的 dataset 中獲取視圖層傳遞來的數(shù)據(jù) （比如：postId）

官方 dataset的說明：在組件中可以定義數(shù)據(jù)，這些數(shù)據(jù)將會(huì)通過事件傳遞給邏輯層。書寫方式：以data-開頭，多個(gè)單詞由連字符-鏈接，不能有大寫(大寫會(huì)自動(dòng)轉(zhuǎn)成小寫)如data-element-type，最終在 event.target.dataset 中會(huì)將連字符轉(zhuǎn)成駝峰e(cuò)lementType。（data-post-id => postId）

在 index.wxml 中，為 swiper-item 的 image 綁定點(diǎn)擊事件 onPostTap ，并設(shè)置待傳遞到邏輯層的數(shù)據(jù) data-post-id

<view class="container">
  <swiper class="post-swiper" circular="true" autoplay="true" indicator-dots="true">
      <swiper-item>
          <!-提示： 不要糾結(jié) image 的高度和寬度，實(shí)際發(fā)時(shí)，這個(gè)是大家試出來的，或者是UI給的-->
          <image src="/imgs/wx.png" style="height:400rpx;width:100%" bindtap="onPostTap" data-post-id="3"/>
      </swiper-item>
      <swiper-item>
          <image src="/imgs/vr.png" style="height:400rpx;width:100%" bindtap="onPostTap" data-post-id="4"/>
      </swiper-item>
      <swiper-item>
          <image src="/imgs/iqiyi.png" style="height:400rpx;width:100%" bindtap="onPostTap" data-post-id="5"/>
      </swiper-item>
  </swiper>
  <view class="post-item-container">
    <view class="post-item">
        這里是一個(gè)文與字簡介的內(nèi)容
    </view>
    <view class="post-item">
        這里是一個(gè)文與字簡介的內(nèi)容
    </view>
    <view class="post-item">
        這里是一個(gè)文與字簡介的內(nèi)容
    </view>
  </view>
</view>

在邏輯層 index.js 中，獲取從視圖層傳遞而來的數(shù)據(jù) postId，并在跳轉(zhuǎn)到詳情頁時(shí)，放在 url 中進(jìn)行傳遞

// pages/index/index.js
Page({
  data:{},
  onLoad:function(options){
    // 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)
  },
  onPostTap:function(event){
    // 點(diǎn)擊輪播圖片之后 跳轉(zhuǎn)到 post-detail 詳情頁
    // 通過傳遞而來的 postId 確定具體的詳情頁是哪一個(gè)
    var postId = event.target.dataset.postId;
    console.log(postId);

    // 跳轉(zhuǎn)到詳情頁時(shí)，攜帶 postId 參數(shù)
    wx.navigateTo({
      url: 'post-detail/post-detail?postId=' + postId
    })
  }
})

（5）為什么需要在跳轉(zhuǎn)的 url 中傳遞 postId 到詳情頁呢？

你的名字和名片：當(dāng)我需要聯(lián)系你的時(shí)候，從大腦中提取了你的名字，然后用你的名字去找你的名片。

計(jì)算機(jī)中也是一樣，需要拿到輪播圖的“名字”，也就是 postId，近而去數(shù)據(jù)庫中找到輪播圖的的詳情內(nèi)容，然后展示給用戶。

（6）怎么獲取到跳轉(zhuǎn) url 中攜帶的參數(shù)呢？

細(xì)心一點(diǎn)的話會(huì)發(fā)現(xiàn)，自動(dòng)創(chuàng)建的 js 文件中，onLoad 事件函數(shù)中，存在這樣一句注釋：// 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)。這就是答案了！

// pages/index/post-detail/post-detail.js
Page({
  data:{},
  onLoad:function(options){
    // 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)
    // 詳情頁的內(nèi)容，將會(huì)在 《從2到到3》 中具體構(gòu)建，這里只是為了展現(xiàn)一個(gè)完整的的 點(diǎn)擊跳到詳情頁的過程
    var postId = options.postId; 
    console.log("跳轉(zhuǎn)所帶來的參數(shù) postId 是："+options.postId)
  }
})

注意：詳情頁的內(nèi)容，將會(huì)在《從2到到3》中具體構(gòu)建，這里只是為了展現(xiàn)一個(gè)完整的點(diǎn)擊跳到詳情頁的過程。

寫在輪播圖之后（非必讀內(nèi)容）

建議大家可以去看一下：官方文檔的事件篇的內(nèi)容：區(qū)分一下 target、currentTarget；掌握一下 dataset、detail，這將是大家小程序開發(fā)中不可避免要經(jīng)常使用的內(nèi)容。

看完事件內(nèi)容之后，筆者希望大家先停下，思考一下 onPostTap 事件是不是可以綁定到 swiper-item ，又該怎么來實(shí)現(xiàn)上述的內(nèi)容呢。

這將讓你很好的理解冒泡事件中 target、currentTarget 的區(qū)別！問題很繞，如果暫時(shí)理解不了的話，就先放在那兒，回頭再來看看吧

（7）輪播圖數(shù)據(jù)的抽取：帶你一步一步抽取數(shù)據(jù)結(jié)構(gòu)

前后端分離開發(fā)，是在實(shí)踐中非常重要的一個(gè)原則。前端設(shè)計(jì)時(shí)，使用靜態(tài)數(shù)據(jù)填充展示，最終抽取數(shù)據(jù)的結(jié)構(gòu)，近而確定從后端獲取的數(shù)據(jù)的 json 格式。就實(shí)現(xiàn)了前后端的開發(fā)了喲，是不是很 easy 呢！

抽取數(shù)據(jù)之前，請(qǐng)大家先考慮一個(gè)問題，哪些數(shù)據(jù)是需要從后端動(dòng)態(tài)獲取的，對(duì)于靜態(tài)的數(shù)據(jù)抽取不在我們這里的討論范圍之內(nèi)，比如：筆者覺得不應(yīng)該動(dòng)態(tài)的定制 swiper 表現(xiàn)，那么 swiper 屬性就是一種靜態(tài)數(shù)據(jù)，可以直接定義在組件的行間，是否抽取到邏輯層（js）的 data 中實(shí)現(xiàn)數(shù)據(jù)綁定，大家自定。

* 抽取過程（編程初學(xué)者，請(qǐng)細(xì)讀。不僅是小程序，在今后的前后端開發(fā)中，都很有借鑒意義！）
a、確定輪播圖使用的數(shù)據(jù)（輪播圖的動(dòng)態(tài)數(shù)據(jù)主要集中在 image 組件中，一個(gè)是 src 、一個(gè)是待傳遞的 postId）

b、確定數(shù)據(jù)結(jié)構(gòu)，因?yàn)閱蝹€(gè)輪播子項(xiàng) 的postId 和 image 的src 是一一對(duì)應(yīng)的，而且輪播圖可以包含多個(gè) 輪播子項(xiàng)，我們將輪播圖的數(shù)據(jù)結(jié)構(gòu)抽取成一個(gè)對(duì)象數(shù)組，數(shù)組中的每個(gè)對(duì)象都包含兩個(gè)屬性 postId ，imgSrc 。比如 postId 為3 的輪播子項(xiàng) image 的 src 是 /imgs/wx.png ，那么對(duì)象就是 {postId:3, imgSrc:”imgs/wx.png” }。對(duì)象數(shù)組譬如：[{ "postId": 3, "imgSrc": "/imgs/wx.png" }, { "postId": 4, "imgSrc": "/imgs/vr.png" }, { "postId": 5, "imgSrc": "/imgs/iqiyi.png" }]

c、確定數(shù)據(jù)的去向？之前我們說過，單向數(shù)據(jù)動(dòng)態(tài)綁定時(shí)，建議僅僅將用于視圖渲染的數(shù)據(jù)設(shè)置到 data 中，如果是僅在邏輯層使用的話，可以設(shè)置到 this 的其他屬性上。很顯然：抽取的數(shù)據(jù)適用于視圖層（wxml）的輪播圖的渲染，需要設(shè)置到 data 中

d、如果你手敲的代碼，而不是直接復(fù)制我的代碼的話，你將會(huì)發(fā)現(xiàn)，三個(gè) swiper-item 內(nèi)容的代碼幾乎是一樣的，此時(shí)，我們需要使用列表渲染來簡化 wxml 的代碼編寫（代碼更簡潔優(yōu)美、代碼量更少，小程序可是只有 1024 kb）【關(guān)于列表渲染的內(nèi)容，比較簡單，推薦大家直接閱讀：官文內(nèi)容-列表渲染，關(guān)于 wx:key 的疑問，可以直接在社區(qū)中搜索到答案。】

綜上，我們最終抽取之后的代碼：index.wxml、index.js 、index.wxss

<!-- index.wxml -->
<view class="container">
  <!-- 利用屬性值是字符串的特性，加上字符串1轉(zhuǎn)換成boolean值是true，字符串0轉(zhuǎn)換成boolean是false；根據(jù)需求可以設(shè)置boolean值屬性的值為為1、0 -->
  <swiper class="post-swiper" circular="1" autoplay="1" indicator-dots="1">
    <block wx:for="{{swiperData}}" wx:key="*this">
      <swiper-item>
        <image src="{{item.imgSrc}}" bindtap="onPostTap" data-post-id="{{item.postId}}" />
      </swiper-item>
    </block>
  </swiper>
  <view class="post-item-container">
    <view class="post-item">
      這里是一個(gè)文與字簡介的內(nèi)容
    </view>
    <view class="post-item">
      這里是一個(gè)文與字簡介的內(nèi)容
    </view>
    <view class="post-item">
      這里是一個(gè)文與字簡介的內(nèi)容
    </view>
  </view>
</view>

// pages/index/index.js
Page({
  data: {
    // 抽取成一個(gè)鍵值對(duì)集合，每個(gè)元素的鍵是是 postId 值是是 image 的 src
    swiperData: [
      {
        "postId": 3,
        "imgSrc": "/imgs/wx.png"
      },
      {
        "postId": 4,
        "imgSrc": "/imgs/vr.png"
      },
      {
        "postId": 5,
        "imgSrc": "/imgs/iqiyi.png"
      }
    ]
  },
  onLoad: function (options) {
    // 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)
  },
  onPostTap: function (event) {
    // 點(diǎn)擊輪播圖片之后后 跳轉(zhuǎn)到 post-detail 詳情頁
    var postId = event.target.dataset.postId;
    console.log(postId);
    wx.navigateTo({
      url: 'post-detail/post-detail?postId=' + postId
    })
  }
})

.post-swiper{
    height:400rpx;
    width:100%;
}

/*抽取 .post-swiper image 樣式屬性*/
.post-swiper image{
    height:400rpx;
    width:100%;
}

/*關(guān)于post-item的樣式設(shè)計(jì)只是為了讓大家清晰看到是不同的view分割，可先不設(shè)定*/
.post-item{
    margin-top: 20rpx; 
    background-color:aquamarine;
    border: 1px solid red; 
}

社區(qū)API中心使用

為了更加接近實(shí)際開發(fā)環(huán)境，用于渲染輪播圖的數(shù)據(jù) swiperData 應(yīng)該從后端獲取，這里我們借助社區(qū)的API中心作為后端服務(wù)器。

為了方便大家的學(xué)習(xí)使用，筆者提供了個(gè)人 API 中心給各位使用。大家克制哈，僅有1000次讀，請(qǐng)不要post數(shù)據(jù)。（如果大家覺得可以的話，可以打賞一點(diǎn)積分給筆者）

學(xué)前準(zhǔn)備1：wx.request 接口使用說明
學(xué)前準(zhǔn)備2：社區(qū)API的 get 請(qǐng)求使用說明

從后端請(qǐng)求數(shù)據(jù)的代碼，需要更改三部分：data、onLoad、新增一個(gè) getHttpData 的方法。
最終代碼 index.js：

// pages/index/index.js
Page({
  data: {
    // 抽取成一個(gè)鍵值對(duì)集合，每個(gè)元素的鍵是是 postId 值是是 image 的 src
    // 雖然，swiperData 從服務(wù)器端獲取后 動(dòng)態(tài)設(shè)置到了 data 中，可以不在此設(shè)置 空數(shù)組的初始化，但是建議這么做。（個(gè)人習(xí)慣）
    swiperData: []
  },
  onLoad: function (options) {
    // 頁面初始化時(shí)，請(qǐng)求服務(wù)器，獲取 swiperData ，用于渲染輪播圖
    // 為了避免 this 指向錯(cuò)誤，截取this，賦值給 that
    var that = this;
    this.getHttpData("swiperData", "json", function (data) {
      that.setData({ swiperData: data });
    });

  },
  onPostTap: function (event) {
    // 點(diǎn)擊輪播圖片之后后 跳轉(zhuǎn)到 post-detail 詳情頁
    var postId = event.target.dataset.postId;
    console.log(postId);
    wx.navigateTo({
      url: 'post-detail/post-detail?postId=' + postId
    })
  },
  // 從 wxappclub 的 api 中心獲取數(shù)據(jù)的方法
  // key 表示數(shù)據(jù)名稱，_type 數(shù)據(jù)類型，callback 表示請(qǐng)求成功的回調(diào)函數(shù)
  // 回調(diào)函數(shù)的的參數(shù)，用于攜帶請(qǐng)求得到的數(shù)據(jù)
  getHttpData: function (key, _type, callback) {
    wx.request({
      url: 'https://api.wxappclub.com/get',
      data: {
        // 筆者的API中心，提供給各位使用
        "appkey": "eaa7gcwem04j8sak7hm8g88mkftgb26h",
        "key": key,
        "type": _type
      },
      method: 'GET',
      header: {
        'content-type': 'json'
      },
      success: function (res) {
        if (res.data.success) {
          // console.log(res.data.result.value);
          callback(res.data.result.value);
        }
      }
    });
  }
})

寫在輪播圖之后，文與字內(nèi)容之前

上述我們基本完成了一個(gè)實(shí)際開發(fā)中的輪播內(nèi)容。關(guān)于文與字內(nèi)容的部分，筆者建議大家先自行開發(fā)。

提示一下：

flex 的嵌套布局
內(nèi)容數(shù)據(jù)的抽取和輪播圖基本一樣
服務(wù)器端的數(shù)據(jù)請(qǐng)求方法還是 getHttpData、用于渲染文與字簡介內(nèi)容（若沒有社區(qū)API中心應(yīng)用的話，自行解決吧，少年們）
依然需要列表渲染（筆者提供了6個(gè)文與字簡介內(nèi)容）

文與字簡介內(nèi)容列表

注意：所用到的圖片素材，在百度公共盤中。失效的話，也可使用百度私密盤；密碼：gcv1

（1）分析原型圖，拆分內(nèi)容結(jié)構(gòu)，構(gòu)造骨架（wxml）

展示內(nèi)容列表

拆分結(jié)構(gòu)，可將單個(gè)文與字簡介內(nèi)容分為三個(gè)部分：

a、包含頭像和發(fā)布日期的頭部
b、由文章標(biāo)題、展示圖、內(nèi)容概述組成的主體部分
c、尾部是分享數(shù)數(shù)和收藏?cái)?shù)

結(jié)構(gòu)分析之后得到骨架如下（主要是基礎(chǔ)的view、image、text的嵌套布局）：

<view class="container">
  <!-- 省略了 swiper 內(nèi)容 -->
  <view class="post-item-container">
    <!-- 各個(gè)文與字簡介內(nèi)容，基本結(jié)構(gòu)一致，僅僅是灌入數(shù)據(jù)的不同，重點(diǎn)分析基本結(jié)構(gòu) -->

    <!-- post-item的整體布局 開始（從這里開始的呢！） -->
    <view class="post-item">
      <!-- 頭部：作者頭像、發(fā)布日期 -->
      <view class="post-avatar-date">
        <image class="post-avatar" src="/imgs/avatar/1.png"></image>
        <text class="post-date">Seq 12 2017</text>
      </view>

      <!-- 主體部分：標(biāo)題、展示圖片、內(nèi)容概述 -->
      <view class="post-article" bindtap="onPostTap" data-post-id="0">
        <text class="post-title">這是標(biāo)題</text>
        <image class="post-coverImg" src="/imgs/post/crab.png" mode="aspectFill" />
        <text class="post-content">這是內(nèi)容概述</text>
      </view>

      <!-- 尾部：收藏圖標(biāo)、收藏?cái)?shù)、分享圖標(biāo)、分享數(shù) -->
      <view class="post-collection-share">
        <image src="/imgs/icon/comment.png" />
        <text>985</text>
        <image src="/imgs/icon/view.png" />
        <text>211</text>
      </view>
    </view>
    <!-- post-item的整體布局 結(jié)束-->

  </view>
</view>

該步驟完成后，得到下圖：

簡介內(nèi)容的展示圖

（2）頁面骨架穿上衣服 welcome.wxss ，定義樣式、布局

結(jié)構(gòu)的合理拆分，可以大大提升頁面搭建的速度，根據(jù)上述的分析，可以很簡單的使用 flex 將各個(gè)部分進(jìn)行布局，布局分析步驟依然是：先整體，再局部：（flex布局的內(nèi)容，請(qǐng)參看CSS進(jìn)階系列一flex布局）

整體來看，頭部、主體部分、尾部是列布局（flex-direction: column;）
局部來看，頭像、發(fā)布日期所在的頭部使用的行布局（flex-direction: row;）；主體部分使用的列布局（flex-direction: row;）；尾部的話，依然是行布局（flex-direction: row;）

注意：對(duì)于圖標(biāo)、圖片寬高的設(shè)置，除了UI設(shè)計(jì)師提供之外，不二法門就是自己嘗試，慢慢調(diào)。

/* 還記得 page 嗎？ 為了得到一種斑馬線的效果。我們?cè)O(shè)置整體的背景色是是 灰色的*/
page {
  background-color: #eee;
}

.post-swiper {
  height: 400rpx;
  width: 100%;
}

/*抽取 .post-swiper image 樣式屬性*/
.post-swiper image {
  height: 400rpx;
  width: 100%;
}

/*  post-item 布局 開始 （從這里開始抽取哦）*/
.post-item {
  background-color: #fff;
  margin-top: 30rpx;
  padding: 20rpx;
  border-radius: 20rpx;
}

.post-avatar-date {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 10rpx;
}

.post-avatar {
  height: 80rpx;
  width: 80rpx;
  margin-right: 20rpx;
}

.post-date {
  font-size: 26rpx;
  color: #666;
}

.post-title {
  font-weight: 700;
  font-size: 38rpx;
}

.post-coverImg {
  width: 750rpx;
  height: 210px;
  margin-left: -20rpx;
  margin-top: 20rpx;
}

.post-content {
  font-size: 28rpx;
  color: #333;
}

.post-collection-share {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 20rpx;
  margin-left: 500rpx;
}

.post-collection-share image {
  height: 24rpx;
  width: 24rpx;
  margin-left: 20rpx;
  margin-right: 10rpx;
}

.post-collection-share text {
  font-size: 26rpx;
  color: #999;
}
/*  post-item 布局 結(jié)束*/

該步驟完成后，得到下圖（簡直完美的不要不要的，有木有！）：

布局后的展示圖

（3）搞一個(gè)小動(dòng)作 welcome.js

這里需要的就是從文與字簡介內(nèi)容到文與字詳情頁面的小動(dòng)作，很熟悉有木有，還是那個(gè)輪播圖片點(diǎn)擊時(shí)間 onPostTap，再在綁定事件的組件上設(shè)置一個(gè) data-post-id="{{postId}}" 就可以了。

實(shí)際上我已經(jīng)偷偷的完成了，就在主體部分的最外層容器上，不信你看：<view class="post-article" bindtap="onPostTap" data-post-id="3">

（4）問題來了？說好的是 6個(gè)文與字簡介內(nèi)容呢，現(xiàn)在只有一個(gè)呀！

開始分析時(shí)，我們?cè)f過，文與字簡介內(nèi)容具有相同的基本結(jié)構(gòu)，只是灌入的數(shù)據(jù)不同。那么想要 6個(gè)文與字簡介內(nèi)容，豈不是易如反掌，直接復(fù)制粘貼，然后替換不同的數(shù)據(jù)不就可以了嗎？

先不說。小程序僅僅有1024kb！如果是 600 個(gè)、6000個(gè)文與字簡介內(nèi)容呢？

再者說，大量重復(fù)，代碼不夠簡潔，這是不能忍的。

當(dāng)遇到大量重復(fù)的代碼時(shí)，我們要做的只有兩件事情：（1）將重復(fù)代碼抽取成一個(gè)模板單元；（2）使用列表渲染，根據(jù)傳入的數(shù)據(jù)，渲染一定數(shù)量的模板單元即可。【回想方法的抽取，是不是一樣的道理：當(dāng)一段功能性代碼總是被復(fù)制粘貼，我們要做的就是：取功能性代碼，將變化的內(nèi)容作為參數(shù)傳入到方法內(nèi)容。在需要使用時(shí)，傳入具體的數(shù)據(jù)即可。】

注意：6個(gè)文與字內(nèi)容需要的數(shù)據(jù)在這里，你可以直接使用靜態(tài)數(shù)據(jù)（在data中定義一個(gè)數(shù)組 postsData，將上述數(shù)據(jù)定義到數(shù)組中），也可以試試用一下社區(qū)API中心，使用 wx.request 請(qǐng)求數(shù)據(jù)，最后，列表渲染內(nèi)容列表頁面（這是一個(gè)挑戰(zhàn)，去完成吧！）