UniApp实战：从零开发跨平台短视频应用全流程指南 | 移动开发教程

一、项目规划与技术选型

我们将开发一个名为”ShortClip”的短视频应用，主要功能包括：

• 多端兼容：同时支持iOS、Android和微信小程序
• 视频拍摄：调用设备摄像头录制短视频
• 视频编辑：添加滤镜、背景音乐和文字特效
• 社交功能：点赞、评论和用户关注系统
• 个性化推荐：基于用户行为的视频推荐算法

技术栈选择：

二、UniApp项目初始化

使用HBuilderX创建项目：

# 通过vue-cli创建项目
vue create -p dcloudio/uni-preset-vue shortclip-app

# 选择默认模板
? 请选择模板类型 (Use arrow keys)
❯ 默认模板 
  自定义模板

# 安装uView UI
npm install uview-ui

项目目录结构优化：

├── common                  # 公共资源
│   ├── css                 # 全局样式
│   ├── js                  # 公共工具函数
│   └── images              # 静态图片
├── components              # 公共组件
├── pages                   # 页面目录
│   ├── index               # 首页
│   ├── discover            # 发现页
│   ├── record              # 拍摄页
│   ├── message             # 消息页
│   └── profile             # 个人中心
├── static                  # 静态资源
├── store                   # Vuex状态管理
├── uni_modules             # 插件模块
└── main.js                 # 入口文件

三、核心功能实现

1. 视频拍摄模块

使用uni.chooseVideo和uni.chooseImage API：

// pages/record/record.vue
<template>
  <view class="record-container">
    <camera v-if="isCameraOpen" device-position="back"></camera>
    <button @tap="startRecord">开始录制</button>
    <button @tap="stopRecord">结束录制</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isCameraOpen: false,
      recorderManager: null
    }
  },
  methods: {
    startRecord() {
      this.recorderManager = uni.getRecorderManager()
      this.recorderManager.start({
        duration: 60000, // 最长60秒
        sampleRate: 44100,
        numberOfChannels: 2,
        format: 'mp4'
      })
    },
    stopRecord() {
      this.recorderManager.stop()
      this.recorderManager.onStop((res) => {
        this.$store.commit('video/setCurrentVideo', res.tempFilePath)
        uni.navigateTo({
          url: '/pages/edit/edit'
        })
      })
    }
  }
}
</script>

2. 视频编辑模块

实现滤镜选择和背景音乐添加：

// pages/edit/edit.vue
<template>
  <view>
    <video :src="videoPath" :style="filterStyle"></video>
    
    <scroll-view scroll-x class="filter-list">
      <view 
        v-for="(filter, index) in filters" 
        :key="index"
        @tap="selectFilter(filter)"
      >
        <image :src="videoPath" :style="getFilterStyle(filter)"></image>
        <text>{{filter.name}}</text>
      </view>
    </scroll-view>
    
    <button @tap="saveVideo">保存并发布</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoPath: '',
      currentFilter: null,
      filters: [
        {name: '原图', value: ''},
        {name: '怀旧', value: 'filter: sepia(100%)'},
        {name: '黑白', value: 'filter: grayscale(100%)'},
        {name: '高对比', value: 'filter: contrast(200%)'}
      ]
    }
  },
  computed: {
    filterStyle() {
      return this.currentFilter ? this.currentFilter.value : ''
    }
  },
  methods: {
    selectFilter(filter) {
      this.currentFilter = filter
    },
    getFilterStyle(filter) {
      return `width: 100px; height: 100px; ${filter.value}`
    },
    async saveVideo() {
      // 视频处理逻辑...
    }
  }
}
</script>

四、多端适配技巧

1. 平台条件编译

// #ifdef MP-WEIXIN
console.log('微信小程序特有逻辑')
// #endif

// #ifdef APP-PLUS
console.log('App端特有逻辑')
// #endif

// #ifdef H5
console.log('H5端特有逻辑')
// #endif

2. 统一API封装

// common/js/api.js
export const chooseMedia = () => {
  // #ifdef MP-WEIXIN
  return wx.chooseMedia()
  // #endif
  
  // #ifdef APP-PLUS || H5
  return new Promise((resolve) => {
    uni.chooseImage({
      success: resolve
    })
  })
  // #endif
}

3. 样式适配方案

/* 使用rpx单位保证多端尺寸一致 */
.video-container {
  width: 750rpx;
  height: 422rpx;
}

/* 平台特定样式调整 */
/* #ifdef MP-WEIXIN */
.nav-bar {
  padding-top: 20px;
}
/* #endif */

五、性能优化实践

1. 视频懒加载

<template>
  <view 
    v-for="item in videoList" 
    :key="item.id"
    class="video-item"
    @appear="loadVideo(item)"
  >
    <video 
      v-if="item.loaded" 
      :src="item.url" 
      controls
    ></video>
    <image v-else :src="item.cover"></image>
  </view>
</template>

<script>
export default {
  methods: {
    loadVideo(item) {
      this.$set(item, 'loaded', true)
    }
  }
}
</script>

2. 数据分页加载

async loadMore() {
  if (this.loading || this.noMore) return
  
  this.loading = true
  try {
    const res = await this.$api.getVideos({
      page: this.page + 1,
      size: 10
    })
    
    if (res.data.length) {
      this.videoList = [...this.videoList, ...res.data]
      this.page++
    } else {
      this.noMore = true
    }
  } finally {
    this.loading = false
  }
}

六、项目发布与调试

1. 微信小程序发布

1. 在manifest.json配置微信小程序AppID
2. 运行：npm run dev:mp-weixin
3. 使用微信开发者工具导入dist/dev/mp-weixin目录
4. 完成微信公众平台提审流程

2. App打包发布

1. 配置Android/iOS证书
2. 运行：npm run build:app-plus
3. 使用HBuilderX进行原生App打包
4. 提交到各应用商店

3. 多端调试技巧

• 使用Chrome调试H5端
• 使用微信开发者工具调试小程序
• 使用Safari调试iOS应用
• 使用Android Studio调试Android应用

七、常见问题解决方案

Q1: 视频在不同平台表现不一致？

解决方案：使用uni.createVideoContext统一控制视频播放，针对不同平台做条件编译处理。

Q2: 如何解决微信小程序包体积过大？

解决方案：

1. 使用分包加载功能
2. 压缩静态资源
3. 按需引入UI组件
4. 使用网络资源替代本地资源

Q3: App端视频录制卡顿？

解决方案：

• 降低视频分辨率
• 使用硬件加速
• 优化录制参数配置
• 使用原生插件增强性能

八、项目扩展方向

完成基础功能后，可以考虑以下扩展：

• 直播功能：集成腾讯云或阿里云直播SDK
• AR特效：使用百度AR或Face++实现面部特效
• 数据分析：集成友盟或Google Analytics分析用户行为
• 社交扩展：添加私信、群组等社交功能
• 商业化：接入广告系统和内购功能