從零開始學微信小程式開發－－－4、新聞列表頁面的製作（列表渲染）

阿新 • • 發佈：2018-12-02

今天，我們要構建一個如下圖所示的新聞列表頁面（手機截不了長圖，大家將就看吧QAQ）：

首先，在pages同級目錄建立一個news目錄，用於放有關新聞列表頁面的各種檔案，然後建立news.wxml,news.wxss,news.js,news.json四個檔案：

然後在app.json中註冊頁面（理由前面已經說過了），然後把它放在pages配置項的第一位，這樣一啟動就可以看到新聞列表頁面，方便我們開發。

{
  "pages": [
    "pages/news/news",
    "pages/index/index"
  ],
  "window": {
    "navigationBarBackgroundColor": "#f5f4a7"
  }
}

另外，請在news.json檔案中輸入 {}

還有在news.js檔案中先輸入一個 Page({})

（就算沒有內容也要有這些，否則會報錯）

接下來我們開始構架頁面骨架：

從上面做出來的效果截圖可以看出，我們一開始要實現一個圖片輪播的效果，然後下面是由動物頭像、動物名字、簡介描述、動物圖片、動物相關的正文構成的列表項。

首先，我們來實現圖片輪播，在小程式中提供了swiper元件，用此元件可以快速實現圖片輪播的效果，

在swiper元件中，只能放swiper-item元件，我們的文字、圖片等資訊可以放在swiper-item中。

（詳情參閱https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

）

首先我們看下能否實現輪播效果(由於沒有設定自動切換，需要手動滑動才能切換)：

//news.wxml
<view>
<swiper class='swpr' indicator-dots="true" autoplay='true'>
<swiper-item>1</swiper-item>
<swiper-item>2</swiper-item>
<swiper-item>3</swiper-item>
<swiper-item>4</swiper-item>
</swiper>
</view>

效果如上圖所示，接下來我們在每一個swiper-item中放一張圖片，併為之新增相關樣式，如下：

//news.wxml
<view>
  <swiper class='swpr' indicator-dots="true" autoplay='true' indicator-color="rgba(255, 255, 255, .2)" indicator-active-color="#abf" interval="3000" circular="true">
    <swiper-item class='swpr_it'>
      <image src='/images/news/1.jpg'></image>
    </swiper-item>
    <swiper-item class='swpr_it'>
      <image src='/images/news/2.jpg'></image>
    </swiper-item>
    <swiper-item class='swpr_it'>
      <image src='/images/news/3.jpg'></image>
    </swiper-item>
    <swiper-item class='swpr_it'>
      <image src='/images/news/4.jpg'></image>
    </swiper-item>
    <swiper-item class='swpr_it'>
      <image src='/images/news/5.jpg'></image>
    </swiper-item>
  </swiper>
</view>

indicator-dots="true" //設定面板提示點，就是上面那幾個小點點

indicator-color="rgba(255, 255, 255, .2)" //指示點顏色，設為白色，透明度0.2

dicator-active-color="#abf" //當前選中的指示點顏色

autoplay='true'//是否自動切換

in interval="3000" //自動切換時間間隔

circular="true"//是否採用銜接滑動，如果此項不設為true，當切換到最後一張圖，再切到第一張圖時，銜接是不連貫的

由上面可以看出圖片是顯示出來了，但是並沒有100%顯示，我們為之增加樣式：

//news.wxss
.swpr {
  width: 100%;
  height: 500rpx;
}

.swpr_it image {
  width: 100%;
}

如果單單為圖片設定100%的寬是不夠的，必須為swiper元件也設定一個100%的寬度（為swiper-item設定寬高無效，它預設繼承swiper的寬高）

這樣，我們的輪播就完成了，接著，我們完成列表項的製作：

//news.wxml
<view>
  <swiper class='swpr' indicator-dots="true" autoplay='true' indicator-color="rgba(255, 255, 255, .2)" indicator-active-color="#abf" interval="3000" circular="true">
    <swiper-item class='swpr_it'><image src='/images/news/1.jpg'></image></swiper-item>
    <swiper-item class='swpr_it'><image src='/images/news/2.jpg'></image></swiper-item>
    <swiper-item class='swpr_it'><image src='/images/news/3.jpg'></image></swiper-item>
    <swiper-item class='swpr_it'><image src='/images/news/4.jpg'></image></swiper-item>
    <swiper-item class='swpr_it'><image src='/images/news/5.jpg'></image></swiper-item>
  </swiper>

