更新记录

1.0.0（2024-12-13）

初始化

平台兼容性

Vue2	Vue3
×	√

App	快应用	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
HBuilderX 4.36 app-uvue	×	×	×	×	×	×

钉钉小程序	快手小程序	飞书小程序	京东小程序	鸿蒙元服务
×	×	×	×	×

H5-Safari	Android Browser	微信浏览器(Android)	QQ浏览器(Android)	Chrome	IE	Edge	Firefox	PC-Safari
×	×	×	×	×	×	×	×	×

仿抖音快手刷视频插件组件文档

注意：源码运行前需要在项目manifest.json文件勾选video模块，否则运行后显示黑屏

使用说明

将插件下载到项目uni_modules目录下
参考下面页面使用示例代码即可
为了性能更优，组件固定了video的渲染数量，所以数据源固定大于3条以上。
文档补充中....

属性	类型	说明
finished	boolean	是否所有数据已加载完成
videoList	UTSJSONObject	数据源
deleHeight	number	要减去的高度，例如tabbar

方法
- loadNext 触底加载回调
- toolsFn 右侧图标点击回调

扫码体验Android端在demo中的效果

Android体验二维码

扫码体验Android端在项目中的效果

Android体验二维码

已测试机型

系统	机型	系统版本	测试情况
Android	红米K60	android14	运行丝滑
ios	IphoneXR	ios15	运行丝滑

页面使用示例

<template>
    <view>
        <xw-appx-pL-video v-if="isShow" v-model:isFinished="finished" :videoList="videoList" @loadNext="loadNext" @toolsFn="toolsFn" :deleHeight="0">
            <!-- 自定义右侧内容 -->
            <!-- <template #tools="{item}">
                <view class="v-user-avart-wrap">
                    <image class="v-user-avart" :src="`${(item as VideoType).avatar}`" />
                </view>
            </template> -->
            <!-- 自定义左侧视频信息内容 -->
            <!-- <template #vInfo="{item}">
                <view class="user-info">
                    <text style="color:#fff;">
                        自定义用户信息模块
                    </text>
                </view>
            </template> -->
        </xw-appx-pL-video>
    </view>
</template>

<script setup>
    import { CallObjectResult, VideoType, ToolsType } from "@/uni_modules/xw-appx-pL-video/index.uts";
    const isShow = ref(false);

    const videoList = ref({
        list: [] as VideoType[]
    });

    type RequestType = {
        pagesize : number,
        page : number
    }

    let params = {
        pagesize: 12,//必须是3的倍数
        page: 1
    } as RequestType;
    let finished = false;

    //初始化数据
    const get = () => {
        const requestDb = uniCloud.importObject('videoList', { customUI: false });
        requestDb.getVideo<CallObjectResult>(params).then((res : CallObjectResult) => {
            console.log('视频列表请求结果===', res)
            if (res.code == 0) {

                if (res.detail.length < params.pagesize) {
                    finished = true;
                }

                let arr = JSON.parse<VideoType[]>(JSON.stringify(res.detail)) as VideoType[];

                if ((videoList.value['list'] as VideoType[]).length == 0) {
                    videoList.value['list'] = arr;
                } else {
                    videoList.value['list'] = (videoList.value['list'] as VideoType[]).concat(arr);
                }
            }
        }).catch(err => {
            console.error(err)
            uni.showToast({
                title: '接口异常，请稍后再试!',
                icon: 'none'
            })
        })

    };
    //请求下一页
    const loadNext = () => {
        if (finished) return;
        ++params.page;

        get();
    };

    //右侧工具栏
    const toolsFn = (item : ToolsType) => {
        console.log('点击的参数=====', item);
    };

    onReady(() => {
        isShow.value = true;
        get();
    })
</script>

<style>
    .v-user-avart {
        width: 100rpx;
        height: 100rpx;
        border-radius: 100rpx;
    }
</style>

接口数据格式


