本文作者Harvie_Z ，已經(jīng)獲得授權(quán)

話不多說，先看效果圖

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

小程序文件結(jié)構(gòu)

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

• wxml ： 頁面結(jié)構(gòu)，類似html。
• wxss ： 頁面樣式表，類似css。
• json ： 頁面配置
• js ：頁面邏輯。

程序配置

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

• 注冊頁面

    "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": "推薦關(guān)注",
              "iconPath": "images/tabBar/tabBar_new_click_icon.png",
              "selectedIconPath": "images/tabBar/tabBar_new_icon.png"
            }
        }]
  },

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

• 網(wǎng)絡(luò)超時時間和調(diào)試開關(guān)

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

  networkTimeout配置的是網(wǎng)絡(luò)超時時間，這里的時間單位是毫秒，這里配置的也就是10秒超時。debug控制是否開啟調(diào)試，如果開啟了，可以看到log打印。

基本的配置搞定后，就可以開始填內(nèi)容了。

頂部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結(jié)構(gòu)循環(huán)渲染出5個Item
• 為它們綁定一個點擊方法switchTab
• 設(shè)置一個自定義屬性data-idx用來記錄每個Item的索引，以便在點擊的時候能夠知道是哪個Item被點擊。

內(nèi)容列表

<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循環(huán)渲染出列表。

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

使用網(wǎng)絡(luò)數(shù)據(jù)渲染頁面

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

要使用網(wǎng)絡(luò)數(shù)據(jù)當然得先進行網(wǎng)絡(luò)訪問，微信已經(jīng)提供了網(wǎng)絡(luò)請求的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", // 設(shè)置請求的 header
    success: function(res){
      console.log(res);
      //通過修改綁定的數(shù)組來改變頁面
      that.setData({
          allDataList: res.data.list
        });
    },
    fail: function() {
      // fail
    },
    complete: function() {
      // complete
    }
})

請求結(jié)果如下

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

<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、創(chuàng)建時間 create_time。其他部分也是用這種方式綁定的。

下拉刷新

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

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

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

還有一種是在Page的onPullDownRefresh方法中發(fā)出請求刷新數(shù)據(jù)。

//監(jiān)聽用戶下拉動作
onPullDownRefresh:function(){
    //刷新數(shù)據(jù)
},

上拉加載更多

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

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

scrolltolower:function(){
    //發(fā)出請求添加數(shù)據(jù)
}

第二種方法是在Page的onReachBottom方法中發(fā)出請求加載數(shù)據(jù)

onReachBottom:function(){
    currentPage++;
    //發(fā)出請求添加數(shù)據(jù)
}

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