//列表開始
  <view class='animal_info'>
    <view class='animal_photo'>
    <image src='/images/news/1.jpg{{picture_url}}'></image>
    <text class='animal_nikename'>{{nikename}}露露</text>
    </view>
   
    <text class='animal_title'>{{describe}}溫柔可人 吃可愛多長大的</text>
    <image src='/images/news/1.jpg{{picture_url}}' class='animal_img'></image>
    <text class='animal_intro'>{{brief_introduction}}
    露露溫柔可人吃可愛多長大的，露露溫柔可人吃可愛多長大的，露露溫柔可人吃可愛多長大的。露露溫柔可人吃可愛多長大的。露露溫柔可人吃可愛多長大的。露露溫柔可人吃可愛多長大的，露露溫柔可人吃可愛多長大的，露露溫柔可人吃可愛多長大的，露露溫柔可人吃可愛多長大的，露露溫柔可人吃可愛多長大的，露露溫柔可人吃可愛多長大的露露溫柔可人吃可愛多長大的。
    </text>

    <view class='article_state'>
    <image src='/images/news/start.png{{star_url}}' class='article_stateimg'></image>
    <text class='article_statetext'>{{star_count}}246</text>
    <image src='/images/news/chat.png{{char_url}}' class='article_stateimg'></image>
    <text class='article_statetext'>{{chat_count}}200</text>
    </view>
  </view>

    <view class='animal_info'>
    <view class='animal_photo'>
    <image src='/images/news/2.jpg'></image>
    <text class='animal_nikename'>壯壯</text>
    </view>
   
    <text class='animal_title'>風流倜儻 玉樹臨風</text>
    <image src='/images/news/2.jpg' class='animal_img'></image>
     <text class='animal_intro'>
    壯壯風流倜儻玉樹臨風， 壯壯風流倜儻玉樹臨風， 壯壯風流倜儻玉樹臨風， 壯壯風流倜儻玉樹臨風， 壯壯風流倜儻玉樹臨風， 壯壯風流倜儻玉樹臨風， 壯壯風流倜儻玉樹臨風， 壯壯風流倜儻玉樹臨風， 壯壯風流倜儻玉樹臨風， 壯壯風流倜儻玉樹臨風， 壯壯風流倜儻玉樹臨風。
    </text>

    <view class='article_state'>
    <image src='/images/news/start.png' class='article_stateimg'></image>
    <text class='article_statetext'>67</text>
    <image src='/images/news/chat.png' class='article_stateimg'></image>
    <text class='article_statetext'>60</text>
    </view>
  </view>

    <view class='animal_info'>
    <view class='animal_photo'>
    <image src='/images/news/3.jpg'></image>
    <text class='animal_nikename'>妮妮</text>
    </view>
   
    <text class='animal_title'>柔情似水 有靈性</text>
    <image src='/images/news/3.jpg' class='animal_img'></image>
     <text class='animal_intro'>
    妮妮柔情似水有靈性，妮妮柔情似水有靈性，妮妮柔情似水有靈性，妮妮柔情似水有靈性，妮妮柔情似水有靈性，妮妮柔情似水有靈性，妮妮柔情似水有靈性，妮妮柔情似水有靈性，妮妮柔情似水有靈性，妮妮柔情似水有靈性。
    </text>

    <view class='article_state'>
    <image src='/images/news/start.png' class='article_stateimg'></image>
    <text class='article_statetext'>200</text>
    <image src='/images/news/chat.png' class='article_stateimg'></image>
    <text class='article_statetext'>199</text>
    </view>
  </view>

    <view class='animal_info'>
    <view class='animal_photo'>
    <image src='/images/news/4.jpg'></image>
    <text class='animal_nikename'>娜娜</text>
    </view>
   
    <text class='animal_title'>可愛迷人 聽話懂事</text>
    <image src='/images/news/4.jpg' class='animal_img'></image>
     <text class='animal_intro'>
   娜娜可愛迷人聽話懂事，娜娜可愛迷人聽話懂事，娜娜可愛迷人聽話懂事，娜娜可愛迷人聽話懂事，娜娜可愛迷人聽話懂事，娜娜可愛迷人聽話懂事，娜娜可愛迷人聽話懂事，娜娜可愛迷人聽話懂事，娜娜可愛迷人聽話懂事，娜娜可愛迷人聽話懂事。
    </text>

    <view class='article_state'>
    <image src='/images/news/start.png' class='article_stateimg'></image>
    <text class='article_statetext'>300</text>
    <image src='/images/news/chat.png' class='article_stateimg'></image>
    <text class='article_statetext'>280</text>
    </view>
  </view>

    <view class='animal_info'>
    <view class='animal_photo'>
    <image src='/images/news/5.jpg'></image>
    <text class='animal_nikename'>歡歡</text>
    </view>
   
    <text class='animal_title'>機靈調皮 熊孩子一枚</text>
    <image src='/images/news/5.jpg' class='animal_img'></image>
     <text class='animal_intro'>
    歡歡機靈調皮熊孩子一枚，歡歡機靈調皮熊孩子一枚，歡歡機靈調皮熊孩子一枚，歡歡機靈調皮熊孩子一枚，歡歡機靈調皮熊孩子一枚，歡歡機靈調皮熊孩子一枚，歡歡機靈調皮熊孩子一枚，歡歡機靈調皮熊孩子一枚，歡歡機靈調皮熊孩子一枚，歡歡機靈調皮熊孩子一枚。
    </text>

    <view class='article_state'>
    <image src='/images/news/start.png' class='article_stateimg'></image>
    <text class='article_statetext'>800</text>
    <image src='/images/news/chat.png' class='article_stateimg'></image>
    <text class='article_statetext'>788</text>
    </view>
  </view>
