清涼一夏，「極客時間」陪你過暑假

時間 2019-11-17

標籤清涼極客時間陪你暑假简体版

原文原文鏈接

前言

暑假即未來臨，你有什麼好的安排呢？上班、旅遊、宅在家打遊戲......無論怎麼樣，但願你能抽出一點時間來學習，豐富本身。下面是我仿的極客時間小程序，作了一些總結，寫給本身，也寫給進來觀看的你。html

前期準備

前端開發工具：VSCode、微信web開發者工具
微信小程序組件和API：微信公衆平臺
數據存放方法：

把數據存入到Easy Mock，再請求數據。
另外建立一個.js文件存入數據，在須要的地方引入。
存在全局下app.js中的globalData中，在引入的地方必定要加入var app = getApp();否則數據沒法引入。
還能夠將數據存到你的服務器中，而後再向你的服務器進行請求數據。

界面測量工具：Mark Man
圖標：Iconfont-阿里巴巴矢量圖標庫

主要功能

1. 兩種在同頁面切換不一樣內容的方法

效果圖

頁面結構:前端

第一種是使用swiper組件,它是一個滑塊視圖容器。主要用到的屬性有current、duration、bindchange。

current是指當前所在滑塊的 index；
duration是指滑動動畫時長，也可使用屬性autoplay，當值爲true時，會自動切換；
使用bindchange屬性是由於current改變時會觸發change事件。
swiper-item組件僅能放在swiper組件中使用。小程序中的每一個swiper-item就是一個滑塊。

在個人小程序中由於不是每一個滑塊的結構都是同樣的，但也有幾個滑塊的結構同樣，我就使用了分開寫和使用wx:for進行遍歷。wxml:

使用這種交叉式的寫法給後期界面跳轉帶來了很大的麻煩。

data: {
    currentTab: 0,
    num: 1,
    pages: []
  },
  swiperTab: function(e) {
    // console.log(e);
    let number = e.detail.current + 1;  
    this.setData({
      currentTab: e.detail.current,
      num: number
    });
  },
onLoad: function(options) {
    this.setData({
    //把數據寫在全局下，數據從這引入
      pages: app.globalData.pages
    })
  }
複製代碼

咱們發現當滑塊變化時下面的數字也跟着對應變化，這主要用到了current屬性的值，current的值是從0開始計數，而下面對應的數字是從1開始計數，只要將他的值加1後賦給number就行。git

第二種直接用view組件來寫。其中還有更簡單的方法可讓代碼更加的簡潔，就是在class屬性值爲course-tab-nav的view組件中直接用wx:for來進行遍歷，後面的兩個均可以不用寫，直接寫數據進來就行。我這裏使用了更笨的方法，將每塊都寫了。

當 clickTab點擊事件發生時，會判斷 currentTab是否等於指定的值，當爲 true時，會顯示爲 on的狀態，而且會顯示其內容。

wxss

.course-tab-nav.on{
    color: #F94312;
    border-bottom: 5rpx solid #F94312;
}
複製代碼

data: {
    currentTab: 0,
    chooseClass: [],
    videoClass: [],
    weClass: []
  },
  clickTab: function(e) {
    var index = e.currentTarget.dataset.index
    // console.log(index);
    this.setData({
      currentTab: index
    });
  },
onLoad: function (options) {
   this.setData({
      currentTab: 0,
      //數據從app.js中的globalData中引入
      chooseClass: app.globalData.chooseClass,
      videoClass: app.globalData.videoClass,
      weClass: app.globalData.weClass
    })
  },  
複製代碼

2. 攜參跳轉界面

在同頁面中針對不一樣的點擊事件跳轉到相同頁面，在跳轉後的頁面中顯示相關的信息。

效果圖

具體分析:

如何實現觸發不一樣的事件跳轉到同一個界面而後在界面中顯示只屬於本身的信息？

由於沒有後端的支持，沒法請求到可變的數據。只有默默的寫一些數據進來，模擬一下。這時把全部須要在同一個界面顯示的信息歸類好。在這裏我要提醒一下，不要在這種界面最上層的組件中使用wx:for。我在這裏就踩了一個大坑，它把我全部的數據所有都循環出來了，並無獲得我想要的效果，思考了許久才發現數據並不須要顯示，只有當你須要看的時候它能顯示出來就行。
如何在你點擊的時候進入的界面顯示的是你的信息呢？界面如何感應到你的召喚?個人回答是你須要將你的信息進行排列，你的信息是以數組的形式進行存儲，當外界傳來的值對應着你數組的下標值時，就將數值做爲你數組的下標，而後將數據進行輸入。在點擊事件中須要帶參傳入到跳轉界面中。

onLoad: function (options) {
   // console.log(app);
   var fullpage = app.globalData.fullpage;
   this.setData({
     fullpage: fullpage[options.index]
   })
 },
複製代碼

options.index就是外面傳進來的參數，也就是fullpage數組的下標值。

learnMore: function(e) {
   var index = e.currentTarget.dataset.index;
   // console.log(index);
   wx.navigateTo({
     url: '../items/detail/detail?index=' + index,
   })
 },
 watchMore: function(e) {
   var index = e.currentTarget.dataset.index;    
   wx.navigateTo({
     url: '../items/video/video?index=' + index,
   })
 },
 readMore: function(e) {
   var index = e.currentTarget.dataset.index + 16;
   wx.navigateTo({
     url: '../items/detail/detail?index=' + index,
   })
 },
複製代碼

wx.navigateTo API中的url屬性提供須要跳轉的應用內非tabBar 的頁面的路徑 , 路徑後能夠帶參數。參數與路徑之間使用?分隔，參數鍵與參數值用=相連，不一樣參數用&分隔。
在這裏我栽的最久的坑就是我不知道如何去找到對應的值將它傳入到跳轉界面中去。搜尋許久，發現遠在天邊近在眼前，最大的功勞莫歸功於它data-index。它會獲取當前currentTarget的下標。這個下標值是隨着事件變化的，將值與你要獲取第幾個信息進行一一對應，再將值傳入進去，就能夠實現了。真是幫了我一個大忙。

附加

小程序的視頻播放

直接用video組件，將視頻地址輸入便可。
有的地址進行加密，在網上並不能獲取到，這時能夠將視頻存到本地，在到本地進行請求，可是當別人在本身手機看的時候，就看不到視頻了。
再不行的話，你就須要有個服務器了，能夠將視頻下載以後傳到你的服務器內，生成一個可用地址，再進行請求就OK啦。

<view class="head_video">
        <video class="dplayer-video dplayer-video-current" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"></video>
    </view>
複製代碼

我直接用video組件來實現這個視頻播放功能。你也能夠嘗試一下其餘方法，好比獲取拍攝視頻或從手機相冊中選視頻github

<view class="container">
    <video src="{{src}}"></video>
    <button bindtap="bindButtonTap">獲取視頻</button>
</view>
複製代碼

Page({
    bindButtonTap: function() {
        var that = this
        wx.chooseVideo({
            sourceType: ['album','camera'],
            maxDuration: 60,
      camera: 'back',
            success: function(res) {
                that.setData({
                    src: res.tempFilePath
                })
            }
        })
    }
})
複製代碼