your-project/
├── pages/            # 页面存放目录（核心业务）
│   └── index/
│       └── index.vue
├── static/           # 静态资源（图片、字体、第三方库）
├── components/       # 复用组件
├── uni_modules/      #  uni-app 模块化插件
├── api/              # 接口封装（建议手动创建）
├── store/            # Vuex 状态管理
└── manifest.json     # 应用配置（AppId、权限、小程序AppId）

// pages.json 配置示例
{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue" // 自动引入uView组件
    }
  }
}

<template>
  <button @click="handleLogin">登录</button>
</template>

<script>
export default {
  methods: {
    handleLogin() {
      // #ifdef MP-WEIXIN
      // 微信小程序逻辑：这里是获取手机号或用户信息
      uni.getUserProfile({
        desc: '用于完善会员资料',
        success: (res) => {
          console.log('小程序登录成功', res.userInfo);
          uni.setStorageSync('userInfo', res.userInfo);
        }
      });
      // #endif
      
      // #ifdef APP-PLUS
      // App 逻辑：调用 oauth 服务
      uni.login({
        provider: 'weixin',
        success: (loginRes) => {
          // 获取到 code 传给后端换取 openid
          this.$api.loginWithCode(loginRes.code);
        }
      });
      // #endif
    }
  }
}
</script>

/* 适配底部安全区的经典写法 */
.fixed-bottom-btn {
  position: fixed;
  bottom: 0;
  /* 兼容 iOS 11.2 以下 */
  padding-bottom: constant(safe-area-inset-bottom);
  /* 兼容 iOS 11.2 以上 */
  padding-bottom: env(safe-area-inset-bottom);
  background-color: #fff;
  width: 100%;
}

<!-- components/VideoCard.vue -->
<template>
  <view class="video-swiper">
    <swiper class="swiper" vertical :current="currentIndex" @change="onSwiperChange">
      <swiper-item v-for="(item, idx) in videoList" :key="item.id">
        <video 
          :id="`video-${idx}`"
          class="video-player" 
          :src="item.src" 
          :autoplay="false"
          :loop="true"
          object-fit="cover"
          :muted="false"
          :show-play-btn="false"
        />
        <view class="video-info">
          <text class="title">{{ item.title }}</text>
          <view class="like-btn" @click="handleLike(idx)">
            <image :src="item.isLiked ? '/static/liked.png' : '/static/like.png'" mode="widthFix"></image>
            <text>{{ item.likeCount }}</text>
          </view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      videoList: [
        { id: 1, src: 'https://...video1.mp4', title: '第一段视频', likeCount: 120, isLiked: false },
        { id: 2, src: 'https://...video2.mp4', title: '第二段视频', likeCount: 300, isLiked: true }
      ],
      videoContexts: {} // 存储视频控制对象
    };
  },
  methods: {
    // 滑动切换时触发
    onSwiperChange(e) {
      const oldIndex = this.currentIndex;
      const newIndex = e.detail.current;
      
      // 停止旧视频播放（释放资源，防止内存溢出）
      if (this.videoContexts[`video-${oldIndex}`]) {
        this.videoContexts[`video-${oldIndex}`].pause();
      }
      // 自动播放新视频
      if (this.videoContexts[`video-${newIndex}`]) {
        this.videoContexts[`video-${newIndex}`].play();
      }
      this.currentIndex = newIndex;
    },
    
    // 点赞逻辑
    handleLike(idx) {
      const item = this.videoList[idx];
      item.isLiked = !item.isLiked;
      item.likeCount = item.isLiked ? item.likeCount + 1 : item.likeCount - 1;
      
      // 触发震动反馈（仅App端支持，H5/小程序会忽略而不报错）
      // #ifdef APP-PLUS
      plus.device.vibrate();
      // #endif
      
      this.$forceUpdate(); // 简单粗暴更新视图，实际开发中推荐双向绑定
    },
    
    // 初始化所有视频控制对象
    initVideoContext() {
      this.videoList.forEach((_, idx) => {
        const videoId = `video-${idx}`;
        this.videoContexts[videoId] = uni.createVideoContext(videoId, this);
      });
      // 自动播放第一个
      if (this.videoContexts['video-0']) {
        this.videoContexts['video-0'].play();
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initVideoContext();
    });
  },
  // 页面卸载时销毁所有视频实例，防止后台播放
  beforeDestroy() {
    Object.keys(this.videoContexts).forEach(key => {
      this.videoContexts[key].pause();
    });
  }
};
</script>

<style scoped>
.video-swiper, .swiper, .video-player {
  width: 100%;
  height: 100vh; /* 关键：全屏高度 */
}
.video-info {
  position: absolute;
  bottom: 120rpx;
  right: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.like-btn image {
  width: 60rpx;
  height: 60rpx;
}
</style>