</view>

以上程式碼採用硬編碼的方式，有多少個列表就增加多少 animal_info 程式碼塊，程式碼冗餘，複用程度低，而且極不靈活，這個問題後面再來解決，先看wxss程式碼：

//news.wxss
.swpr{
  width: 100%;
  height: 500rpx;
}

.swpr_it image{
  width: 100%;
  /* color:rgb(255, 228, 181); */
}
.animal_info{
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 12px;
  border-top: 1px solid #ededed;
  /* border-bottom: 1px solid #ededed; */
  padding-top: 10px;
  /* background-color: #fff; */

}
.animal_photo{
  width: 100%;
  margin-bottom: 10px;
   margin-left: 6px;
}
.animal_title{
  font-weight: bold;
  font-size: 32rpx;
  line-height: 36rpx;
  text-align: center;
  color: #444;
  vertical-align: middle;
  margin-bottom: 10px;
}
.animal_photo image{
  width: 80rpx;
  height: 80rpx;
  border-radius: 100rpx;
  vertical-align: middle;
}
.animal_nikename{
  /* font-weight: bold; */
  margin-left: 10px;
  vertical-align: middle;
  font-size: 26rpx;
}

.animal_img {
  width: 100%;
  margin: auto 0;
 
}
.animal_intro{
 
  font-size: 28rpx;
  letter-spacing: 2rpx;
  color: #666;
  line-height: 40rpx;
  margin-bottom: 20rpx;
  margin-left: 20rpx;
  /* text-align:justify; */
  
 
}
.article_state{
  width: 100%;
  flex-direction: row;
  margin-bottom: 20rpx;
}
.article_stateimg{
  width: 26rpx;
  height: 26rpx;
  vertical-align: middle;
  margin-left: 8px;
}
.article_statetext{
  font-size: 26rpx;
  color: #666;
  margin-left: 10rpx;
  margin-right: 20px;
  margin-bottom: 20px;
  vertical-align: middle;
}

效果如下圖：

顯然，導航欄的顏色不是我們想要的（這是在app.json中配置的顏色），我們來在news.json中配置顏色和文字：

{
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fe9",   
    "navigationBarTitleText": "Lovely animals",
    "navigationBarTextStyle": "black"
  }

效果如下圖：

現在，我們來解決程式碼冗餘的問題：

要實現提高程式碼重用率，首先要解決的問題是：資料從何而來？怎麼讓一段程式碼實現多條不同資料的顯示？在JS檔案中的Page()構造器裡面有一個data屬性，這裡放的是頁面第一次渲染要用到的初始資料，在頁面被載入的時候，data將被以JSON字串的形式由邏輯層傳至渲染層（data中的資料必須是可以轉成JSON的型別：字串、數字、布林值、物件、陣列），渲染層通過WXML對資料進行繫結。現在我們就以資料繫結的形式將資料填充到WXML中對應的位置(輸入Page敲下回車就會自動顯示相關的屬性和行為)：

