清凉一夏，“极客时间”陪你过暑假

---

前言

暑假即未来临，你有什么好的安排呢？上班、旅游、宅在家打游戏......无论怎么样，但愿你能抽出一点时间来学习，丰富本身。下面是我仿的极客时间小程序，作了一些总结，写给本身，也写给进来观看的你。

---

前期准备

• 前端开发工具：VSCode、微信web开发者工具
• 微信小程序组件和API：微信公众平台
• 数据存放方法：

1. 把数据存入到Easy Mock，再请求数据。
2. 另外建立一个.js文件存入数据，在须要的地方引入。
3. 存在全局下app.js中的globalData中，在引入的地方必定要加入var app = getApp();否则数据没法引入。
4. 还能够将数据存到你的服务器中，而后再向你的服务器进行请求数据。

• 界面测量工具：Mark Man
• 图标：Iconfont-阿里巴巴矢量图标库

---

主要功能

---

1. 两种在同页面切换不一样内容的方法

效果图

---

---

页面结构:

• 第一种是使用swiper组件,它是一个滑块视图容器。主要用到的属性有current、duration、bindchange。

1. current是指当前所在滑块的 index；
2. duration是指滑动动画时长，也可使用属性autoplay，当值为true时，会自动切换；
3. 使用bindchange属性是由于current改变时会触发change事件。
4. swiper-item组件仅能放在swiper组件中使用。小程序中的每一个swiper-item就是一个滑块。

• 在个人小程序中由于不是每一个滑块的结构都是同样的，但也有几个滑块的结构同样，我就使用了分开写和使用wx:for进行遍历。wxml:

使用这种交叉式的写法给后期界面跳转带来了很大的麻烦。

• js

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就行。

---

• 第二种直接用view组件来写。其中还有更简单的方法可让代码更加的简洁，就是在class属性值为course-tab-nav的view组件中直接用wx:for来进行遍历，后面的两个均可以不用写，直接写数据进来就行。我这里使用了更笨的方法，将每块都写了。

当 clickTab点击事件发生时，会判断 currentTab是否等于指定的值，当为 true时，会显示为 on的状态，而且会显示其内容。

• wxss

.course-tab-nav.on{
    color: #F94312;
    border-bottom: 5rpx solid #F94312;
}
复制代码

• js

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. 携参跳转界面

• 在同页面中针对不一样的点击事件跳转到相同页面，在跳转后的页面中显示相关的信息。

效果图

---

具体分析:

• 如何实现触发不一样的事件跳转到同一个界面而后在界面中显示只属于本身的信息？

1. 由于没有后端的支持，没法请求到可变的数据。只有默默的写一些数据进来，模拟一下。这时把全部须要在同一个界面显示的信息归类好。在这里我要提醒一下，不要在这种界面最上层的组件中使用wx:for。我在这里就踩了一个大坑，它把我全部的数据所有都循环出来了，并无获得我想要的效果，思考了许久才发现数据并不须要显示，只有当你须要看的时候它能显示出来就行。
2. 如何在你点击的时候进入的界面显示的是你的信息呢？界面如何感应到你的召唤?个人回答是你须要将你的信息进行排列，你的信息是以数组的形式进行存储，当外界传来的值对应着你数组的下标值时，就将数值做为你数组的下标，而后将数据进行输入。在点击事件中须要带参传入到跳转界面中。

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组件来实现这个视频播放功能。你也能够尝试一下其余方法，好比获取拍摄视频或从手机相册中选视频

<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
                })
            }
        })
    }
})
复制代码

---

结束语

通过这段时间的学习，发现本身的能力远远不够啊，遇到bug很难解决。之后还须要多加学习，智商不够，时间来凑，再难的关也有通关的一天。

---

最后的最后

若是想了解更多的话，能够查看个人项目地址。欢迎你们一块儿来讨论，提出您的想法。