本文作者Harvie_Z ，已經獲得授權

話不多說，先看效果圖

個人覺得先看官方文檔,了解它有什么，再開始動手寫效果會好點。

小程序文件結構

一個頁面由四個文件組成，并且四個文件必須同名

• wxml ： 頁面結構，類似html。
• wxss ： 頁面樣式表，類似css。
• json ： 頁面配置
• js ：頁面邏輯。

程序配置

在 app.json 文件中注冊需要加載的頁面、navigationBar和底部tab的各種屬性、網絡超時時間。

• 注冊頁面

    "pages":[
        "pages/index/index",
        "pages/index/detail",
        "pages/login/login",
        "pages/membercenter/membercenter",
        "pages/recommend/recommend",
        "pages/attention/attention"
  ],

  放在第一的頁面將會在程序加載完成時顯示。

• 配置窗口

    "window":{
        "backgroundTextStyle":"light",
        "navigationBarBackgroundColor": "black",
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle":"white",
        "backgroundColor": "#eaeaea"
  },

  這里配置的是所有窗口的顯示樣式，如果某個頁面需要更改顯示樣式，直接為相應的頁面添加一個json文件配置即可。

  其他的json文件只能配置window屬性。

• 配置tabBar

    "tabBar": {
        "color": "black",
        "borderStyle": "white",
        "selectedColor": "rgb(176,170,168)",
        "backgroundColor": "white",
        "list": [{
              "pagePath": "pages/index/index",
              "text": "精華",
              "iconPath": "images/tabBar/tabBar_essence_click_icon.png",
              "selectedIconPath": "images/tabBar/tabBar_essence_icon.png"
            },
            {
              "pagePath": "pages/recommend/recommend",
              "text": "推薦關注",
              "iconPath": "images/tabBar/tabBar_new_click_icon.png",
              "selectedIconPath": "images/tabBar/tabBar_new_icon.png"
            }
        }]
  },

  配置底部tabBar的文字顏色、圖標、頁面路徑等，和iOS開發中設置tabBar的思路挺像的。

• 網絡超時時間和調試開關

    "networkTimeout": {
        "request": 10000
  },
  "debug":true

  networkTimeout配置的是網絡超時時間，這里的時間單位是毫秒，這里配置的也就是10秒超時。debug控制是否開啟調試，如果開啟了，可以看到log打印。

基本的配置搞定后，就可以開始填內容了。

頂部tab

<view class="top-tab">
  <view class="top-tab-item {{currentTopItem==idx ? 'active' : ''}}" wx:for="{{topTabItems}}" wx:for-index="idx" data-idx="{{idx}}" bindtap="switchTab">
    {{item}}
  </view>
</view>

• 使用wx:for結構循環渲染出5個Item
• 為它們綁定一個點擊方法switchTab
• 設置一個自定義屬性data-idx用來記錄每個Item的索引，以便在點擊的時候能夠知道是哪個Item被點擊。

內容列表

<swiper class="swiper" current="{{currentTopItem}}" bindchange="bindChange" duration="300" style="height:{{swiperHeight}}px" >
  <!--全部-->
  <swiper-item>
    <scroll-view class="scrollView" scroll-y="true" bindscrolltolower="loadMoreData" >
      <block wx:for="{{allDataList}}" wx:for-item="item">
          <navigator url="detail?id={{item.id}}">
            <template is="mainTabCell" data="{{item}}" />
          </navigator>
      </block>
    </scroll-view>
  </swiper-item>
...
...
</swiper>

因為需要橫向分頁滾動，所以我選擇使用swiper作為容器，然后再讓每個swiper-item包裹一層可以上下滾動的scrollView，再使用wx:for循環渲染出列表。

navigator 是導航組件。
template，即模板，作用是定義代碼片段，然后在不同的地方調用。

使用網絡數據渲染頁面

小程序中不能操作Dom，動態渲染頁面的唯一方式就是在頁面中綁定數據，然后在js文件中修改數據。比如在第一個swiper-item中綁定了一個數組allDataList,當在js文件中調用setData方法修改這個數組時，列表也會被修改。

要使用網絡數據當然得先進行網絡訪問，微信已經提供了網絡請求的API。

var that = this;
wx.request({
    url: 'http://api.budejie.com/api/api_open.php?a=list&c=data&type=1',
    data: {},
    method: 'GET', 
    header: "application/json", // 設置請求的 header
    success: function(res){
      console.log(res);
      //通過修改綁定的數組來改變頁面
      that.setData({
          allDataList: res.data.list
        });
    },
    fail: function() {
      // fail
    },
    complete: function() {
      // complete
    }
})

請求結果如下

從結果中可以看出，數組中裝著的是一個個的對象，我們可以直接通過字段取到他們的值。所以我們在wxml文件中綁定數據的時候就可以這樣寫：

<view class="top"> 
    <!--頭像-->
    <image class="avator" src="{{item.profile_image}}" mode="aspectFit"></image>

    <!--標題、時間-->
    <view class="title-time">
        <text class="title">{{item.name}}</text>
        <text class="time">{{item.create_time}}</text>
    </view>

    <!--更多按鈕-->
    <image class="morebtnnormal" src="../../images/index/morebtnnormal.png" mode="center" ></image>
</view>

這樣就直接綁定了頭像 profile_image、名字 name、創建時間 create_time。其他部分也是用這種方式綁定的。

下拉刷新

實現下拉刷新有兩種方式，第一種是綁定scrollView的bindscrolltoupper方法

<scroll-view scroll-y bindscrolltoupper="scrolltoupper">

scrolltoupper:function(){
    //刷新數據
}

還有一種是在Page的onPullDownRefresh方法中發出請求刷新數據。

//監聽用戶下拉動作
onPullDownRefresh:function(){
    //刷新數據
},

上拉加載更多

上拉加載更多也有兩種方法，第一種是綁定scrollView的bindscrolltolower方法，但是列表數量少的時候，這個方法不靠譜，經常不會觸發

<scroll-view scroll-y bindscrolltolower ="scrolltolower">

scrolltolower:function(){
    //發出請求添加數據
}

第二種方法是在Page的onReachBottom方法中發出請求加載數據

onReachBottom:function(){
    currentPage++;
    //發出請求添加數據
}

項目地址：https://github.com/ZhangHangwei/WXBaiSi