//news.js
Page({
data: {
picture_url: "/images/news/1.jpg",
nikename:"露露",
describe:"溫柔可人 吃可愛多長大的",
brief_introduction:"露露溫柔可人吃可愛多長大的，露露溫柔可人吃可愛多長大的，露露溫柔可人吃可愛多長大的。露露溫柔可人吃可愛多長大的。露露溫柔可人吃可愛多長大的。露露溫柔可人吃可愛多長大的，露露溫柔可人吃可愛多長大的，露露溫柔可人吃可愛多長大的，露露溫柔可人吃可愛多長大的，露露溫柔可人吃可愛多長大的，露露溫柔可人吃可愛多長大的露露溫柔可人吃可愛多長大的。",
star_url:"/images/news/start.png",
star_count:246,
char_url:"/images/news/chat.png",
chat_count:230 
}
})

（需要注意的是圖片的路徑不要有空格，否則顯示不出來）接下來，我們先嚐試著對第一個列表項中的值進行資料繫結資料繫結採用{{varName}}的形式：

//news.wxml
<view class='animal_info'>
<view class='animal_photo'>
<image src='{{picture_url}}'></image>
<text class='animal_nikename'>{{nikename}}</text>
</view>
<text class='animal_title'>{{describe}}</text>
<image src='{{picture_url}}' class='animal_img'></image>
<text class='animal_intro'>{{brief_introduction}}</text>

<view class='article_state'>
<image src='{{star_url}}' class='article_stateimg'></image>
<text class='article_statetext'>{{star_count}}</text>
<image src='{{char_url}}' class='article_stateimg'></image>
<text class='article_statetext'>{{chat_count}}</text>
</view>

可以正常顯示之後，我們把後面幾個“列表項”的資料也搬到JS中，把它們放在一個數組裡面(陣列名:[{1},{2},{3}])，然後把後面的幾個 animal_info去掉，只留下進行了資料繫結的那一個：

//js
data: {   

    myarray: [
      {
        picture_url: "/images/news/1.jpg",
        nikename: "露露",
        describe: "溫柔可人 吃可愛多長大的",
        brief_introduction: "露露溫柔可人吃可愛多長大的，露露溫柔可人吃可愛多長大的，露露溫柔可人吃可愛多長大的。露露溫柔可人吃可愛多長大的。露露溫柔可人吃可愛多長大的。露露溫柔可人吃可愛多長大的，露露溫柔可人吃可愛多長大的，露露溫柔可人吃可愛多長大的，露露溫柔可人吃可愛多長大的，露露溫柔可人吃可愛多長大的，露露溫柔可人吃可愛多長大的露露溫柔可人吃可愛多長大的。",
        star_url: "/images/news/start.png",
        star_count: 246,
        char_url: "/images/news/chat.png",
        chat_count: 230,

      },
      {
      picture_url: "/images/news/2.jpg",
      nikename: "壯壯",
        describe: "風流倜儻 玉樹臨風",
        brief_introduction: " 壯壯風流倜儻玉樹臨風， 壯壯風流倜儻玉樹臨風， 壯壯風流倜儻玉樹臨風， 壯壯風流倜儻玉樹臨風， 壯壯風流倜儻玉樹臨風， 壯壯風流倜儻玉樹臨風， 壯壯風流倜儻玉樹臨風， 壯壯風流倜儻玉樹臨風， 壯壯風流倜儻玉樹臨風， 壯壯風流倜儻玉樹臨風， 壯壯風流倜儻玉樹臨風。",
      star_url: "/images/news/start.png",
      star_count: 67,
      char_url: "/images/news/chat.png",
      chat_count: 60 
      },
      {
        picture_url: "/images/news/3.jpg",
        nikename: "妮妮",
        describe: "柔情似水 有靈性",
        brief_introduction: "妮妮柔情似水有靈性，妮妮柔情似水有靈性，妮妮柔情似水有靈性，妮妮柔情似水有靈性，妮妮柔情似水有靈性，妮妮柔情似水有靈性，妮妮柔情似水有靈性，妮妮柔情似水有靈性，妮妮柔情似水有靈性，妮妮柔情似水有靈性。",
        star_url: "/images/news/start.png",
        star_count: 200,
        char_url: "/images/news/chat.png",
        chat_count: 199  
      },
      {
        picture_url: "/images/news/4.jpg",
        nikename: "娜娜",
        describe: "可愛迷人 聽話懂事",
        brief_introduction: "娜娜可愛迷人聽話懂事，娜娜可愛迷人聽話懂事，娜娜可愛迷人聽話懂事，娜娜可愛迷人聽話懂事，娜娜可愛迷人聽話懂事，娜娜可愛迷人聽話懂事，娜娜可愛迷人聽話懂事，娜娜可愛迷人聽話懂事，娜娜可愛迷人聽話懂事，娜娜可愛迷人聽話懂事。",
        star_url: "/images/news/start.png",
        star_count: 300,
        char_url: "/images/news/chat.png",
        chat_count: 280 
      },
      {
        picture_url: "/images/news/1.jpg",
        nikename: "歡歡",
        describe: "機靈調皮 熊孩子一枚",
        brief_introduction: "歡歡機靈調皮熊孩子一枚，歡歡機靈調皮熊孩子一枚，歡歡機靈調皮熊孩子一枚，歡歡機靈調皮熊孩子一枚，歡歡機靈調皮熊孩子一枚，歡歡機靈調皮熊孩子一枚，歡歡機靈調皮熊孩子一枚，歡歡機靈調皮熊孩子一枚，歡歡機靈調皮熊孩子一枚，歡歡機靈調皮熊孩子一枚。",
        star_url: "/images/news/start.png",
        star_count: 800,
        char_url: "/images/news/chat.png",
        chat_count: 788 
      }
      ]  
  },