[
    {
        "userId": "666dd802f366f40a8b9a4dd4",//用户ID
        "avatar": "https://env-00jxgwsep3px.normal.cloudstatic.cn/snsPro/image/1728312053918.jpg",//头像
        "nickname": "追风少女心💓( ˘ ³˘)💋",//昵称
        "isfollow": false,
        "videoId": "672b6be8e4ca03e4581a0063",//视频ID
        "playurl": "xxxxxxxxxx/mu38_video/1730898885724/compress_video_1125321996.m3u8",//视频链接
        "poster": "xxxxxxxxxx/mu38_video/1730898885724/compress_video_1125321996.m3u8?vframe/jpg/offset/1/&e=1732097696&token=IAM-C1JVXCM70fL6bT80pA5w1YLPCXa7xisCoyR3eVhr:FZRg1qngVIo8BPLTvFObPNUtgAA=",
        "vduser": "追风少女心💓( ˘ ³˘)💋",//视频用户
        "vdtitle": "仿抖音视频仿抖音视频仿抖音视频仿抖音视频仿抖音视频仿抖音视频",//视频标题
        "loop": true,//循环播放
        "duration": 29970,//视频时长
        "playIng": false,//播放状态
        "muted": false,//是否静音
        "likeSum": 0,//视频被点赞数量
        "isLiked": false,//当前视频是否已点赞
        "commemtSum": 0,//评论的数量
        "shareSum": 0,//被分享的数量
    },
    {
        "userId": "666dd802f366f40a8b9a4dd4",
        "avatar": "https://env-00jxgwsep3px.normal.cloudstatic.cn/snsPro/image/1728312053918.jpg",
        "nickname": "追风少女心💓( ˘ ³˘)💋",
        "isfollow": false,
        "videoId": "672c903442a21686318cd4ad",
        "playurl": "xxxxxxxxxx/mu38_video/1730973720501/compress_video_1200159408.m3u8",
        "poster": "xxxxxxxxxx/mu38_video/1730973720501/compress_video_1200159408.m3u8?vframe/jpg/offset/1/&e=1732097696&token=IAM-C1JVXCM70fL6bT80pA5w1YLPCXa7xisCoyR3eVhr:inBQHVoZ_y-v_QO2-npeVpSvzvY=",
        "vduser": "追风少女心💓( ˘ ³˘)💋",
        "vdtitle": "仿抖音视频仿抖音视频仿抖音视频仿抖音视频仿抖音视频仿抖音视频",
        "loop": true,
        "duration": 9100,
        "playIng": false,
        "muted": false,
        "likeSum": 0,
        "isLiked": false,
        "commemtSum": 0,
        "shareSum": 0
    },
    {
        "userId": "666dd802f366f40a8b9a4dd4",
        "avatar": "https://env-00jxgwsep3px.normal.cloudstatic.cn/snsPro/image/1728312053918.jpg",
        "nickname": "追风少女心💓( ˘ ³˘)💋",
        "isfollow": false,
        "videoId": "672c911ebaea7915f45e1b09",
        "playurl": "xxxxxxxxxx/mu38_video/1730973966319/compress_video_1200405117.m3u8",
        "poster": "xxxxxxxxxx/mu38_video/1730973966319/compress_video_1200405117.m3u8?vframe/jpg/offset/1/&e=1732097696&token=IAM-C1JVXCM70fL6bT80pA5w1YLPCXa7xisCoyR3eVhr:RJvmNrC5LKkD_eWUT1o3Tid1WWI=",
        "vduser": "追风少女心💓( ˘ ³˘)💋",
        "vdtitle": "仿抖音视频仿抖音视频仿抖音视频仿抖音视频仿抖音视频仿抖音视频",
        "loop": true,
        "duration": 14280,
        "playIng": false,
        "muted": false,
        "likeSum": 0,
        "isLiked": false,
        "commemtSum": 0,
        "shareSum": 0
    },
    {
        "userId": "666dd802f366f40a8b9a4dd4",
        "avatar": "https://env-00jxgwsep3px.normal.cloudstatic.cn/snsPro/image/1728312053918.jpg",
        "nickname": "追风少女心💓( ˘ ³˘)💋",
        "isfollow": false,
        "videoId": "672ca13b29d183956332a5b2",
        "playurl": "xxxxxxxxxx/mu38_video/1730978068419/compress_video_1204507162.m3u8",
        "poster": "xxxxxxxxxx/mu38_video/1730978068419/compress_video_1204507162.m3u8?vframe/jpg/offset/1/&e=1732097696&token=IAM-C1JVXCM70fL6bT80pA5w1YLPCXa7xisCoyR3eVhr:9ZeeMpwqwo7SLJhoBeV9fCsnwSY=",
        "vduser": "追风少女心💓( ˘ ³˘)💋",
        "vdtitle": "仿抖音视频仿抖音视频仿抖音视频仿抖音视频仿抖音视频仿抖音视频",
        "loop": true,
        "duration": 10940,
        "playIng": false,
        "muted": false,
        "likeSum": 0,
        "isLiked": false,
        "commemtSum": 0,
        "shareSum": 0
    },
    {
        "userId": "666dd802f366f40a8b9a4dd4",
        "avatar": "https://env-00jxgwsep3px.normal.cloudstatic.cn/snsPro/image/1728312053918.jpg",
        "nickname": "追风少女心💓( ˘ ³˘)💋",
        "isfollow": false,
        "videoId": "672ca15529d183956332a64b",
        "playurl": "xxxxxxxxxx/mu38_video/1730978123397/compress_video_1204562476.m3u8",
        "poster": "xxxxxxxxxx/mu38_video/1730978123397/compress_video_1204562476.m3u8?vframe/jpg/offset/1/&e=1732097696&token=IAM-C1JVXCM70fL6bT80pA5w1YLPCXa7xisCoyR3eVhr:iVxxdgS871qGS2JgoFXN03nNjfQ=",
        "vduser": "追风少女心💓( ˘ ³˘)💋",
        "vdtitle": "仿抖音视频仿抖音视频仿抖音视频仿抖音视频仿抖音视频仿抖音视频",
        "loop": true,
        "duration": 9450,
        "playIng": false,
        "muted": false,
        "likeSum": 0,
        "isLiked": false,
        "commemtSum": 0,
        "shareSum": 0
    },
    {
        "userId": "666dd802f366f40a8b9a4dd4",
        "avatar": "https://env-00jxgwsep3px.normal.cloudstatic.cn/snsPro/image/1728312053918.jpg",
        "nickname": "追风少女心💓( ˘ ³˘)💋",
        "isfollow": false,
        "videoId": "672ca16b521a64050d97c506",
        "playurl": "xxxxxxxxxx/mu38_video/1730978147033/compress_video_1204586286.m3u8",
        "poster": "xxxxxxxxxx/mu38_video/1730978147033/compress_video_1204586286.m3u8?vframe/jpg/offset/1/&e=1732097696&token=IAM-C1JVXCM70fL6bT80pA5w1YLPCXa7xisCoyR3eVhr:TGPsE7W3EmCEdaETm3e8S3sQWxA=",
        "vduser": "追风少女心💓( ˘ ³˘)💋",
        "vdtitle": "仿抖音视频仿抖音视频仿抖音视频仿抖音视频仿抖音视频仿抖音视频",
        "loop": true,
        "duration": 7410,
        "playIng": false,
        "muted": false,
        "likeSum": 0,
        "isLiked": false,
        "commemtSum": 0,
        "shareSum": 0
    },
    {
        "userId": "666dd802f366f40a8b9a4dd4",
        "avatar": "https://env-00jxgwsep3px.normal.cloudstatic.cn/snsPro/image/1728312053918.jpg",
        "nickname": "追风少女心💓( ˘ ³˘)💋",
        "isfollow": false,
        "videoId": "672ca1c529d183956332a975",
        "playurl": "xxxxxxxxxx/mu38_video/1730978178134/compress_video_1204605619.m3u8",
        "poster": "xxxxxxxxxx/mu38_video/1730978178134/compress_video_1204605619.m3u8?vframe/jpg/offset/1/&e=1732097696&token=IAM-C1JVXCM70fL6bT80pA5w1YLPCXa7xisCoyR3eVhr:wFO341M63ax-f-ZHxi2p88Z5fSY=",
        "vduser": "追风少女心💓( ˘ ³˘)💋",
        "vdtitle": "仿抖音视频仿抖音视频仿抖音视频仿抖音视频仿抖音视频仿抖音视频",
        "loop": true,
        "duration": 124200,
        "playIng": false,
        "muted": false,
        "likeSum": 0,
        "isLiked": false,
        "commemtSum": 0,
        "shareSum": 0
    }
]

