在微信小程序上做一個「博客園年度總結」：小程序部分交互效果實現

上一章講了後端部分的代碼邏輯，傳送門：在微信小程序上做一個「博客園年度總結」：後端部分

本章繼續寫一下小程序端的邏輯

因爲前端涉及到一些交互效果，加上我對前端也不太熟悉，所以這部分會重點寫一下我自己覺得比較好玩的地方

 

1、上下滑動切換頁面效果

這其實是一個輪播圖效果，通過上下滑動來切換頁面

小程序中的 swiper 滑塊視圖容器，可以實現這個效果

官方文檔：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

 

在swiper中放置swiper-item組件，一個swiper-item代表一張"輪播圖"

<swiper vertical="true" class="cn_container" easing-function="linear" bindchange="swiperChange" bindanimationfinish="swiperFinish">
  <swiper-item>
    ... ...
  </swiper-item>
    
  <swiper-item>
    ... ...
  </swiper-item>
</swiper>

vertical="true"表示滑動方向爲縱向（小程序默認爲橫向滑動）

bindchange事件監聽頁面滑動，滑動時會觸發，它綁定了函數swiperChange函數，後面會詳細說下這個函數的作用

 

2、控制底部icon的變化

在滑動到最後一頁前，底部的icon爲"向上的箭頭"，

滑動到最後一頁時，底部變爲【生成我的年度封面】按鈕

要實現這個功能，我們需要知道當前是否滑動到了最後一個swiper-item

在swiper標籤中有一個bindchange屬性，它能監聽到當前處於哪個輪播圖

 

在js文件中新建一個函數swiperChange()

swiperChange (e) {
  // console.log(e)
  if (e) {
    let current = e.detail.current;
    let source = e.detail.source
    if (source === 'touch') {
      this.setData({
        index:current
      })
    }
  }
  // console.log(this.data.index)
}

 它的作用是獲取當前所處的swiper-item，也就是 e.detail.current

 

每次滑動切換輪播圖時，會觸發這個事件，然後index值會隨之更新，這樣在前端用if條件控制一下 ，就可以顯示不同的內容了

 

比如一共有6張輪播圖，如果index<5，就顯示箭頭icon；如果index>5，就顯示按鈕

<view class="bottom_up" wx:if="{{index < 5}}"> 
<!-- 判斷當前是切到哪個輪播圖，不是最後一個時，顯示上滑箭頭 -->
  <image src="/images/up2.svg" mode="scaleToFill" class="jiantou"></image>
</view>

<navigator class="bottom_up" wx:if="{{index == 5}}" url="/pages/cnblogs_year_cover/cnblogs_year_cover" open-type="navigate"> 
<!-- 判斷當前是切到哪個輪播圖，當切到最後一個時，不顯示上滑箭頭 -->
  <view class="fengmian">生成我的年度封面</view>
</navigator>

 

3、點擊按鈕跳轉至「年度封面」

這個比較簡單，在page中新建一個頁面，然後使用<navigator>導航過去即可

<navigator class="bottom_up" wx:if="{{index == 5}}" url="/pages/cnblogs_year_cover/cnblogs_year_cover" open-type="navigate"> 
  <view class="fengmian">生成我的年度封面</view>
</navigator>

url屬性填寫目標頁page

 

4、回看年度總結

點擊【回看年度總結】會跳轉到年度總結首頁，其實它的實現方法和上面跳轉到【年度封面】的方法一樣，只要導航到【年度總結】page頁面就好了

跳轉至【年度封面】用的是「非編程式導航」，這裏我們用「編程式導航實現」

 

打開【年度封面】的wxml文件cnblogs_year_cover.wxml

  <view>
    <button type="default" class="clear_style" bindtap="gotoreport">
      <text class="button_text">回看年度總結</text>
    </button>
  </view>

bindtap屬性綁定gotoreport函數，導航跳轉功能在這個函數中實現

打開js文件cnblogs_year_cover.js

  //通過編程式導航跳轉到報告頁面
  gotoreport(e) {
    
    wx.navigateTo({
      url: '/pages/cnblogs_year_report/cnblogs_year_report'
    })
  },

 

5、分享年度封面

這裏實現的效果是點擊按鈕，能夠生成截圖進行分享

<button>按鈕有一個 open-type 屬性，當 open-type="share"時，可以點擊按鈕進行小程序分享

  <view>
    <button type="default" open-type="share" class="clear_style">
      <text class="button_text">分享封面</text>
    </button>
  </view>

同時需要在js文件中編輯 onShareAppMessage()函數

/**
   * 用戶點擊右上角分享
   */
  onShareAppMessage() {
    return {
      title: '我的博客園年度總結',
      path: '/pages/cnblogs_year_report/cnblogs_year_report', // 當對方點擊你分享的小程序時到達的頁面
      // imageUrl: 'xxx'  //轉發時顯示此圖片，若沒有此參數，默認是傳送當前頁面截圖
    }
  }

結語

因爲前端涉及到很多樣式代碼，開發時爲了調整元素居中，換行、間距等等花了很多時間，

並且這份代碼比較冗餘，有些css代碼我也不知道有沒有生效😂

所以完整代碼會在後面統一放出來，不單獨拿出來講了