//wxml
<view>
  <swiper class='swpr' indicator-dots="true" autoplay='true' indicator-color="rgba(255, 255, 255, .2)" indicator-active-color="#abf" interval="3000" circular="true">
    <swiper-item class='swpr_it'><image src='/images/news/1.jpg'></image></swiper-item>
    <swiper-item class='swpr_it'><image src='/images/news/2.jpg'></image></swiper-item>
    <swiper-item class='swpr_it'><image src='/images/news/3.jpg'></image></swiper-item>
    <swiper-item class='swpr_it'><image src='/images/news/4.jpg'></image></swiper-item>
    <swiper-item class='swpr_it'><image src='/images/news/5.jpg'></image></swiper-item>
  </swiper>
  <view class='animal_info'>
    <view class='animal_photo'>
    <image src='{{myarray[0].picture_url}}'></image>
    <text class='animal_nikename'>{{myarray[0].nikename}}</text>
    </view>
   
    <text class='animal_title'>{{myarray[0].describe}}</text>
    <image src='{{myarray[0].picture_url}}' class='animal_img'></image>
    <text class='animal_intro'>{{myarray[0].brief_introduction}}</text>

    <view class='article_state'>
    <image src='{{myarray[0].star_url}}' class='article_stateimg'></image>
    <text class='article_statetext'>{{myarray[0].star_count}}</text>
    <image src='{{myarray[0].char_url}}' class='article_stateimg'></image>
    <text class='article_statetext'>{{myarray[0].chat_count}}</text>
    </view>
  </view>
</view>

這下問題來了！去掉後面的animal_info之後，頁面上就只能顯示一個“列表項”了，後面那些可愛的小貓小狗都沒能露面呀？

很明顯我們需要一個迴圈來實現根據陣列長度來決定渲染多少個列表項的功能（請參考列表渲染），在API中有這樣一段：

在元件上使用 wx:for 控制屬性繫結一個數組，即可使用陣列中各項的資料重複渲染該元件。

預設陣列的當前項的下標變數名預設為 index，陣列當前項的變數名預設為 item
<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>
Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})
使用 wx:for-item 可以指定陣列當前元素的變數名，

使用 wx:for-index 可以指定陣列當前下標的變數名：
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

我們試一下為animal_info所在的VIEW元件繫結陣列：

但是編譯之後連第一個列表項的資料都沒有顯示？？？

這是因為我們需要指定哪一項列表，如果我們沒有指定，陣列當前項的變數名預設為 item，所以正確的方式應該是{{item.varname}}

