电视剧看多了，就想仿个爱奇艺小程序

发布时间：2020-12-14 19:13:57 所属栏目：资源来源：网络整理

导读：听说讲正文前，都喜欢先唠会嗑，咱们先聊个五毛钱的，不知道大家最近有没有看啥电视剧，比如，emmmmm，《亲爱的，热爱的》(斜眼笑)(好的假装你们看过了，咱们可以接着聊了)。哇，杨紫小猴子超甜的有没有，老夫的少女心，比吃了蜜还甜，李现大概或许可能maybe

听说讲正文前，都喜欢先唠会嗑，咱们先聊个五毛钱的，不知道大家最近有没有看啥电视剧，比如，emmmmm，《亲爱的，热爱的》(斜眼笑)(好的假装你们看过了，咱们可以接着聊了)。哇，杨紫小猴子超甜的有没有，老夫的少女心，比吃了蜜还甜，李现大概或许可能maybe比我帅那么一丢丢，就一丢丢(是在下不要脸了，请忽略上面这句话谢谢！！！)。用爱奇艺看多了，就想仿个爱奇艺小程序来练练手(那是因为爱奇艺APP那玩意儿暂时还仿不出来)，虽说自己比较菜，写的不怎么样，但是咱们搞技术的，总得折腾一下嘛，有兴趣的东西就应该撸一个出来。好了五毛钱的聊完了，该讲正题了，还想聊天的再加五毛，一块也行，在座的各位都是大佬，多多指点一下下哈!蟹蟹蟹蟹。

效果展示

项目前准备

VS Code
微信web开发者工具以及它的云开发
微信开放文档
easymock
Vant Weapp
iconfont
还有就是数据，有点伤感难过，数据自己在爱奇艺官网一个个找的，所以小程序里面的数据有一(da)部分是重复的，咱也不敢说，咱也不敢问(等我学会了爬虫，再去爬你几千条数据解解气)

项目界面

首页

首页长成这个样子，一眼看过去还是挺好写的，布局什么的都比较有规律，对于小白来说还是很友善的，没有花里胡哨的排列。头部用的是小程序官方的swiper组件,炒鸡好用。不过有一点就是，轮播图的指示点一般都是在中间靠下面一点，而正好这里有文字，会重叠，没有绿色的指示点(爱奇艺偏爱环保健康的green)又不好看，脑壳疼，咋办？加几行css就行了。

.wx-swiper-dots {
  position: relative;
  left: unset !important;
  right: -40rpx;
}
.wx-swiper-dots.wx-swiper-dots-horizontal {
  margin-bottom: -5rpx;
}
复制代码

left不是可继承的样式，unset了之后，就相当于重置掉了，就可以开开心心的把指示点的位置换掉了。下面基本上就是一个 wx:for能解决的事情，对于这样的布局，用flex是再好不过的了，简单方便又快捷，顺便给大家推荐一篇详细讲解flex的文章，看了说不定你也会收获一些东西。

wxml

<!-- miniprogram/pages/homepage/homepage.wxml -->
<view class="homePage">
  <view class="head">
    <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-color="{{indicatorColor}}" indicator-active-color="{{indicatorActiveColor}}" circular="{{circular}}">
      <block wx:for="{{imgUrl}}" wx:key="{{index}}">
        <view bindtap="navigate" data-set="{{item}}">
          <swiper-item>
            <image src="{{item.img}}" mode="aspectFill" class="slide-image"></image>
            <view class="desc">{{item.desc}}</view>
          </swiper-item>
        </view>
      </block>
    </swiper>
    <view class="header">
      <image class="iqiyi" src="{{iqiyi}}" mode="widthFix" />
      <view class="name">{{headerName}}</view>
      <view class="searchBox" bindtap="toSearch">
        <icon class="iconSearch" type="search" size="15" color="rgb(47,244,44)"></icon>
        <view class="searchName">{{searchName}}</view>
      </view>
    </view>
  </view>
  <view class="content">
    <view class="contentVideoes" wx:for="{{videoes}}" wx:key="index">
      <!-- 板块标题 -->
      <view class="title">{{item.listTitle}}</view>
      <!-- 板块内容，四个内容 -->
      <view class="contain">
        <view class="video" wx:for="{{item.videoList}}" wx:key="index" bindtap="navigate" data-set="{{item}}">
          <view class="topPart">
            <image class="img" src="{{item.img}}" mode="widthFix" />
            <view class="count">{{item.count}}</view>
            <view class="vip" wx:if="{{item.vip}}">VIP</view>
          </view>
          <view class="downPart">
            <view class="videoTitle">{{item.title}}</view>
            <view class="videoDesc">{{item.desc}}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>
