使用APICloud开发多端短视频应用

近期有开发者制作了一套APICloud的教程，包含AVM多端开发框架教程和APICloud的云数据开发，并用APICloud开发了一个短视频的多端应用。

本文节选了案例实战的部分，重点介绍几个功能的前端实现。

一、效果预览

首先我们先来看一下实现效果

二、项目前端实现

本项目中前端采用APICloud AVM多端开发技术进行开发，要点包括 swiper 轮播图、网络请求封装等。使用 APICloud 多端技术进行开发，实现一套代码多端运行，支持编译成 Android & iOS App 以及微信小程序。

1、APICloud使用步骤：

（1）下载 APICloud Studio 3 作为开发工具。下载地址：www.apicloud.com/studio3

（2）注册账号后在控制台创建app，控制台地址：www.apicloud.com/console

可以在控制台创建

也可以在APICloud Studio 3直接创建项目

2、编写首页轮播图

设置stml模板轮播内容

<swiper class="swiper" :circular="false" :vertical="true" @change="onchange">
			<swiper-item class="swiper-item" v-for="item,index in videoList">
				<video :src="item.src" :controls="false" :id="'video'+index" onclick="togglePause" onpause="onpause"
					onplay="onplay" onended="onended"></video>
			</swiper-item>
		</swiper>

编写script数据和方法

import '../../components/tabbar.stml'
export default {
	name: "tpl",
	apiready() {
		api.setStatusBarStyle({
			style: "light",
			color: "-"
		});
	},
	data() {
		return {
			isShow: "none",
			videoContext: null,
			current: 0,
			page: 1,
			videoList: [
				{
					id: "000",
					nickname: "老陈打码",
					content: "新年快乐，万事如意！",
					like: "3.5w",
					share: "3821",
					collect: "2988",
					comment: "3475",
					isLike: false,
					pubtime: "2022-01-10 01:30",
					headimg: "https://a415432669.github.io/shortvideo/000.jpg",
					src