//wxml
<view>
  <swiper class='swpr' indicator-dots="true" autoplay='true' indicator-color="rgba(255, 255, 255, .2)" indicator-active-color="#abf" interval="3000" circular="true">
    <swiper-item class='swpr_it'><image src='/images/news/1.jpg'></image></swiper-item>
    <swiper-item class='swpr_it'><image src='/images/news/2.jpg'></image></swiper-item>
    <swiper-item class='swpr_it'><image src='/images/news/3.jpg'></image></swiper-item>
    <swiper-item class='swpr_it'><image src='/images/news/4.jpg'></image></swiper-item>
    <swiper-item class='swpr_it'><image src='/images/news/5.jpg'></image></swiper-item>
  </swiper>
  <view class='animal_info' wx:for="{{myarray}}">
    <view class='animal_photo'>
    <image src='{{item.picture_url}}'></image>
    <text class='animal_nikename'>{{item.nikename}}</text>
    </view>
   
    <text class='animal_title'>{{item.describe}}</text>
    <image src='{{item.picture_url}}' class='animal_img'></image>
    <text class='animal_intro'>{{item.brief_introduction}}</text>

    <view class='article_state'>
    <image src='{{item.star_url}}' class='article_stateimg'></image>
    <text class='article_statetext'>{{item.star_count}}</text>
    <image src='{{item.char_url}}' class='article_stateimg'></image>
    <text class='article_statetext'>{{item.chat_count}}</text>
    </view>
  </view>
</view>

這下圖文全都顯示出來啦，一共有5個。

在實際開發的過程中，我們是要從伺服器取資料的，而不是直接把資料在WXML或JS中寫死，然後每次去修改

從伺服器獲取的資料應該放在onLoad()函式裡面

我們修改一下JS程式碼：（資料移動到onLoad()中，並且陣列名變為myarray1了）


Page({

  /**
   * 頁面的初始資料
   */
  data: {   
    // myarray:[ 
    //   ]
  },
  

  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {
    var myarray1= [
      {
        picture_url: "/images/news/1.jpg",
        nikename: "露露",
        describe: "溫柔可人 吃可愛多長大的",
        brief_introduction: "露露溫柔可人吃可愛多長大的，露露溫柔可人吃可愛多長大的，露露溫柔可人吃可愛多長大的。露露溫柔可人吃可愛多長大的。露露溫柔可人吃可愛多長大的。露露溫柔可人吃可愛多長大的，露露溫柔可人吃可愛多長大的，露露溫柔可人吃可愛多長大的，露露溫柔可人吃可愛多長大的，露露溫柔可人吃可愛多長大的，露露溫柔可人吃可愛多長大的露露溫柔可人吃可愛多長大的。",
        star_url: "/images/news/start.png",
        star_count: 246,
        char_url: "/images/news/chat.png",
        chat_count: 230,

      },
      {
        picture_url: "/images/news/2.jpg",
        nikename: "壯壯",
        describe: "風流倜儻 玉樹臨風",
        brief_introduction: " 壯壯風流倜儻玉樹臨風， 壯壯風流倜儻玉樹臨風， 壯壯風流倜儻玉樹臨風， 壯壯風流倜儻玉樹臨風， 壯壯風流倜儻玉樹臨風， 壯壯風流倜儻玉樹臨風， 壯壯風流倜儻玉樹臨風， 壯壯風流倜儻玉樹臨風， 壯壯風流倜儻玉樹臨風， 壯壯風流倜儻玉樹臨風， 壯壯風流倜儻玉樹臨風。",
        star_url: "/images/news/start.png",
        star_count: 67,
        char_url: "/images/news/chat.png",
        chat_count: 60
      },
      {
        picture_url: "/images/news/3.jpg",
        nikename: "妮妮",
        describe: "柔情似水 有靈性",
        brief_introduction: "妮妮柔情似水有靈性，妮妮柔情似水有靈性，妮妮柔情似水有靈性，妮妮柔情似水有靈性，妮妮柔情似水有靈性，妮妮柔情似水有靈性，妮妮柔情似水有靈性，妮妮柔情似水有靈性，妮妮柔情似水有靈性，妮妮柔情似水有靈性。",
        star_url: "/images/news/start.png",
        star_count: 200,
        char_url: "/images/news/chat.png",
        chat_count: 199
      },
      {
        picture_url: "/images/news/4.jpg",
        nikename: "娜娜",
        describe: "可愛迷人 聽話懂事",
        brief_introduction: "娜娜可愛迷人聽話懂事，娜娜可愛迷人聽話懂事，娜娜可愛迷人聽話懂事，娜娜可愛迷人聽話懂事，娜娜可愛迷人聽話懂事，娜娜可愛迷人聽話懂事，娜娜可愛迷人聽話懂事，娜娜可愛迷人聽話懂事，娜娜可愛迷人聽話懂事，娜娜可愛迷人聽話懂事。",
        star_url: "/images/news/start.png",
        star_count: 300,
        char_url: "/images/news/chat.png",
        chat_count: 280
      },
      {
        picture_url: "/images/news/5.jpg",
        nikename: "歡歡",
        describe: "機靈調皮 熊孩子一枚",
        brief_introduction: "歡歡機靈調皮熊孩子一枚，歡歡機靈調皮熊孩子一枚，歡歡機靈調皮熊孩子一枚，歡歡機靈調皮熊孩子一枚，歡歡機靈調皮熊孩子一枚，歡歡機靈調皮熊孩子一枚，歡歡機靈調皮熊孩子一枚，歡歡機靈調皮熊孩子一枚，歡歡機靈調皮熊孩子一枚，歡歡機靈調皮熊孩子一枚。",
        star_url: "/images/news/start.png",
        star_count: 800,
        char_url: "/images/news/chat.png",
        chat_count: 788
      }
    ]
 
    
  }
})

