寫(xiě)在前面

最近突然想學(xué)下小程序，說(shuō)不定以后會(huì)用的到，就算用不到，也能在簡(jiǎn)歷上多添一筆（哈哈…）。最好的學(xué)習(xí)方式當(dāng)然是以實(shí)戰(zhàn)項(xiàng)目驅(qū)動(dòng)，所以我打算用 gank.io（干貨集中營(yíng)）的 api 數(shù)據(jù)做一個(gè)小程序，剛好界面也直接照搬了，懶得自己設(shè)計(jì)，畢竟我對(duì)自己的審美認(rèn)知還是很到位的，哈哈～

先看官方的效果

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

準(zhǔn)備

首先要先有一個(gè)微信公眾平臺(tái)的開(kāi)發(fā)者賬號(hào)，去官網(wǎng)注冊(cè)，賬號(hào)類型選擇『小程序』。

這里要吐槽下，如果你之前用郵箱注冊(cè)了訂閱號(hào)的開(kāi)發(fā)或者注冊(cè)了微信開(kāi)放平臺(tái)，那就不能用這個(gè)郵箱了，意思就是如果你同時(shí)需要開(kāi)發(fā)公眾號(hào)，小程序，還需要使用微信開(kāi)放平臺(tái)（微信登錄，支付，分享等等），那你就要用三個(gè)郵箱?。?！不知道微信為什么要這么搞，反正作為一個(gè)用戶來(lái)說(shuō)，我用著很不爽。

注冊(cè)完賬號(hào)后，跟著提示一步一做就行了，最后就是下載微信的小程序開(kāi)發(fā)工具進(jìn)行開(kāi)發(fā)。

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

開(kāi)始

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

page {
  height: 100%;
}

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

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

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

選項(xiàng)卡

先完成上面的選項(xiàng)卡部分，選項(xiàng)卡是一個(gè)橫向的可以拖動(dòng)的列表，看下官方文檔的組件部分可以發(fā)現(xiàn)，scroll-view 可以實(shí)現(xiàn)該效果，看下代碼：
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>

對(duì)應(yīng)的樣式：
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;
}

對(duì)應(yīng)的業(yè)務(wù)邏輯;
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){
    //判斷如果點(diǎn)擊的是當(dāng)前的選項(xiàng)卡則不做任何處理
    if (this.data.curTab == e.currentTarget.dataset.type){
      return
    }
    console.log("切換")
    this.setData({
      curTab: e.currentTarget.dataset.type
    })
  }
})

classify 就是所有的分類，用來(lái)和頁(yè)面進(jìn)行數(shù)據(jù)綁定，curTab 用來(lái)記錄當(dāng)前選項(xiàng)卡的 id ，classifyClick 用來(lái)監(jiān)聽(tīng)選項(xiàng)卡的點(diǎn)擊事件，點(diǎn)擊不同的選項(xiàng)卡，就修改 curTab 為對(duì)應(yīng)的值，頁(yè)面上通過(guò)判斷 curTab 的變化來(lái)顯示不同的內(nèi)容。
所以頁(yè)面上再添加如下代碼：
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>

下面看下效果：

這次就先完成選項(xiàng)卡功能，內(nèi)容部分下次在說(shuō)。

源碼地址

https://github.com/jianshijiuyou/Jgank