寫在前面

最近突然想學下小程序，說不定以后會用的到，就算用不到，也能在簡歷上多添一筆（哈哈…）。最好的學習方式當然是以實戰項目驅動，所以我打算用 gank.io（干貨集中營）的 api 數據做一個小程序，剛好界面也直接照搬了，懶得自己設計，畢竟我對自己的審美認知還是很到位的，哈哈～

先看官方的效果

整體可以看作兩部分，上面是顯示分類的選項卡，下面就是具體分類的內容了，然后內容又有三種布局，推薦（混合布局），福利（兩列圖片），其他分類（普通文字）。

準備

首先要先有一個微信公眾平臺的開發者賬號，去官網注冊，賬號類型選擇『小程序』。

這里要吐槽下，如果你之前用郵箱注冊了訂閱號的開發或者注冊了微信開放平臺，那就不能用這個郵箱了，意思就是如果你同時需要開發公眾號，小程序，還需要使用微信開放平臺（微信登錄，支付，分享等等），那你就要用三個郵箱！！！不知道微信為什么要這么搞，反正作為一個用戶來說，我用著很不爽。

注冊完賬號后，跟著提示一步一做就行了，最后就是下載微信的小程序開發工具進行開發。

上面的都搞定了后就開始看官方文檔吧，文檔還是挺詳細的，把 簡易教程，框架，先看一遍，組件 和 API 打開看下有哪些東西，看完后就可以開始擼代碼了（文檔不是很多啦，不要虛）。

開始

首先做一下全局的配置信息。
樣式只有一個，就是所有頁面高度百分百：
app.wxss

page {
  height: 100%;
}

然后是主題顏色，頁面等信息的配置：
app.json

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarTitleText": "Jgank",
    "backgroundColor": "#088",
    "navigationBarBackgroundColor": "#088",
    "backgroundTextStyle": "dark"
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

從配置信息可以看出，我們有一個頁面 pages/index/index。

選項卡

先完成上面的選項卡部分，選項卡是一個橫向的可以拖動的列表，看下官方文檔的組件部分可以發現，scroll-view 可以實現該效果，看下代碼：
index.wxml

<scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%">
  <view wx:for="{{classify}}" wx:key="id" data-type="{{item.id}}"  class="scroll-view-item_H {{curTab==item.id?'sv-item-on':'sv-item-off'}}" bindtap="classifyClick">
    {{item.name}}
  </view>
</scroll-view>

對應的樣式：
index.wxss

.scroll-view_H{
  white-space: nowrap;
}

.scroll-view-item_H{
  display: inline-block;
  line-height: 80rpx;
  width: 180rpx;
  text-align: center;
}

.sv-item-on{
  background-color: #0aa;
  color: #ddd;
}

.sv-item-off{
  background-color: #088;
  color: #fff;
}

對應的業務邏輯;
index.js

Page({
  data:{
    classify: [{ id: 0, name: "推薦" }, 
    { id: 1, name: "福利" }, 
    { id: 2, name: "Android" }, 
    { id: 3, name: "ios" },
    { id: 4, name: "休息視頻" }, 
    { id: 5, name: "拓展資源" }, 
    { id: 6, name: "前端" }],
    curTab: 0
  },
  classifyClick:function(e){
    //判斷如果點擊的是當前的選項卡則不做任何處理
    if (this.data.curTab == e.currentTarget.dataset.type){
      return
    }
    console.log("切換")
    this.setData({
      curTab: e.currentTarget.dataset.type
    })
  }
})

classify 就是所有的分類，用來和頁面進行數據綁定，curTab 用來記錄當前選項卡的 id ，classifyClick 用來監聽選項卡的點擊事件，點擊不同的選項卡，就修改 curTab 為對應的值，頁面上通過判斷 curTab 的變化來顯示不同的內容。
所以頁面上再添加如下代碼：
index.wxml

<scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%">
  <view wx:for="{{classify}}" wx:key="id" data-type="{{item.id}}"  class="scroll-view-item_H {{curTab==item.id?'sv-item-on':'sv-item-off'}}" bindtap="classifyClick">
    {{item.name}}
  </view>
</scroll-view>

<block wx:if="{{curTab ==0}}"> {{classify[curTab].name}} </block>
<block wx:elif="{{curTab==1}}"> {{classify[curTab].name}} </block>
<block wx:elif="{{curTab==2}}"> {{classify[curTab].name}} </block>
<block wx:elif="{{curTab==3}}"> {{classify[curTab].name}} </block>
<block wx:elif="{{curTab==4}}"> {{classify[curTab].name}} </block>
<block wx:elif="{{curTab==5}}"> {{classify[curTab].name}} </block>
<block wx:else> {{classify[curTab].name}} </block>

下面看下效果：

這次就先完成選項卡功能，內容部分下次在說。

源碼地址

https://github.com/jianshijiuyou/Jgank