把資料移動到函式中後並沒有顯示出來

這是因為我們將資料放到onLoad()中只是為了模擬向伺服器取資料，但取到的資料還是要渲染出來（放在data中），所以我們應該用setData將資料從邏輯層傳送到檢視層

Page.prototype.setData(Object data, Function callback)

setData 函式用於將資料從邏輯層傳送到檢視層（非同步），同時改變對應的 this.data 的值（同步）。

引數說明

欄位

型別

必填

描述

最低版本

data

Object

是

這次要改變的資料

callback

Function

否

setData引起的介面更新渲染完畢後的回撥函式

1.5.0

Object 以 key: value 的形式表示，將 this.data 中的 key 對應的值改變成 value。

其中 key 可以以資料路徑的形式給出，支援改變陣列中的某一項或物件的某個屬性，如array[2].message，a.b.c.d，並且不需要在 this.data 中預先定義。

注意：

直接修改 this.data 而不呼叫 this.setData 是無法改變頁面的狀態的，還會造成資料不一致。

僅支援設定可 JSON 化的資料。

單次設定的資料不能超過1024kB，請儘量避免一次設定過多的資料。

請不要把 data 中任何一項的 value 設為 undefined ，否則這一項將不被設定並可能遺留一些潛在問題。

欄位	型別	必填	描述	最低版本
data	Object	是	這次要改變的資料
callback	Function	否	setData引起的介面更新渲染完畢後的回撥函式	1.5.0

解決方法是：在onLoad()函式中加上：

this.setData({

myarray: myarray1

});

myarray（KEY）:myarray1(VALUE)，將myarray1陣列中的值賦給myarray（myarray與 wxml中繫結的陣列名相同wx:for="{{myarray}}）（這樣相當於把從“伺服器取到的資料”平鋪賦給data屬性）

至此，新聞列表頁製作就完成啦，下面貼一些JS程式碼，其他的都沒變：