复制代码

wxss

/* miniprogram/pages/homepage/homepage.wxss */
.homePage {
  width: 100%;
}
.homePage .head {
  position: relative;
  width: 100%;
}
.homePage .head .slide-image {
  width: 100%;
}
.homePage .head .desc {
  position: absolute;
  left: 20rpx;
  bottom: 30rpx;
  font-weight: bold;
  font-size: 35rpx;
  color: #ffffff
}
.homePage .head .header {
  width: 100%;
  position: absolute;
  top: 10rpx;
  left: 10rpx;
  display: flex
}
.homePage .head .header .iqiyi {
  width: 75rpx;
  display: inline-block;
  top: 20rpx;
  left: 10rpx;
  margin: auto
}
.homePage .head .header .name {
  font-size: 30rpx;
  color: #2BFA39;
  font-weight: bold;
  display: inline-block;
  margin: auto
}
.homePage .head .header .searchBox {
  flex: 1;
  background-color: rgba(255,255,0.5);
  border-radius: 42rpx;
  margin: auto 30rpx;
  height: 60rpx;
  position: relative;
}
.homePage .head .header .searchBox .iconSearch {
  margin: auto 20rpx;
  position: absolute;
  top: 50%;
  left: 20%;
  transform: translate(-50%,-50%)
}
.homePage .head .header .searchBox .searchName {
  display: inline-block;
  font-size: 30rpx;
  color: #ffffff;
  margin-left: 50%;
  transform: translate(-50%,0)
}


