回顾我们智密科技前面发布的干货代码实操文章，把如何在uni-app中利用《HbuilderX + uni-app + 智密原生仿抖音上下滑动插件》快速创建自己的短视频APP demo，并讲解分析了代码以后呢，一个最基础的短视频APP就可以成功上线了（我们就叫他"瓜皮视频"吧），让我们来看一下瓜皮视频和抖系APP的画面对比吧！（如果你还没看过，戳这里➡️代码实战：10分钟搞定uni-app框架下短视频APP开发，干货满满

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

小红包 界面分析

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

实现小红包

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

  .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(),

在原先的配置中，昵称信息这里是距离底部15px，也就是如下代码。

asvListPlayer.getView('titleBox').isLayer().position(['left', 'bottom']).width(screenWidth * 0.6).height(100).bgc('#55000000').marginLeft(15).marginBottom(15)

而我们需要给购物车留出大概40像素的地方，再加上上下间隔之后，我们把这块的15px调整成为75px就可以完美留出来购物车的地方，如下所示。

asvListPlayer.getView('titleBox').isLayer().position(['left', 'bottom']).width(screenWidth * 0.6).height(100).bgc('#55000000').marginLeft(15).marginBottom(75)

然后我这里直接给出购物车部分相关的代码，首先是json配置部分：

asvListPlayer.getView('goodCar').isLayer().position(['left', 'bottom']).width(110).height(40).bgc('#55000000').marginLeft(15).marginBottom(15).radius(30)
            .children([
              asvListPlayer.getView('goodCarImage').isImage().position(['left']).width(30).height(30).marginTop(5).marginLeft(5).toJSON(),
              asvListPlayer.getView('goodCarText').isText().position(['left']).width(80).height(30).marginLeft(45).marginTop(5).lines(1).fontSize(16).color('#ffffff')
            ])
          .toJSON()

这里我们设计大概是110px的宽度，然后购物车标记是30px，留出来80px左右的位置提供给视频，这里就先写上购物车三个字，然后这里我在给绑定数据部分的代码。

this.genData().forEach(item => {
          let data = asvListPlayer.getItem(item.i)
            .video(item.v)
            .cover(item.c)
            .bindImage('head', 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3533321036,2623280788&fm=15&gp=0.jpg', true)
            .bindImage('like', item.like ? 'https://files.qiadoo.com/CareBoBo/Common/2021/05/17/c94c1a75-094a-482a-9acf-f1eefbd24792.png':'https://files.qiadoo.com/CareBoBo/Common/2021/05/17/5a17a78c-f923-41f3-8916-271b4d5d528f.png')
            .bindText('likeText', parseInt((item.i * 1 + 1) * (new Date().getTime()) / 1000000000000) + '.4w')
            .bindImage('commit', 'https://files.qiadoo.com/CareBoBo/Common/2021/05/17/003910f2-92cf-40c5-9d8a-870401be6e41.png')
            .bindText('commitText', parseInt((item.i * 1 + 1) * (new Date().getTime()) / 10000000000) + '')
            .bindImage('share', 'https://files.qiadoo.com/CareBoBo/Common/2021/05/17/353edf1a-c2f1-481a-87fc-b9d5df98fb9e.png')
            .bindText('shareText', '分享')
            .bindText('userName', `UserName`)
            .bindImage('userIcon', 'https://files.qiadoo.com/CareBoBo/Common/2021/05/17/89898f94-c3b8-4e14-9d06-7ccb1f27d3ab.png')
            .bindText('title', `这是第${item.i * 1}个视频，悄悄是离别的笙箫，沉默是今晚的康桥，再别康桥，再见我终将逝去的青春，愿一切安好，愿你永远都在。`)
            .bindImage('goodCarImage', 'https://files.qiadoo.com/CareBoBo/Common/2021/06/20/35177433-c373-49c7-8c21-f7db6c9d5c8f.png')
            .bindText('goodCarText', '购物车')
            .toJSON()
          datas.push(data)
        })

这里新增的关键就是最后俩个，也就是下面俩个：

.bindImage('goodCarImage', 'https://files.qiadoo.com/CareBoBo/Common/2021/06/20/35177433-c373-49c7-8c21-f7db6c9d5c8f.png')
.bindText('goodCarText', '购物车')

不得不说，插件本身已经帮我们做好大量配置的工作了，这里我只需要bindImage和bindText就可以将购物车标记的图片和文字绑定完成啦。虽然这里我们还没有绑定事件，但是长城也不是一日建成的，一步步扩展功能呗。先看看效果图。

虽然不能说很完美，但是已经开始有那味道了，现在我把改造一半的代码直接给大家，有意思的可以继续接着扩展我们的瓜皮视频哦。

智密科技，专业开发各类Uniapp原生插件、目前交付给客户的插件已经超过100个各类插件，正在陆续整理上架并分享一切关于Uni-app的教程、资讯。欢迎加入QQ群与作者一起讨论uni-app！