（UniAPPX）app端仿抖音短视频丝滑切换视频效果，无限数据加载刷视频 仿抖音 快手 视频刷刷刷

更新记录

1.0.0（2024-12-13）

平台兼容性

仿抖音快手刷视频插件组件文档

使用说明

扫码体验Android端在demo中的效果

扫码体验Android端在项目中的效果

已测试机型

页面使用示例

接口数据格式

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

二维码识别，mlkit扫码插件（毫秒级识别效率，支持多码识别，连续扫码），可自定义扫码格式、界面提示

仿抖音短视频微信小程序丝滑切换视频效果，无限数据加载不卡顿

xw-lottie-view 动画组件适配APP和H5端

系统权限验证、获取、跳转

安卓支持全局消息弹窗插件

（UniAPPX）app端仿抖音短视频 丝滑切换视频效果，无限数据加载 刷视频 仿抖音 快手 视频刷刷刷

更新记录

1.0.0（2024-12-13）

平台兼容性

仿抖音快手刷视频插件组件文档

使用说明

扫码体验Android端在demo中的效果

扫码体验Android端在项目中的效果

已测试机型

页面使用示例

接口数据格式

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

二维码识别，mlkit扫码插件（毫秒级识别效率，支持多码识别，连续扫码），可自定义扫码格式、界面提示

仿抖音短视频微信小程序 丝滑切换视频效果，无限数据加载不卡顿

xw-lottie-view 动画组件 适配APP和H5端

系统权限验证、获取、跳转

安卓支持全局消息弹窗插件

Modal title

（UniAPPX）app端仿抖音短视频丝滑切换视频效果，无限数据加载刷视频仿抖音快手视频刷刷刷

仿抖音短视频微信小程序丝滑切换视频效果，无限数据加载不卡顿

xw-lottie-view 动画组件适配APP和H5端