Page({

  /**
   * 頁面的初始資料
   */
  data: {
    // myarray:[  
    //   ]
  },


  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function(options) {
    var myarray1 = [{
        picture_url: "/images/news/1.jpg",
        nikename: "露露",
        describe: "溫柔可人 吃可愛多長大的",
        brief_introduction: "露露溫柔可人吃可愛多長大的，露露溫柔可人吃可愛多長大的，露露溫柔可人吃可愛多長大的。露露溫柔可人吃可愛多長大的。露露溫柔可人吃可愛多長大的。露露溫柔可人吃可愛多長大的，露露溫柔可人吃可愛多長大的，露露溫柔可人吃可愛多長大的，露露溫柔可人吃可愛多長大的，露露溫柔可人吃可愛多長大的，露露溫柔可人吃可愛多長大的露露溫柔可人吃可愛多長大的。",
        star_url: "/images/news/start.png",
        star_count: 246,
        char_url: "/images/news/chat.png",
        chat_count: 230,

      },
      {
        picture_url: "/images/news/2.jpg",
        nikename: "壯壯",
        describe: "風流倜儻 玉樹臨風",
        brief_introduction: " 壯壯風流倜儻玉樹臨風， 壯壯風流倜儻玉樹臨風， 壯壯風流倜儻玉樹臨風， 壯壯風流倜儻玉樹臨風， 壯壯風流倜儻玉樹臨風， 壯壯風流倜儻玉樹臨風， 壯壯風流倜儻玉樹臨風， 壯壯風流倜儻玉樹臨風， 壯壯風流倜儻玉樹臨風， 壯壯風流倜儻玉樹臨風， 壯壯風流倜儻玉樹臨風。",
        star_url: "/images/news/start.png",
        star_count: 67,
        char_url: "/images/news/chat.png",
        chat_count: 60
      },
      {
        picture_url: "/images/news/3.jpg",
        nikename: "妮妮",
        describe: "柔情似水 有靈性",
        brief_introduction: "妮妮柔情似水有靈性，妮妮柔情似水有靈性，妮妮柔情似水有靈性，妮妮柔情似水有靈性，妮妮柔情似水有靈性，妮妮柔情似水有靈性，妮妮柔情似水有靈性，妮妮柔情似水有靈性，妮妮柔情似水有靈性，妮妮柔情似水有靈性。",
        star_url: "/images/news/start.png",
        star_count: 200,
        char_url: "/images/news/chat.png",
        chat_count: 199
      },
      {
        picture_url: "/images/news/4.jpg",
        nikename: "娜娜",
        describe: "可愛迷人 聽話懂事",
        brief_introduction: "娜娜可愛迷人聽話懂事，娜娜可愛迷人聽話懂事，娜娜可愛迷人聽話懂事，娜娜可愛迷人聽話懂事，娜娜可愛迷人聽話懂事，娜娜可愛迷人聽話懂事，娜娜可愛迷人聽話懂事，娜娜可愛迷人聽話懂事，娜娜可愛迷人聽話懂事，娜娜可愛迷人聽話懂事。",
        star_url: "/images/news/start.png",
        star_count: 300,
        char_url: "/images/news/chat.png",
        chat_count: 280
      },
      {
        picture_url: "/images/news/5.jpg",
        nikename: "歡歡",
        describe: "機靈調皮 熊孩子一枚",
        brief_introduction: "歡歡機靈調皮熊孩子一枚，歡歡機靈調皮熊孩子一枚，歡歡機靈調皮熊孩子一枚，歡歡機靈調皮熊孩子一枚，歡歡機靈調皮熊孩子一枚，歡歡機靈調皮熊孩子一枚，歡歡機靈調皮熊孩子一枚，歡歡機靈調皮熊孩子一枚，歡歡機靈調皮熊孩子一枚，歡歡機靈調皮熊孩子一枚。",
        star_url: "/images/news/start.png",
        star_count: 800,
        char_url: "/images/news/chat.png",
        chat_count: 788
      }
    ]
    this.setData({
      myarray: myarray1
    });


  },

  /**
   * 生命週期函式--監聽頁面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命週期函式--監聽頁面顯示
   */
  onShow: function() {

  },

  /**
   * 生命週期函式--監聽頁面隱藏
   */
  onHide: function() {

  },

  /**
   * 生命週期函式--監聽頁面解除安裝
   */
  onUnload: function() {

  },

  /**
   * 頁面相關事件處理函式--監聽使用者下拉動作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 頁面上拉觸底事件的處理函式
   */
  onReachBottom: function() {

  },

  /**
   * 使用者點選右上角分享
   */
  onShareAppMessage: function() {

  }
})

參考資料：

小程式API文件：https://developers.weixin.qq.com/miniprogram/dev/api/

上一篇：小程式靜態啟動頁面的製作

從零開始學微信小程式開發－－－4、新聞列表頁面的製作（列表渲染）

《從零開始學微信小程式開發》.pdf

從零開始學微信小程式開發－－－2、小程式專案的建立、相關檔案的作用及小程式IDE

從零開始學微信小程式開發－－－１、初識小程式

從零開始學微信小程式開發－－－3、小程式靜態啟動頁面的製作

從零開始學微信小程式開發－－－4、新聞列表頁面的製作（列表渲染）

從零開始學微信小程式開發－－－5、小程式頁面跳轉

從零開始學微信小程式開發（一）

從零開始學微信小程式開發者工具。

新手入門寶典：從零開始做微信小程式開發

從零開始學習微信小程式（二）

從零開始做微信小程式後端---學習日記

從零開始搭建微信硬件開發環境全過程——1小時掌握微信硬件開發流程

零基礎入門微信小程式開發

【從零開始學日文】#1 日語50音的發音和寫法簡單教學！（平假名篇）

微信小程式開發之左滑修改、刪除功能

微信小程式開發之選項卡(視窗底部TabBar)頁面切換

從零開始學前端第十七講--微信小程式開發入門

微信小程式開發教程--從零開始

微信小程式開發教程-從零開始

微信小程式開發--從px到rpx:

從零開始學微信小程式開發－－－4、新聞列表頁面的製作（列表渲染）

相關推薦