.homePage .content {
  width: 100%;
}
.homePage .content .contentVideoes {
  padding-right: 15rpx;
}
.homePage .content .contentVideoes .title {
  font-size: 35rpx;
  font-weight: bold;
  margin: 25rpx 0 25rpx 25rpx;
}
.homePage .content .contentVideoes .contain {
  width: 100%;
}
.homePage .content .contentVideoes .contain .video {
  display: inline-block;
  width: 50%;
  margin-bottom: 10px;
  padding-left: 15rpx;
  box-sizing: border-box
}
.homePage .content .contentVideoes .contain .video .topPart {
  position: relative;
}
.homePage .content .contentVideoes .contain .video .topPart .img {
  display: block;
  width: 100%; 
}
.homePage .content .contentVideoes .contain .video .topPart .count {
  position: absolute;
  right: 15rpx;
  bottom: 15rpx;
  font-size: 25rpx;
  color: #fff;
}
.homePage .content .contentVideoes .contain .video .topPart .vip {
  position: absolute;
  top: 0rpx;
  right: 20rpx;
  font-size: 25rpx;
  background-color: #E1B876;
  color: #FFF;
  padding: 0rpx 10rpx 5rpx;
  border-radius: 0 0 10rpx 10rpx;
}
.homePage .content .contentVideoes .contain .video .downPart {
  padding-right: 10rpx;
}
.homePage .content .contentVideoes .contain .video .downPart .videoTitle {
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 15rpx;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.homePage .content .contentVideoes .contain .video .downPart .videoDesc {
  font-size: 25rpx;
  margin-bottom: 20rpx;
  color: #999;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.wx-swiper-dots {
  position: relative;
  left: unset !important;
  right: -40rpx;
}

.wx-swiper-dots.wx-swiper-dots-horizontal {
  margin-bottom: -5rpx;
}
复制代码

热点页

小程序家的video组件，瞄一分钟文档，就能上手了。暖暖的，很贴心。

<video src="{{ item.video}}" duration="{{item.duration }}" object-fit="cover" id="{{ item.id}}"  bindtap="handleVideoPlay" data-vid="{{item.id}}" ></video>
复制代码

小红心的切换则是根据从云数据库中取得的数据,动态切换。

<image src='{{item.isLike ? likeStar : star}}' class='littleStar' mode='aspectFit'></image>
复制代码

视频下面的布局就让万能的flex来解决叭。所以我决定送flex一朵花花。

wxml

<!-- miniprogram/pages/hot/hot.wxml -->
<view class='hotVideo'>
  <view class='video' wx:for="{{entities}}" wx:key="id" data-index="{{index}}">
    <video src="{{ item.video}}" duration="{{item.duration }}" object-fit="cover" id="{{ item.id}}"  bindtap="handleVideoPlay" data-vid="{{item.id}}" ></video>
    <view class='title'>{{item.description}}</view>
    <!-- 视频下面的用户信息以及视频热度和分享按钮,用一个盒子来包裹这些信息 -->
    <view class='infor'>
      <view class="infor-left">
        <image src='{{item.userAvatar}}' class='userAvatar' mode="aspectFit"></image>
        <view class='userNickName'>{{item.userNickName}}</view>
      </view>
      <view class="infor-right">
        <view class='star' bindtap="wxLike" data-index="{{index}}" >
          <image src='{{item.isLike ? likeStar : star}}' class='littleStar' mode='aspectFit'></image>
          <view class='hotStar'>{{item.star}}</view>
        </view>
        <view class='share' bindtap="wxShare">
          <image src='{{weixin}}' class='wxLogo' mode='aspectFit'></image>
          <view class='wxshare'>分享</view>
        </view>
      </view>
    </view>
  </view>
  <van-notify id="van-notify" />
  <van-toast id="van-toast" />
</view>
复制代码

wxss

/* miniprogram/pages/hot/hot.wxss */
.hotVideo {
  width: 100%;
}
.hotVideo .video {
  position: relative;
}
.hotVideo .video video{
  width: 100%;
  z-index: 5;
}
.hotVideo .video .title {
  position: absolute;
  top: 20rpx;
  left: 20rpx;
  z-index: 10;
  color: #fff;
  font-size: 36rpx;
  font-weight: bold;
}
.hotVideo .video .infor{
  height: 125rpx;
  position: relative;
  display: flex;
}
.hotVideo .video .infor .infor-left {
  height: 100%;
  display: flex;
}
.hotVideo .video .infor .infor-left .userAvatar {
  width: 75rpx;
  height: 75rpx;
  margin: 20rpx 15px 30rpx 30rpx;
  border-radius: 50%;
  display: inline-block;
}
.hotVideo .video .infor .infor-left .userNickName {
  display: inline-block;
  line-height: 125rpx;
  font-size: 30rpx;
  font-weight: bold;
}
.hotVideo .video .infor .infor-right {
  flex: 1;
  height: 100%;
}
.hotVideo .video .infor .infor-right .star {
  width: 150rpx;
  height: 60rpx;
  border: 1px solid #DDD;
  border-radius: 42rpx;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 30%;
  display: flex;
}
.hotVideo .video .infor .infor-right .star .littleStar {
  width: 40rpx;
  height: 60rpx;
  margin: auto 15rpx 20rpx;
  float: left;
  align-items: center
}
.hotVideo .video .infor .infor-right .star .hotStar {
  line-height: 60rpx;
  font-size: 30rpx;
}
.hotVideo .video .infor .infor-right .share {
  width: 150rpx;
  height: 60rpx;
  border: 1px solid #DDD;
  border-radius: 42rpx;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 5%;
  display: flex;
}
.hotVideo .video .infor .infor-right .share .wxLogo {
  width: 40rpx;
  height: 60rpx;
  margin: auto 15rpx 20rpx;
  float: left;
  align-items: center
}
.hotVideo .video .infor .infor-right .share .wxshare {
  line-height: 60rpx;
  font-size: 30rpx;
}
/* .hotVideo .video .infor{
  height: 125rpx;
  position: relative
}
.hotVideo .video .userAvatar {
  width: 75rpx;
  height: 75rpx;
  float: left;
  margin: 20rpx 15px 40rpx 30rpx;
  border-radius: 50%;
}
.hotVideo .video .userNickName {
  line-height: 125rpx;
  font-size: 27rpx;
  display: inline-block;
}
.hotVideo .video .infor .star {
  width: 150rpx;
  height: 60rpx;
  border: 1px solid #DDD;
  border-radius: 42rpx;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  margin-left: 50%;
  display: flex;
}
.hotVideo .video .infor .star .littleStar {
  width: 40rpx;
  height: 60rpx;
  margin: auto 15rpx 20rpx;
  float: left;
  align-items: center
}
.hotVideo .video .infor .star .hotStar {
  line-height: 60rpx;
  font-size: 30rpx;
}
.hotVideo .video .infor .share {
  width: 150rpx;
  height: 60rpx;
  border: 1px solid #DDD;
  border-radius: 42rpx;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  margin-left: 75%;
  display: flex;
}
.hotVideo .video .infor .share .weixin {
  width: 40rpx;
  height: 60rpx;
  margin: auto 15rpx 20rpx;
  float: left;
  align-items: center
}
.hotVideo .video .infor .share .wxshare {
   line-height: 60rpx;
   font-size: 30rpx;
} */
复制代码

风云榜

头部的横向滚动，在scroll-view标签上设置scroll-x为true，并且加上white-space:nowrap;就能实现横向滚动了。标签页用的是vant的tab标签页，就省下自己写原生标签页的功夫可以去写别的了，不过小白白可以有空手动写一个，不算很难的。

wxml

<!-- miniprogram/pages/ranking/ranking.wxml -->
<view class="ranking">
  <!-- 风云榜头部的分类 -->
  <view class="ranking-header">
    <!-- 滑动的部分 -->
    <scroll-view class="header" scroll-x="{{true}}" scroll-left="{{scrollLeft}}">
      <view wx:for="{{headerList}}" wx:key="index" class="headerList {{currentIndex === index?'selected': ''}}" data-index="{{index}}" bindtap="selected">
        {{item}}
      </view>
    </scroll-view>
    <!-- 箭头部分 -->
    <view class="header-arrow" bindtap='showAllSort'>
      <view class=" {{isShow ? 'down-arrow up-arrow': 'down-arrow'}} "></view>
    </view>
    <!-- 导航栏部分 -->
    <view wx:if="{{isShow}}" class="{{isShow ? 'header-sort opacity' : ''}}">
      <van-transition name="fade-down">
        <view wx:for="{{headerList}}" wx:key="index" class='headerSort' data-index="{{index}}" bindtap="selected">
          {{item}}
        </view>
      </van-transition>
    </view>
  </view>
  <!-- 下面的排行榜部分 -->
  <view class="ranking-container">
    <van-tabs active="{{ active }}" animated>
      <!-- 热度榜 -->
      <van-tab title="热度榜">
        <!-- 包裹着一个影视信息的小盒子 -->
        <view class="ranking-content" wx:for="{{programs}}" wx:key="{{index}}">
          <view class="ranking-list" data-set="{{item}}" bindtap="navigate">
            <!-- 左边的图片部分 -->
            <view class="list-left">
              <image src="{{item.img}}" mode='aspectFill' class='image' />
              <view class="list-number">{{index + 1}}</view>
              <view class="list-vip" wx:if="{{item.vip}}">VIP</view>
              <view class="list-count">{{item.count}}</view>
            </view>
            <view class="list-right">
              <view class="list-title">{{item.title}}</view>
              <view class="list-desc">{{item.desc}}</view>
              <view class="list-hot">热度 {{item.hot}}</view>
            </view>
          </view>
        </view>
      </van-tab>
      <!-- 飙升榜 -->
      <van-tab title="飙升榜">
        <!-- 包裹着一个影视信息的小盒子 -->
        <view class="ranking-content" wx:for="{{programs}}" wx:key="{{index}}">
          <view class="ranking-list" data-set="{{item}}" bindtap="navigate">
            <!-- 左边的图片部分 -->
            <view class="list-left">
              <image src="{{item.img}}" mode='aspectFill' class='image' />
              <view class="list-number">{{index + 1}}</view>
              <view class="list-vip" wx:if="{{item.vip}}">VIP</view>
              <view class="list-count">{{item.count}}</view>
            </view>
            <view class="list-right">
              <view class="list-title">{{item.title}}</view>
              <view class="list-desc">{{item.desc}}</view>
              <view class="list-hot">热度 {{item.hot}}</view>
            </view>
          </view>
        </view>
      </van-tab>
      <!-- 播放指数榜 -->
      <van-tab title="播放指数榜">
        <!-- 包裹着一个影视信息的小盒子 -->
        <view class="ranking-content" wx:for="{{programs}}" wx:key="{{index}}">
          <view class="ranking-list" data-set="{{item}}" bindtap="navigate">
            <!-- 左边的图片部分 -->
            <view class="list-left">
              <image src="{{item.img}}" mode='aspectFill' class='image' />
              <view class="list-number">{{index + 1}}</view>
              <view class="list-vip" wx:if="{{item.vip}}">VIP</view>
              <view class="list-count">{{item.count}}</view>
            </view>
            <view class="list-right">
              <view class="list-title">{{item.title}}</view>
              <view class="list-desc">{{item.desc}}</view>
              <view class="list-hot">热度 {{item.hot}}</view>
            </view>
          </view>
        </view>
      </van-tab>
    </van-tabs>
  </view>
</view>
复制代码

wxss

/* miniprogram/pages/ranking/ranking.wxss */
.ranking {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.ranking .ranking-header {
  width: 100%;
  height: 80rpx;
  background-color: #F6F6F6;
  border-bottom: 2rpx solid #E3E3E3;
}
.ranking .ranking-header .header {
  width: 90%;
  height: 100%;
  white-space: nowrap;
  overflow-x: auto;
}
/* .header::-webkit-scrollbar {
  display: none;
} */
.ranking .ranking-header .header .headerList {
  display: inline-block;
  margin: 0rpx 25rpx;
  text-align: center;
  line-height: 80rpx;
  
}
.ranking .ranking-header .header .headerList.selected {
  color: green;
}
.ranking .ranking-header .header-arrow {
  position: absolute;
  right:0;
  top:0;
  overflow: hidden;
  width: 80rpx;
  height: 80rpx;
  background-color: #F6F6F6;
  border-left: 1px solid #E3E3E3
}
.ranking .ranking-header .header-arrow .down-arrow {
  width: 25rpx;
  height: 25rpx;
  border-bottom: 2px solid #999;
  border-right: 2px solid #999;
  margin: 40rpx auto 0rpx;
  transform: rotateZ(45deg) translate(-50%,-50%);
  transition: transform 0.5s;
}
.ranking .ranking-header .header-arrow .down-arrow.up-arrow {
  transform: rotateZ(-135deg) translate(25%,25%);
}
.ranking .ranking-header .header-sort {
  width: 100%;
  border-bottom: 1px solid #EFEFEF;
  background-color: rgba(255,0.8);
  position: absolute;
  z-index: 5;
  transition: opacity 3s;
}

.ranking .ranking-header .header-sort .headerSort {
  width: 20%;
  display: inline-block;
  font-size: 25rpx;
  text-align: center;
  margin: 17rpx auto;
  opacity: 0.8;
}
.ranking .ranking-container {
  width: 100%;
}
.ranking .ranking-container .ranking-content {
  width: 100%;
}
.ranking .ranking-container .ranking-content .ranking-list {
  display: flex;
}
.ranking .ranking-container .ranking-content .ranking-list .list-left {
  display: inline-block;
  margin: 20rpx;
  position: relative;
}
.ranking .ranking-container .ranking-content .ranking-list .list-left .image {
  width: 270rpx;
  height: 150rpx;
}
.ranking .ranking-container .ranking-content .ranking-list .list-left .list-number {
  position: absolute;
  left: 0rpx;
  top: 0rpx;
  font-size: 35rpx;
  background-color: #FC2932;
  width: 45rpx;
  height: 45rpx;
  padding-right: 10rpx;
  text-align: center;
  border-radius: 0 5rpx 45rpx 0;
}
.ranking .ranking-container .ranking-content .ranking-list .list-left .list-vip {
  position: absolute;
  top: 0rpx;
  right: 5rpx;
  font-size: 25rpx;
  background-color: #E1B876;
  color: #FFF;
  padding: 0rpx 10rpx 5rpx;
  border-radius: 0 0 10rpx 10rpx;
}
.ranking .ranking-container .ranking-content .ranking-list .list-left .list-count {
  position: absolute;
  right: 20rpx;
  bottom: 20rpx;
  font-size: 20rpx;
  color: #fff;
}
.ranking .ranking-container .ranking-content .ranking-list .list-right {
  display: inline-block;
  position: relative;
  top: 15rpx;
  padding: 10rpx;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  flex: 1;
}
.ranking .ranking-container .ranking-content .ranking-list .list-right .list-title {
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 15rpx;
  overflow:hidden;
}
.ranking .ranking-container .ranking-content .ranking-list .list-right .list-desc {
  font-size: 30rpx;
  margin-bottom: 20rpx;
  color: #999;
  overflow: hidden;
  text-overflow:ellipsis;
}
.ranking .ranking-container .ranking-content .ranking-list .list-right .list-hot {
  font-size: 25rpx;
  color: #999
}
复制代码

还有几个页面比较简单，就不介绍了。

功能的实现

高亮模糊查询

这里我只是实现了一个简单版的模糊查询，也参考了一下网上的思路(好吧是我太菜了)，毕竟有问题就找度娘嘛。实时获取到输入框中的文字value，用filter和include方法筛选出包含value的名字，放入filter_list数组中,再遍历filter_list数组，将其中的字段切分为三段，然后就是这样的

当value和其中的一项相等时，就改变颜色，怎么样，是不是还挺简单的

onChange(event) {
    const list = this.data.allName;//这里是所有的名字
    const value = event.detail; //实时获取输入框中的文字
    const result = [] 
    if (event.detail !== '') {//当输入框中有文字的话，就筛选出含有value的名字
      let filter_list = [...new Set(//用Set是因为我的数据中有重复的字段
        list.filter(item => {
          return item.includes(value)
        })
      )]
      filter_list.forEach(item => {//遍历
      // 将名字切割成三段放入数组中，和value一样的字段的就换个颜色
        let index1 = item.indexOf(value)
        let index2 = value.length
        let string1 = item.slice(0,index1)
        let string2 = item.slice(index1,index1 + index2)
        let string3 = item.slice(index1 + index2)
        console.log([string1,string2,string3])
        result.push([string1,string3])
      })
      this.setData({
        value,result
      })
    } else {
      this.setData({
        result: null
      })
    }
  },复制代码

<!-- 这里是搜索到的结果 -->
  <view class="results">
    <view class="result" wx:for="{{result}}" wx:key="index" bindtap="navigate" data-name='{{item}}'>
      <text  wx:for="{{item}}" class="{{item == value ? 'highlight' : 'normal' }}" wx:key="index">{{item}}</text>  
    </view>
  </view>
复制代码

页面的带参跳转

我给每个需要跳转的元素都绑定了设置了自定义属性data-*和用bind-tap绑定了navigate点击事件，方便在js中获取当前需要的信息,在跳转的时候用路由传参的形式将信息携带过去，JSON.stringify()方法可以将对象或者数组转换为一个 JSON字符串

 navigate(e) {
    const dataSet = e.currentTarget.dataset.set;
    const item = JSON.stringify(dataSet);
    wx.navigateTo({
      url: '../show/show?item=' + item
    })
  },复制代码

然后在接收的时候使用JSON.parse()方法用来解析JSON字符串，构造由字符串描述的JavaScript值或对象。提供可选的reviver函数用以在返回之前对所得到的对象执行变换(操作).就可以在该显示的界面获取到信息了

onLoad: function (options) {
    const item = JSON.parse(options.item);
    this.setData({
      entities : item
    })
  },复制代码

云数据库的增删改查

这里大概是最让我崩溃的一个环节了，其中的辛酸苦辣(抹眼泪)，就是有句mmp不知当讲不当讲，同样的操作，上午不能执行成功，然后检查代码查bug翻文档，下午就能执行成功了，回头一看，我又没改代码，怎么就成功了呢，咋的，觉着我好欺负？

添加数据和删除数据

exports.main = async (event,context) => {
  if(event.isAdd) {//idAdd是传过来的参数，为true时，往wxlike集合中添加字段
    return db.collection('wxlike').add({
      data: {
        id: event.index,Videoes:event.entity
      }
    })
      .then(res => {
        console.log(res)
      })
  } else {//isAdd为false时，根据id查到这个字段，然后删除
    return db.collection('wxlike').where({
      id: event.index
    }).remove();
  }
}
复制代码

在iqiyi这个集合中根据name属性找到相应的字段并且获取id，再根据id去更新字段。

exports.main = async (event,context) => {
  let entities = await db.collection('iqiyi').where({
    name: event.name
  })
  .get();
  let id = entities._id;
  return await db.collection('iqiyi').doc(id).update({
    data: {
      hotspot: {
        videoes:event.entities
      }
    }
  }).then(res => {
  })
}
复制代码

根据传过来的name属性从集合中查找数据

exports.main = async (event,context) => {
  
  let entities = await db.collection('iqiyi').where({
    name: event.name
  })
  .get()
  return entities
}
复制代码

看，数据库增删查改就这么几行代码就能搞定，真是幸福感爆棚。

只能同时播放一个的视频

在热点页，视频都是以单个video的形式存在,

<video src="{{ item.video}}" duration="{{item.duration }}" object-fit="cover" id="{{ item.id}}"  bindtap="handleVideoPlay" data-vid="{{item.id}}" ></video>
复制代码

emmmmmm,这一段好像上面看过了，没事那就在看一遍吧。我们需要控制它不能同时播放两个视频，点击下一个视频时，上一个视频需要暂停掉，不然同时两个视频的声音播放，我觉得脑壳可能会炸掉。我们给每个video标签都绑定handleVideoPlay方法，并且设置自定义属性data-vid="{{item.id}}"方便来获取他们的id来分别控制和播放

handleVideoPlay(e) {
    if (this.data.currentVideo) {//currentVideo是当前播放的视频，初始值为null
      this.data.currentVideo.pause();//如果存在currentVideo则停掉
    }
    const Vid = e.target.id;//获取点击的视频的id
    if (Vid) {
      // 创建 video 上下文 VideoContext 对象。
      const currentVideo = wx.createVideoContext(`${Vid}`);
      this.setData({
        currentVideo
      })
      currentVideo.play();
    }
  },复制代码

结语

总体来看吧，这个demo主要是就是切页面，云数据库的操作和数据渲染了，呐呐呐，这是github地址,虽然页面和功能不多，在写的时候还是磕磕绊绊的遇到了各种各样的问题，不过最终还算是完成了。以后再接再厉鸭！！！最后祝看文章的小姐姐都能有杨紫小猴子辣么漂酿，，小哥哥都比李现现还帅，单身的程序猿都能找到像佟年和韩商言一般的好对象，蟹蟹蟹蟹啦，，留下个赞再走叭！！！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!