uniapp短视频APP继续改造升级：加入购物车与红包功能

回顾上一次我们成功使用HbuilderX + uni-app + 智密原生仿抖音上下滑动插件创建了属于自己的第一个短视频App，在这里我给他取名瓜皮视频，然后我又使用了官方的demo进行了一波改造，接下来看看我们的瓜皮视频与抖音的对比图:

 实际还是有一些细微的区别的，但是呢相似度和流畅度已经算得上是不错的了。实现了基础的功能，我们不免要看看还有啥功能可以附带上。这里我们看了下，短视频App不免在视频页增加了“小红包”和“购物车”的功能，这是俩个流量收割利器，这里我们接着上回的项目，继续来扩展功能。

---

技术实现

• 开发环境：HbuilderX + nodejs
• 技术框架：uniapp + vue2.x
• 测试环境：App端(Android + IOS)
• 代码：开源
• SDK: 

---

小红包 界面分析

智密原生仿抖音上下滑动插件使用的是给asv_list_player组件传入控件配置的方式去控制原生控件的展示，所以界面上很简单只有这写代码

<template>
  <view>
    <asv_list_player ref="listPlayer" class="player"></asv_list_player>
    <bottom-popover v-if="showBottomPopover" ref="popover" @close="onClosePopover">
      <t-pop-commit-list></t-pop-commit-list>
    </bottom-popover>
  </view>
</template>

实现小红包

在这里我们实现“小红包”的功能固然也可以使用传入控件配置的方式，但是考虑到还有红包进度条以及控制显隐，这里我们可以用nvue布局，自己实现一个红包控件，上代码

<template>
  <view>
    <asv_list_player ref="listPlayer" class="player"></asv_list_player>
    <!-- 这下面就是我们新增的红包控件，为了方便我们使用了简单的组件，圈圈 + 红包 -->
    <view class="float-red-paper">
      <image class="float-red-paper-elem" mode="widthFix" src="../../static/icon_redPaper.png"></image>
    </view>
    <bottom-popover v-if="showBottomPopover" ref="popover" @close="onClosePopover">
      <t-pop-commit-list></t-pop-commit-list>
    </bottom-popover>
  </view>
</template>

  .float-red-paper {
    position: fixed;
    top: 80px;
    left: 15px;
    width: 60px;
    height: 60px;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 100%;
  }
  .float-red-paper-elem {
    width: 40px;
  }

在这里需要注意几点，首先nvue的控件是从上到下依次从前到后的层级排序的，并且无法通过zindex调整元素层级，因此我们插入“小红包”要在asv_list_player之后。css的话不支持层级语法，因此这里我们还是采用BEM命名的方式来写样式。现在我们看看加上“小红包”的效果，虽然这里我们还没添加完点击事件啥的，后面再来补充嘛。

购物车 界面分析

实现完成了小红包，接下来我们要实现购物车的功能，因为这里购物车是可能每个视频都会有的，并且每个视频关联的数据可能不一样，因此我们直接通过插件自带的配置JSON来处理。

 在这里我们构思的是将购物车设置在昵称简介下面，也就是绿色的区域，然后将昵称信息向上调整，也就是蓝色区域。

---

实现购物车

首先我们改造之前得先看一下原先的配置

asvListPlayer.getView('titleBox').isLayer().position(['left', 'bottom']).width(screenWidth * 0.6).height(100).bgc('#55000000').marginLeft(15).marginBottom(15).radius(10)
            .children([
              asvListPlayer.getView('userBox').isLayer().position(['left']).width('100%').height('auto').marginLeft(10).marginTop(10)
                .children([
                  asvListPlayer.getView('userIcon').isImage().position('left').width(15).height(15).marginTop(3).radius(10).toJSON(),
                  asvListPlayer.getView('userName').isText().position('left').width('100%').height(20).lines(2).color('#ffffff').marginLeft(20).toJSON(),
                ])
                .toJSON(),
              asvListPlayer.getView('title').isText().position('left').width('100%').height('auto').color('#ffffff').marginLeft(10).marginTop(35).marginBottom(10).fontSize(14).marginRight(10).toJSON(),
            ])
            .toJSON(),