回顾上一次我们成功使用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(),