微信小程序實戰--Jgank小程序開發

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

發布人(rén)：融晨科技

浏覽次數：67

寫在(zài)前面

最近突然想學下小程序，說(shuō)不(bù)定以(yǐ)後會用的(de)到(dào)，就(jiù)算用不(bù)到(dào)，也(yě)能在(zài)簡曆上(shàng)多添一筆（哈哈…）。最好的(de)學習方式當然是(shì)以(yǐ)實戰項目驅動，所以(yǐ)我打算用 gank.io（幹貨集中營）的(de) api 數據做一個(gè)小程序，剛好界面也(yě)直接照搬了(le／liǎo)，懶得自己設計，畢竟我對自己的(de)審美認知還是(shì)很到(dào)位的(de)，哈哈～

先看官方的(de)效果

整體可以(yǐ)看作兩部分，上(shàng)面是(shì)顯示分類的(de)選項卡，下面就(jiù)是(shì)具體分類的(de)内容了(le／liǎo)，然後内容又有三種布局，推薦（混合布局），福利（兩列圖片），其他(tā)分類（普通文字）。

準備

首先要(yào / yāo)先有一個(gè)微信公衆平台的(de)開發者賬号，去官網注冊，賬号類型選擇『小程序』。

這(zhè)裏要(yào / yāo)吐槽下，如果你之(zhī)前用郵箱注冊了(le／liǎo)訂閱号的(de)開發或者注冊了(le／liǎo)微信開放平台，那就(jiù)不(bù)能用這(zhè)個(gè)郵箱了(le／liǎo)，意思就(jiù)是(shì)如果你同時(shí)需要(yào / yāo)開發公衆号，小程序，還需要(yào / yāo)使用微信開放平台（微信登錄，支付，分享等等），那你就(jiù)要(yào / yāo)用三個(gè)郵箱！！！不(bù)知道(dào)微信爲(wéi / wèi)什麽要(yào / yāo)這(zhè)麽搞，反正作爲(wéi / wèi)一個(gè)用戶來(lái)說(shuō)，我用着很不(bù)爽。

注冊完賬号後，跟着提示一步一做就(jiù)行了(le／liǎo)，最後就(jiù)是(shì)下載微信的(de)小程序開發工具進行開發。

上(shàng)面的(de)都搞定了(le／liǎo)後就(jiù)開始看官方文檔吧，文檔還是(shì)挺詳細的(de)，把簡易教程，框架，先看一遍，組件和(hé / huò) API 打開看下有哪些東西，看完後就(jiù)可以(yǐ)開始撸代碼了(le／liǎo)（文檔不(bù)是(shì)很多啦，不(bù)要(yào / yāo)虛）。

開始

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

page {   height: 100%; }

然後是(shì)主題顔色，頁面等信息的(de)配置：
app.json

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

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

選項卡

先完成上(shàng)面的(de)選項卡部分，選項卡是(shì)一個(gè)橫向的(de)可以(yǐ)拖動的(de)列表，看下官方文檔的(de)組件部分可以(yǐ)發現，scroll-view 可以(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>

對應的(de)樣式：
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; }

對應的(de)業務邏輯;
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){     //判斷如果點擊的(de)是(shì)當前的(de)選項卡則不(bù)做任何處理     if (this.data.curTab == e.currentTarget.dataset.type){       return     }     console.log("切換")     this.setData({       curTab: e.currentTarget.dataset.type     })   } })

classify 就(jiù)是(shì)所有的(de)分類，用來(lái)和(hé / huò)頁面進行數據綁定，curTab 用來(lái)記錄當前選項卡的(de) id ，classifyClick 用來(lái)監聽選項卡的(de)點擊事件，點擊不(bù)同的(de)選項卡，就(jiù)修改 curTab 爲(wéi / wèi)對應的(de)值，頁面上(shàng)通過判斷 curTab 的(de)變化來(lái)顯示不(bù)同的(de)内容。
所以(yǐ)頁面上(shàng)再添加如下代碼：
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>