微信小程序?qū)崙?zhàn)--Jgank小程序開發(fā)

發(fā)表時(shí)間：2021-4-6

發(fā)布人：葵宇科技

瀏覽次數(shù)：67

寫在前面

最近突然想學(xué)下小程序，說不定以后會(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)的開發(fā)者賬號(hào)，去官網(wǎng)注冊(cè)，賬號(hào)類型選擇『小程序』。

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

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

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

開始

首先做一下全局的配置信息。
樣式只有一個(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 就是所有的分類，用來和頁(yè)面進(jìn)行數(shù)據(jù)綁定，curTab 用來記錄當(dāng)前選項(xiàng)卡的 id ，classifyClick 用來監(jiān)聽選項(xiàng)卡的點(diǎn)擊事件，點(diǎn)擊不同的選項(xiàng)卡，就修改 curTab 為對(duì)應(yīng)的值，頁(yè)面上通過判斷 curTab 的變化來顯示不同的內(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>