uniapp h5 竖向的swiper内嵌视频实现抖音短视频垂直切换，丝滑切换视频效果，无限数据加载不卡顿

翘翘红

已于 2024-06-12 14:10:29 修改

阅读量3.5k

点赞数 1

文章标签： uni-app 音视频前端 h5 swiper

于 2023-07-25 12:40:46 首次发布

本文链接：https://blog.csdn.net/qiaoqiaohong/article/details/131912049

版权

一、项目背景：实现仿抖音短视频全屏视频播放、点赞、评论、上下切换视频、视频播放暂停、分页加载、上拉加载下一页、下拉加载上一页等功能。。。

二、前言：博主一开始一直想实现类似抖音进入页面自动播放当前视频，上下滑动切换之后播放当前视频，但最后在ios上出现声音播放，但画面卡顿的问题，估计是ios的浏览器对自动播放做了安全限制，导致自动播放失效，为了功能的可用性，最终放弃自动播放，实现手动点击视频正中心的播放按钮进行播放，再点击视频暂停，这个bug在安卓端暂时没出现，大概率是ios的安全性更高导致的浏览器策略拦截了，需要用户手动交互。

三、项目框架组件：uniapp h5项目、vue2、 swiper组件、video组件

四、效果：

仿抖音全屏视频切换播放暂停

五、布局：可根据自已的项目需求进行修改，博主这里的逻辑是数据由接口返回，如果没有视频，就展示图片，只有视频才进行播放，标题最多展示三行，超过三行显示‘展开’，点击展开谈起标题的底部弹窗，这里弹窗的代码就不展示了，有需要可私信

<view class="widget-video pos-r" :style="{height:`${videoHeight}px`}">
	<swiper class="video-list" :current="current" :style="{height:`${videoHeight}px`}" :vertical="true"
		@change="changeHandler" @transition="transitionHandler" @touchstart="touchStart" @touchend="touchEnd">
		<swiper-item class="video-item" :style="{height:`${videoHeight}px`}" v-for="(item, index) in datas"
			:key="index">
			<video
				v-if="!$util.validatenull(item.videourl) || !$util.validatenull(item.videourl_low) || !$util.validatenull(item.videourl_fhd) || !$util.validatenull(item.videourl_hd)"
				class="thumb-img" :id="`video_${item.id}`" :src="item.videourl" :show-progress="false"
				:show-fullscreen-btn="false" :show-play-btn="false" :loop="true" :show-center-play-btn="false"
				enable-play-gesture :poster="item.thumb" preload="auto" x5-playsinline="" playsinline="true"
				webkit-playsinline="true" x-webkit-airplay="allow" x5-video-player-type="h5"
				x5-video-player-fullscreen="" x5-video-orientation="portraint" @click="playOrpauseFn">
			</video>
			<image v-else class="thumb-img" :src="item.thumb" mode="aspectFit"></image>
			<template v-if="item.videourl || item.videourl_fhd || item.videourl_hd || item.videourl_low">
				<image v-if="showPlayIcon" class="play-icon pos-a pos-tl-c"
					:src="$util.isCandu()?'/static/h5AndWeixin/home/cd_video_play.png':'/static/h5AndWeixin/home/common_icon_item_video_play.png'"
					mode="aspectFill" @tap="playOrpauseFn">
				</image>
			</template>
			<view class="calcwidth pos-a pos-bottom padding-l padding-b">
				<view class="wrapper" @click="openIntroducePop(item.title,item.description)">
					<view :id="'video-title'+item.id" class="c-f video-title"
						:style="{fontSize:$util.isElder()?'39rpx':'30rpx',maxHeight: titleMaxHeight}">
						<text v-if="showExpand" class="expand">展开</text>
						{{item.title}}
					</view>
				</view>
				<from-time-view :item="item" :hideViews="true" :textColor="'#fff'"></from-time-view>
			</view>
			<view class="right-icon-wrap pos-a dflex col-s flex-d pos-right">
				<view v-if="item.allow_comment === 1" class="pos-r tac mt30">
					<image
						:style="{width:$util.isElder()?'104rpx':'80rpx',height:$util.isElder()?'104rpx':'80rpx'}"
						src="/sub-live/static/comment.png"
						@click="openCommentPop(item.catid,item.contentid,item.id)" mode="scaleToFill">
					</image>
					<view v-if="commentCount> 0" class="zan-num tac pos-a pos-b-full"
						:style="{fontSize:$util.isElder()?'32rpx':'20rpx',backgroundColor:$config.INFO.SUB_THEME_COLOR}">
						{{$util.filterViews(commentCount)}}
					</view>
				</view>
				<view v-if="item.islike === 1" class="pos-r tac mt30">
					<image
						:style="{width:$util.isElder()?'104rpx':'80rpx',height:$util.isElder()?'104rpx':'80rpx'}"
						:src="likeObj.liked ? '/sub-live/static/zan-active.png' : '/sub-live/static/zan-inactive.png'"
						mode="scaleToFill" @click="goZanFn(item.catid,item.id)">
					</image>
					<view v-if="likeObj.like_count > 0" class="zan-num tac pos-a pos-b-full"
						:style="{fontSize:$util.isElder()?'32rpx':'20rpx',backgroundColor:$config.INFO.SUB_THEME_COLOR}">
						{{$util.filterViews(likeObj.like_count)}}
					</view>
				</view>
			</view>
		</swiper-item>
	</swiper>
	<view class="nav-bar dflex padding-left-and-right pos-a pos-top">
		<image :style="{width:$util.isElder()?'39rpx':'30rpx',height:$util.isElder()?'39rpx':'30rpx'}"
			src="/static/h5AndWeixin/public/white-back.png" @click="goBack"></image>
	</view>
</view>

六、js：主要展示视频代码

data() {
	return {
		videoHeight: uni.getWindowInfo().windowHeight，
		current: 0,
		datas: [],
		page: 0, // 当前页0，上一页-1，下一页1
		showPlayIcon: false,
		pageStartY: 0,
		pageEndY: 0,
		titleMaxHeight: '',
		showExpand: false,
		videoCtx: null
	};
},
onLoad() {
	// 获取当前页数据
	this.getvideolists();
},
methods: {
	getvideolists() {
		const _this = this;
		// 请求数据，改成自已接口的路径和参数
		_this.$api.getVerticalVideoList({
			catid: _this.catid,
			id: _this.id, // 请求上一页传第一条数据的id,请求下一页传最后一条数据的id
			page: _this.page
		}).then(res => {
			if (res.data) {
				// 判断是否有数据，有数据才进行操作
				if (!_this.$util.validatenull(res.data.lists)) {
					// 下拉加载上一页，将数据插入当前数据的头部，并且播放数据的最后一条
					if (_this.current === 0 && _this.page === -1) {
						_this.datas.unshift(...res.data.lists);
						_this.current = res.data.lists.length - 1;
					} else {
						// 上拉加载下一页，将数据添加到当前数据的尾部
						_this.datas.push(...res.data.lists);
					}
					const firstItem = _this.datas[0];
					// 只创建当前视频的播放器，以免卡顿
					_this.playOrpauseFn();
				} 
			}
		}).catch((err) => {
			console.error(err);
		})
	},
	// 上下切换视频
	changeHandler(e) {
		const _this = this;
		if (e.detail.source == 'touch') {
			const {
				current
			} = e.detail;
			// 将播放按钮隐藏
			_this.showPlayIcon = false;
			// 设置当前视频
			_this.current = current;
			// 只创建当前视频播放器，播放当前视频，暂停其他视频
			_this.playOrpauseFn();
		}
	},
	transitionHandler(e) {
		if (e.detail.dy === 0) {
			// 最后一条数据上拉加载下一页
			if (this.current === this.datas.length - 1) {
				if (this.pageStartY > this.pageEndY) {
					this.page = 1;
					this.id = this.datas.at(-1).id;
					this.getvideolists();
				}
			}
			// 第一条数据下拉加载上一页
			if (this.current === 0) {
				if (this.pageStartY < this.pageEndY) {
					this.page = -1;
					this.id = this.datas.at(0).id;
					this.getvideolists();
				}
			}
		}
	},
	// 获取当前触发的纵坐标以此来判断是上拉还是下拉
	// 记录开始滑动的手指的纵坐标
	touchStart(res) {
		if (this.current === this.datas.length - 1 || this.current === 0) {
			this.pageStartY = res.changedTouches[0].pageY;
		}
	},
	// 记录滑动结束的手指的纵坐标
	touchEnd(res) {
		if (this.current === this.datas.length - 1 || this.current === 0) {
			this.pageEndY = res.changedTouches[0].pageY;
		}
	},
	// 根据视频id创建播放器
	playOrpauseFn() {
		let video_id = this.datas[this.current].id;
		this.videoCtx = uni.createVideoContext(`video_${video_id}`, this);
		// 点击播放按钮视频播放，按钮隐藏，再点击视频暂停，按钮显示
		if (this.showPlayIcon) {
			this.videoCtx.seek(0);
			this.videoCtx.play();
			this.showPlayIcon = false;
		} else {
			this.videoCtx.pause();
			this.showPlayIcon = true;
		}
	}
}

七、sass:

	.widget-video {
		width: 100%;
		background-color: #000;
		overflow: hidden;

		.nav-bar {
			width: 100%;
			height: 88rpx;
		}
	}


	.video-list {
		width: 100%;
		height: 100%;

		.video-item {
			width: 100%;
			position: relative;

			.play-icon {
				width: 64rpx;
				height: 64rpx;
			}

			.right-icon-wrap {
				// width: 112rpx;
				bottom: 208rpx;
				right: 18rpx;

				.mt30 {
					margin-top: 60rpx;
				}

				.zan-num {
					// width: 68rpx;
					margin: auto;
					border-radius: 4rpx;
					font-weight: 600;
					color: #FFFFFF;
					transform: scale(0.8);
				}
			}

			.calcwidth {
				width: calc(100% - 130rpx);
			}

			.wrapper {
				display: flex;
				width: 100%;
				overflow: hidden;

				.video-title {
					overflow: hidden;
					text-overflow: ellipsis;
					text-align: justify;
					position: relative;
				}

				.video-title::before {
					content: '';
					height: calc(100% - 42rpx);
					float: right;
				}

				.expand {
					position: relative;
					float: right;
					clear: both;
					margin-left: 40rpx;
					color: #A9A9B8;
					cursor: pointer;
					border: 0;
				}

				.expand::before {
					content: '...';
					position: absolute;
					left: -10rpx;
					color: #fff;
					transform: translateX(-100%);
				}
			}

		}
	}

**end：**如果出现画面卡顿，声音播放等问题，请一定要关闭视频自动播放功能。

⚠️ getVerticalVideoList接口返回的数据格式：

{
  "lists": [
    {
      "id": 1844807,
      "keywords": [],
      "thumb": "https://cmsimg.cditv.cn/2024/06/11/37bd470d1d5f43cf971087ddefbfd6db.png",
      "description": "阳光作灯，公园为台，由金牛区融媒体中心、金牛区文化馆主办，金牛区少儿文化艺术教育中心承办的“金”英少儿公园快闪秀持续开跳，快来欣赏小宝贝们在公园里的舞台表现吧！",
      "title": "“金”英少儿Show | 阳光作灯，公园为台，舞蹈吧！",
      "content": "",
      "catid": 2997,
      "pictureurls": [],
      "listorder": 0,
      "adddate": 1718161374,
      "jump": {
        "auth": 0,
        "check": 0,
        "login": 0,
        "extensions": null,
        "switch_value_android": "2997;;1844807",
        "switch_value_iphone": "2997;;1844807",
        "switch_type": "official_account_vod"
      },
      "author": "杨淑琴",
      "contentid": 1844807,
      "showtype": 0,
      "url": "https://www.icannews.net/verticalVideoList?v=2997;;1844807&app_id=9",
      "contenttype": "1",
      "audiourl": "",
      "videourl": "https://cstvod.candocloud.cn/jinniu/2024/6/12/95860257503345349cd40640a253375f_hd.mp4?key=4815cfcee4a797ba6432ed4fdad4f59a&time=202406121402",
      "islike": 1,
      "updatetime": 1718161374,
      "username": "杨淑琴",
      "copyfrom": "金牛融媒",
      "catname": "金牛视频",
      "inputtime": 1718161374,
      "newfield": [],
      "top": 0,
      "thumb_info": {
        "size": 50862,
        "width": 574,
        "height": 266
      },
      "thumb_share": "",
      "allow_comment": 1,
      "videourl_hd": "https://cstvod.candocloud.cn/jinniu/2024/6/12/95860257503345349cd40640a253375f_hd.mp4?key=4815cfcee4a797ba6432ed4fdad4f59a&time=202406121402",
      "videourl_low": "",
      "videourl_fhd": "",
      "full_path": "金牛视频",
      "is_show_time": 1,
      "allow_video_comment": 0,
      "video_length": 0,
      "web_url": "https://www.icannews.net/verticalVideoList?v=2997;;1844807&app_id=9",
      "video_length_txt": "01:13",
      "allow_audio_comment": 0,
      "is_show_views": 1,
      "is_hide_copyfrom": 0,
      "view_num": 0,
      "viewtime": 0,
      "share_count": 0,
      "sub_title": null,
      "cite_title": null,
      "list_title": null,
      "like_count": 0,
      "comment_count": 0,
      "act_begin_time": 0,
      "act_end_time": 0,
      "act_status": 0,
      "app_show_style": 0,
      "news_type": "3",
      "favorite_count": 0
    },
    {
      "id": 1844930,
      "keywords": [],
      "thumb": "https://cmsimg.cditv.cn/2024/06/11/86cc8f8403624973b566812f80a181c9.JPG",
      "description": "汉服巡游、民俗表演、端午游园会……端午假期，成都市金牛区推出丰富多彩的活动，既有精彩展览、演艺和时尚音乐会，也有品美食等传统节庆活动。端午三天假期，成都市金牛区共接待游客84.95万人次，实现旅游总收入95631.84万元。（记者：张海燕）",
      "title": "汉服巡游、端午游园会…这个端午金牛接待游客84.95万人次",
      "content": "",
      "catid": 2006,
      "pictureurls": [],
      "listorder": 0,
      "adddate": 1718100179,
      "jump": {
        "auth": 0,
        "check": 0,
        "login": 0,
        "extensions": null,
        "switch_value_android": "2006;;1844930",
        "switch_value_iphone": "2006;;1844930",
        "switch_type": "official_account_vod"
      },
      "author": "赵明昊",
      "contentid": 1844930,
      "showtype": 0,
      "url": "https://www.icannews.net/verticalVideoList?v=2006;;1844930&app_id=9",
      "contenttype": "1",
      "audiourl": "",
      "videourl": "https://cstvod.candocloud.cn/jinniu/2024/6/11/7156b9955a59433ab4cb999de7a736ad_fhd.mp4?key=0d04d3250d444c29a86030f933905f25&time=202406121402",
      "islike": 1,
      "updatetime": 1718100179,
      "username": "赵明昊",
      "copyfrom": "金牛融媒",
      "catname": "视频新闻",
      "inputtime": 1718100179,
      "newfield": [],
      "top": 0,
      "thumb_info": {
        "size": 420042,
        "width": 1920,
        "height": 1080
      },
      "thumb_share": "",
      "allow_comment": 1,
      "videourl_hd": "",
      "videourl_low": "",
      "videourl_fhd": "https://cstvod.candocloud.cn/jinniu/2024/6/11/7156b9955a59433ab4cb999de7a736ad_fhd.mp4?key=0d04d3250d444c29a86030f933905f25&time=202406121402",
      "full_path": "视频新闻",
      "is_show_time": 1,
      "allow_video_comment": 0,
      "video_length": 0,
      "web_url": "https://www.icannews.net/verticalVideoList?v=2006;;1844930&app_id=9",
      "video_length_txt": "",
      "allow_audio_comment": 0,
      "is_show_views": 1,
      "is_hide_copyfrom": 0,
      "view_num": 76,
      "viewtime": 0,
      "share_count": 0,
      "sub_title": null,
      "cite_title": null,
      "list_title": null,
      "like_count": 0,
      "comment_count": 0,
      "act_begin_time": 0,
      "act_end_time": 0,
      "act_status": 0,
      "app_show_style": 0,
      "news_type": "3",
      "favorite_count": 0
    },
    {
      "id": 1841080,
      "keywords": [],
      "thumb": "https://cmsimg.cditv.cn/2024/06/07/9112c1ec610b41e2afae28c088372cd3.png",
      "description": "五月五，端午到，正是粽味飘香时。米粘米，好日子，吃完粽子好运至。早安 金牛。",
      "title": "早安 金牛 | 乐在其“粽”",
      "content": "",
      "catid": 2997,
      "pictureurls": [],
      "listorder": 0,
      "adddate": 1717977668,
      "jump": {
        "auth": 0,
        "check": 0,
        "login": 0,
        "extensions": null,
        "switch_value_android": "2997;;1841080",
        "switch_value_iphone": "2997;;1841080",
        "switch_type": "official_account_vod"
      },
      "author": "泽仁尼冕",
      "contentid": 1841080,
      "showtype": 0,
      "url": "https://www.icannews.net/verticalVideoList?v=2997;;1841080&app_id=9",
      "contenttype": "1",
      "audiourl": "",
      "videourl": "https://cstvod.candocloud.cn/jinniu/2024/6/7/6c100bf0de7b43e2acb1ac2a3366510b_portrait_fhd.mp4?key=c90580d9691631536e9c223aa2e5f5a8&time=202406121402",
      "islike": 1,
      "updatetime": 1717977668,
      "username": "泽仁尼冕",
      "copyfrom": "金牛融媒",
      "catname": "金牛视频",
      "inputtime": 1717977668,
      "newfield": [],
      "top": 0,
      "thumb_info": {
        "size": 122343,
        "width": 526,
        "height": 926
      },
      "thumb_share": "https://cmsimg.cditv.cn/2024/06/07/912783e5ccee428faf83ce869c4706db.png",
      "allow_comment": 1,
      "videourl_hd": "",
      "videourl_low": "",
      "videourl_fhd": "https://cstvod.candocloud.cn/jinniu/2024/6/7/6c100bf0de7b43e2acb1ac2a3366510b_portrait_fhd.mp4?key=c90580d9691631536e9c223aa2e5f5a8&time=202406121402",
      "full_path": "金牛视频",
      "is_show_time": 1,
      "allow_video_comment": 0,
      "video_length": 0,
      "web_url": "https://www.icannews.net/verticalVideoList?v=2997;;1841080&app_id=9",
      "video_length_txt": "",
      "allow_audio_comment": 0,
      "is_show_views": 1,
      "is_hide_copyfrom": 0,
      "view_num": 105,
      "viewtime": 0,
      "share_count": 0,
      "sub_title": null,
      "cite_title": null,
      "list_title": null,
      "like_count": 1,
      "comment_count": 0,
      "act_begin_time": 0,
      "act_end_time": 0,
      "act_status": 0,
      "app_show_style": 0,
      "news_type": "3",
      "favorite_count": 0
    },
    {
      "id": 1841638,
      "keywords": [],
      "thumb": "https://cmsimg.cditv.cn/2024/06/09/4fdd982fd92b4989ac86a65069ac32ca.png",
      "description": "端午到，粽香飘！由金牛区融媒体中心、金牛区西华街道跃进社区主办、成都市金牛区贝联教育培训学校协办的端午亲子包粽子活动，在融媒跃进小站端午节开展，现场热闹非凡。",
      "title": "悦享生活｜“包粽子 过端午”，这场活动粽香飘溢！",
      "content": "",
      "catid": 2997,
      "pictureurls": [],
      "listorder": 0,
      "adddate": 1717940782,
      "jump": {
        "auth": 0,
        "check": 0,
        "login": 0,
        "extensions": null,
        "switch_value_android": "2997;;1841638",
        "switch_value_iphone": "2997;;1841638",
        "switch_type": "official_account_vod"
      },
      "author": "李晓曼",
      "contentid": 1841638,
      "showtype": 0,
      "url": "https://www.icannews.net/verticalVideoList?v=2997;;1841638&app_id=9",
      "contenttype": "1",
      "audiourl": "",
      "videourl": "https://cstvod.candocloud.cn/jinniu/2024/6/9/e8ef5d9534e44d418eaf5e17b0982a2a_fhd.mp4?key=be740169b5aa9ab0ca0ab554d3267ab7&time=202406121402",
      "islike": 1,
      "updatetime": 1717940782,
      "username": "李晓曼",
      "copyfrom": "金牛融媒",
      "catname": "金牛视频",
      "inputtime": 1717940782,
      "newfield": [],
      "top": 0,
      "thumb_info": {
        "size": 90111,
        "width": 757,
        "height": 426
      },
      "thumb_share": "",
      "allow_comment": 1,
      "videourl_hd": "",
      "videourl_low": "",
      "videourl_fhd": "https://cstvod.candocloud.cn/jinniu/2024/6/9/e8ef5d9534e44d418eaf5e17b0982a2a_fhd.mp4?key=be740169b5aa9ab0ca0ab554d3267ab7&time=202406121402",
      "full_path": "金牛视频",
      "is_show_time": 1,
      "allow_video_comment": 0,
      "video_length": 0,
      "web_url": "https://www.icannews.net/verticalVideoList?v=2997;;1841638&app_id=9",
      "video_length_txt": "",
      "allow_audio_comment": 0,
      "is_show_views": 1,
      "is_hide_copyfrom": 0,
      "view_num": 250,
      "viewtime": 0,
      "share_count": 0,
      "sub_title": null,
      "cite_title": null,
      "list_title": null,
      "like_count": 1,
      "comment_count": 0,
      "act_begin_time": 0,
      "act_end_time": 0,
      "act_status": 0,
      "app_show_style": 0,
      "news_type": "3",
      "favorite_count": 0
    },
    {
      "id": 1841631,
      "keywords": [],
      "thumb": "https://cmsimg.cditv.cn/2024/06/09/a1f9c08eac6e4f90a95f5eda0a875729.png",
      "description": "在即将到来的端午节之际，一场别开生面的百人长龙诵端午经典活动在金牛区马鞍东路粽子一条街举行。此次活动组织学生进行《九章·橘颂》《浣溪沙·端午》《渔家傲·五月榴花妖艳烘》三    首端午经典古诗的快闪朗诵表演。参与者们以激昂的朗诵表演，展现出中华传统文化的独特魅力，让人们在品味端午经典的同时，感受到传统节日的深厚底蕴。（记者：龙鑫睿）",
      "title": "百人长龙诵经典 端午古诗快闪表演展现中华传统魅力",
      "content": "",
      "catid": 2006,
      "pictureurls": [],
      "listorder": 0,
      "adddate": 1717921939,
      "jump": {
        "auth": 0,
        "check": 0,
        "login": 0,
        "extensions": null,
        "switch_value_android": "2006;;1841631",
        "switch_value_iphone": "2006;;1841631",
        "switch_type": "official_account_vod"
      },
      "author": "赵明昊",
      "contentid": 1841631,
      "showtype": 0,
      "url": "https://www.icannews.net/verticalVideoList?v=2006;;1841631&app_id=9",
      "contenttype": "1",
      "audiourl": "",
      "videourl": "https://cstvod.candocloud.cn/jinniu/2024/6/9/aef83d4ee92545f396a89505dcf64844_hd.mp4?key=936a98e5a5af793049eb4f1c31c30b1c&time=202406121402",
      "islike": 1,
      "updatetime": 1717921939,
      "username": "赵明昊",
      "copyfrom": "金牛融媒",
      "catname": "视频新闻",
      "inputtime": 1717921939,
      "newfield": [],
      "top": 0,
      "thumb_info": {
        "size": 157735,
        "width": 827,
        "height": 469
      },
      "thumb_share": "",
      "allow_comment": 1,
      "videourl_hd": "https://cstvod.candocloud.cn/jinniu/2024/6/9/aef83d4ee92545f396a89505dcf64844_hd.mp4?key=936a98e5a5af793049eb4f1c31c30b1c&time=202406121402",
      "videourl_low": "",
      "videourl_fhd": "https://cstvod.candocloud.cn/jinniu/2024/6/9/aef83d4ee92545f396a89505dcf64844_fhd.mp4?key=69718001b38c56ee99fb9c881e8c698e&time=202406121402",
      "full_path": "视频新闻",
      "is_show_time": 1,
      "allow_video_comment": 0,
      "video_length": 0,
      "web_url": "https://www.icannews.net/verticalVideoList?v=2006;;1841631&app_id=9",
      "video_length_txt": "01:22",
      "allow_audio_comment": 0,
      "is_show_views": 1,
      "is_hide_copyfrom": 0,
      "view_num": 4197,
      "viewtime": 0,
      "share_count": 0,
      "sub_title": null,
      "cite_title": null,
      "list_title": null,
      "like_count": 46,
      "comment_count": 0,
      "act_begin_time": 0,
      "act_end_time": 0,
      "act_status": 0,
      "app_show_style": 0,
      "news_type": "3",
      "favorite_count": 0
    },
    {
      "id": 1841632,
      "keywords": [],
      "thumb": "https://cmsimg.cditv.cn/2024/06/09/f81f31df00fd483fa5b68db31edf5ede.png",
      "description": "在端午节假期，金牛区文体旅局精心策划了一场别开生面的“寻金牛风物：端午十二时辰奇妙游”主题街区演出活动。本次活动以“跟着古人过端午”为核心理念，通过精心规划的四个活动区域，对应“子时-亥时”的十二时辰，并融入“扮”“诵”“唱”“赏”“购”“游”六大文化体验活动，让市民游客在沉浸式体验中感受古人过端午的丰富韵味。6月9日全天，金牛区上演一场全天候的文化盛宴，带领大家穿越时空，领略端午风雅。（记者：龙鑫睿）\r\n",
      "title": "端午奇妙游：穿越时空体验传统 全天候文化盛宴来袭",
      "content": "",
      "catid": 2006,
      "pictureurls": [],
      "listorder": 0,
      "adddate": 1717921870,
      "jump": {
        "auth": 0,
        "check": 0,
        "login": 0,
        "extensions": null,
        "switch_value_android": "2006;;1841632",
        "switch_value_iphone": "2006;;1841632",
        "switch_type": "official_account_vod"
      },
      "author": "赵明昊",
      "contentid": 1841632,
      "showtype": 0,
      "url": "https://www.icannews.net/verticalVideoList?v=2006;;1841632&app_id=9",
      "contenttype": "1",
      "audiourl": "",
      "videourl": "https://cstvod.candocloud.cn/jinniu/2024/6/9/8afdef494f064b0ea687924e10ed48d7_hd.mp4?key=11dbcfb6d9b7a71d7199d5105774ced7&time=202406121402",
      "islike": 1,
      "updatetime": 1717921870,
      "username": "赵明昊",
      "copyfrom": "金牛融媒",
      "catname": "视频新闻",
      "inputtime": 1717921870,
      "newfield": [],
      "top": 0,
      "thumb_info": {
        "size": 175665,
        "width": 834,
        "height": 466
      },
      "thumb_share": "",
      "allow_comment": 1,
      "videourl_hd": "https://cstvod.candocloud.cn/jinniu/2024/6/9/8afdef494f064b0ea687924e10ed48d7_hd.mp4?key=11dbcfb6d9b7a71d7199d5105774ced7&time=202406121402",
      "videourl_low": "",
      "videourl_fhd": "https://cstvod.candocloud.cn/jinniu/2024/6/9/8afdef494f064b0ea687924e10ed48d7_fhd.mp4?key=35f9e51a88866b7e7e359611c61d8635&time=202406121402",
      "full_path": "视频新闻",
      "is_show_time": 1,
      "allow_video_comment": 0,
      "video_length": 0,
      "web_url": "https://www.icannews.net/verticalVideoList?v=2006;;1841632&app_id=9",
      "video_length_txt": "01:33",
      "allow_audio_comment": 0,
      "is_show_views": 1,
      "is_hide_copyfrom": 0,
      "view_num": 6301,
      "viewtime": 0,
      "share_count": 0,
      "sub_title": null,
      "cite_title": null,
      "list_title": null,
      "like_count": 14,
      "comment_count": 0,
      "act_begin_time": 0,
      "act_end_time": 0,
      "act_status": 0,
      "app_show_style": 0,
      "news_type": "3",
      "favorite_count": 0
    },
    {
      "id": 1841513,
      "keywords": [],
      "thumb": "https://cmsimg.cditv.cn/2024/06/08/b6d44a3d3378480ab4398a48fcc24874.png",
      "description": "6月7日，金牛区发放了2600万元消费券，包含家电消费券和汽车消费券，不少抢到消费券的市民已经开始兑换使用。下一轮金牛消费券，将在6月14日开抢！（记者：赵明昊）",
      "title": "金牛消费券，记得用！下一波14号开抢",
      "content": "",
      "catid": 2006,
      "pictureurls": [],
      "listorder": 0,
      "adddate": 1717854379,
      "jump": {
        "auth": 0,
        "check": 0,
        "login": 0,
        "extensions": null,
        "switch_value_android": "2006;;1841513",
        "switch_value_iphone": "2006;;1841513",
        "switch_type": "official_account_vod"
      },
      "author": "赵明昊",
      "contentid": 1841513,
      "showtype": 0,
      "url": "https://www.icannews.net/verticalVideoList?v=2006;;1841513&app_id=9",
      "contenttype": "1",
      "audiourl": "",
      "videourl": "https://cstvod.candocloud.cn/jinniu/2024/6/8/957d631ceec04e818f96a25bbe8df7c8_hd.mp4?key=e848d69f50fce825ed20b43c0e4aeb97&time=202406121402",
      "islike": 1,
      "updatetime": 1717854379,
      "username": "赵明昊",
      "copyfrom": "金牛融媒",
      "catname": "视频新闻",
      "inputtime": 1717854379,
      "newfield": [],
      "top": 0,
      "thumb_info": {
        "size": 275956,
        "width": 1920,
        "height": 1080
      },
      "thumb_share": "",
      "allow_comment": 1,
      "videourl_hd": "https://cstvod.candocloud.cn/jinniu/2024/6/8/957d631ceec04e818f96a25bbe8df7c8_hd.mp4?key=e848d69f50fce825ed20b43c0e4aeb97&time=202406121402",
      "videourl_low": "",
      "videourl_fhd": "https://cstvod.candocloud.cn/jinniu/2024/6/8/957d631ceec04e818f96a25bbe8df7c8_fhd.mp4?key=94f850ac6fcb3e09c28080de2c1fcaee&time=202406121402",
      "full_path": "视频新闻",
      "is_show_time": 1,
      "allow_video_comment": 0,
      "video_length": 0,
      "web_url": "https://www.icannews.net/verticalVideoList?v=2006;;1841513&app_id=9",
      "video_length_txt": "",
      "allow_audio_comment": 0,
      "is_show_views": 1,
      "is_hide_copyfrom": 0,
      "view_num": 4028,
      "viewtime": 0,
      "share_count": 0,
      "sub_title": null,
      "cite_title": null,
      "list_title": null,
      "like_count": 3,
      "comment_count": 0,
      "act_begin_time": 0,
      "act_end_time": 0,
      "act_status": 0,
      "app_show_style": 0,
      "news_type": "3",
      "favorite_count": 0
    },
    {
      "id": 1841278,
      "keywords": [],
      "thumb": "https://cmsimg.cditv.cn/2024/06/07/2541bc3bc8834535a7197a2e5efe7953.jpg",
      "description": "近日，汇泽社区网格员在入户摸排中发现一些独居老人所住的房子，因房屋狭小、不通风、不透气等原因，只有更换符合安全规范的热水器才能确保安全，然而这对他们来说却是一笔不小的开支。在了解到该情况后，6月7日，汇泽社区联合成都前锋电子电器集团股份有限公司免费为他们安装新的热水器，为夏日用电用气提供了安全的保障！",
      "title": "为民办实事丨爱心热水器 温暖群众心",
      "content": "",
      "catid": 2006,
      "pictureurls": [],
      "listorder": 0,
      "adddate": 1717759327,
      "jump": {
        "auth": 0,
        "check": 0,
        "login": 0,
        "extensions": null,
        "switch_value_android": "2006;;1841278",
        "switch_value_iphone": "2006;;1841278",
        "switch_type": "official_account_vod"
      },
      "author": "赵明昊",
      "contentid": 1841278,
      "showtype": 0,
      "url": "https://www.icannews.net/verticalVideoList?v=2006;;1841278&app_id=9",
      "contenttype": "1",
      "audiourl": "",
      "videourl": "https://cstvod.candocloud.cn/jinniu/2024/6/7/14a94c3d04974a628d470150cf27fb35_fhd.mp4?key=ffc4be649baaf28d10e0ff0d19b92c65&time=202406121402",
      "islike": 1,
      "updatetime": 1717759327,
      "username": "赵明昊",
      "copyfrom": "金牛融媒",
      "catname": "视频新闻",
      "inputtime": 1717759327,
      "newfield": [],
      "top": 0,
      "thumb_info": {
        "size": 431389,
        "width": 1920,
        "height": 1080
      },
      "thumb_share": "",
      "allow_comment": 1,
      "videourl_hd": "",
      "videourl_low": "",
      "videourl_fhd": "https://cstvod.candocloud.cn/jinniu/2024/6/7/14a94c3d04974a628d470150cf27fb35_fhd.mp4?key=ffc4be649baaf28d10e0ff0d19b92c65&time=202406121402",
      "full_path": "视频新闻",
      "is_show_time": 1,
      "allow_video_comment": 0,
      "video_length": 0,
      "web_url": "https://www.icannews.net/verticalVideoList?v=2006;;1841278&app_id=9",
      "video_length_txt": "",
      "allow_audio_comment": 0,
      "is_show_views": 1,
      "is_hide_copyfrom": 0,
      "view_num": 239,
      "viewtime": 0,
      "share_count": 0,
      "sub_title": null,
      "cite_title": null,
      "list_title": null,
      "like_count": 14,
      "comment_count": 0,
      "act_begin_time": 0,
      "act_end_time": 0,
      "act_status": 0,
      "app_show_style": 0,
      "news_type": "3",
      "favorite_count": 0
    },
    {
      "id": 1841272,
      "keywords": [],
      "thumb": "https://cmsimg.cditv.cn/2024/06/07/83a30474746c4025b8db85a48756107b.jpg",
      "description": "迎宾路社区战旗红志愿服务队组织辖区微网格员、酒店、餐饮行业开展“人人讲安全、个个会应急”消防安全宣传活动，旨在提高广大从业人员的消防安全意识和应急处理能力。此次活动不仅提高了大家的消防安全意识和应急处理能力，也为酒店、餐饮行业的安全生产奠定了坚实基础。迎宾路社区战旗红志愿服务队将继续发挥自身优势，积极组织类似活动，为社区的和谐稳定贡献力量。",
      "title": "“人人讲安全、个个会应急”迎宾路社区开展消防安全宣传活动",
      "content": "",
      "catid": 2006,
      "pictureurls": [],
      "listorder": 0,
      "adddate": 1717759078,
      "jump": {
        "auth": 0,
        "check": 0,
        "login": 0,
        "extensions": null,
        "switch_value_android": "2006;;1841272",
        "switch_value_iphone": "2006;;1841272",
        "switch_type": "official_account_vod"
      },
      "author": "赵明昊",
      "contentid": 1841272,
      "showtype": 0,
      "url": "https://www.icannews.net/verticalVideoList?v=2006;;1841272&app_id=9",
      "contenttype": "1",
      "audiourl": "",
      "videourl": "https://cstvod.candocloud.cn/jinniu/2024/6/7/a024065bb69e42ada61d4789d1e0442c_fhd.mp4?key=324688b773a6d95276259c2560e80003&time=202406121402",
      "islike": 1,
      "updatetime": 1717759078,
      "username": "赵明昊",
      "copyfrom": "金牛融媒",
      "catname": "视频新闻",
      "inputtime": 1717759078,
      "newfield": [],
      "top": 0,
      "thumb_info": {
        "size": 2095916,
        "width": 3000,
        "height": 2250
      },
      "thumb_share": "",
      "allow_comment": 1,
      "videourl_hd": "",
      "videourl_low": "",
      "videourl_fhd": "https://cstvod.candocloud.cn/jinniu/2024/6/7/a024065bb69e42ada61d4789d1e0442c_fhd.mp4?key=324688b773a6d95276259c2560e80003&time=202406121402",
      "full_path": "视频新闻",
      "is_show_time": 1,
      "allow_video_comment": 0,
      "video_length": 0,
      "web_url": "https://www.icannews.net/verticalVideoList?v=2006;;1841272&app_id=9",
      "video_length_txt": "01:08",
      "allow_audio_comment": 0,
      "is_show_views": 1,
      "is_hide_copyfrom": 0,
      "view_num": 414,
      "viewtime": 0,
      "share_count": 0,
      "sub_title": null,
      "cite_title": null,
      "list_title": null,
      "like_count": 0,
      "comment_count": 0,
      "act_begin_time": 0,
      "act_end_time": 0,
      "act_status": 0,
      "app_show_style": 0,
      "news_type": "3",
      "favorite_count": 0
    },
    {
      "id": 1841274,
      "keywords": [],
      "thumb": "https://cmsimg.cditv.cn/2024/06/07/7341bc0e54194f259edd7d28174e3c5a.jpg",
      "description": "6月7日，重庆市民政局赴金牛区调研民政工作，区政府副区长方波参加调研。",
      "title": "重庆市民政局调研金牛区民政工作",
      "content": "",
      "catid": 2006,
      "pictureurls": [],
      "listorder": 0,
      "adddate": 1717759060,
      "jump": {
        "auth": 0,
        "check": 0,
        "login": 0,
        "extensions": null,
        "switch_value_android": "2006;;1841274",
        "switch_value_iphone": "2006;;1841274",
        "switch_type": "official_account_vod"
      },
      "author": "赵明昊",
      "contentid": 1841274,
      "showtype": 0,
      "url": "https://www.icannews.net/verticalVideoList?v=2006;;1841274&app_id=9",
      "contenttype": "1",
      "audiourl": "",
      "videourl": "https://cstvod.candocloud.cn/jinniu/2024/6/7/6a9ec4c322f94eeab58a460f09509e56_fhd.mp4?key=d5e25ded270bb341a225222a890552c2&time=202406121402",
      "islike": 1,
      "updatetime": 1717759060,
      "username": "赵明昊",
      "copyfrom": "金牛融媒",
      "catname": "视频新闻",
      "inputtime": 1717759060,
      "newfield": [],
      "top": 0,
      "thumb_info": {
        "size": 390320,
        "width": 1920,
        "height": 1080
      },
      "thumb_share": "",
      "allow_comment": 1,
      "videourl_hd": "",
      "videourl_low": "",
      "videourl_fhd": "https://cstvod.candocloud.cn/jinniu/2024/6/7/6a9ec4c322f94eeab58a460f09509e56_fhd.mp4?key=d5e25ded270bb341a225222a890552c2&time=202406121402",
      "full_path": "视频新闻",
      "is_show_time": 1,
      "allow_video_comment": 0,
      "video_length": 0,
      "web_url": "https://www.icannews.net/verticalVideoList?v=2006;;1841274&app_id=9",
      "video_length_txt": "",
      "allow_audio_comment": 0,
      "is_show_views": 1,
      "is_hide_copyfrom": 0,
      "view_num": 82,
      "viewtime": 0,
      "share_count": 0,
      "sub_title": null,
      "cite_title": null,
      "list_title": null,
      "like_count": 0,
      "comment_count": 0,
      "act_begin_time": 0,
      "act_end_time": 0,
      "act_status": 0,
      "app_show_style": 0,
      "news_type": "3",
      "favorite_count": 0
    },
    {
      "id": 1841183,
      "keywords": [],
      "thumb": "https://cmsimg.cditv.cn/2024/06/07/0710c2304b1e473b91d955e5444fc929.png",
      "description": "传统节日端午节的习俗有哪些？一起来听听融媒课堂的居民朋友们用配音秀作品《端午纪录片》把端午节的小知识讲给大家听！",
      "title": "“声”临其境 | “金牛”版端午节纪录片",
      "content": "",
      "catid": 2997,
      "pictureurls": [],
      "listorder": 0,
      "adddate": 1717750412,
      "jump": {
        "auth": 0,
        "check": 0,
        "login": 0,
        "extensions": null,
        "switch_value_android": "2997;;1841183",
        "switch_value_iphone": "2997;;1841183",
        "switch_type": "official_account_vod"
      },
      "author": "杨淑琴",
      "contentid": 1841183,
      "showtype": 0,
      "url": "https://www.icannews.net/verticalVideoList?v=2997;;1841183&app_id=9",
      "contenttype": "1",
      "audiourl": "",
      "videourl": "https://cstvod.candocloud.cn/jinniu/2024/6/7/9dd0f47ab9d049c6bbbda0365dbeae03_hd.mp4?key=4513ab7f5146da0cb8cf17cba1936775&time=202406121402",
      "islike": 1,
      "updatetime": 1717750412,
      "username": "杨淑琴",
      "copyfrom": "金牛融媒",
      "catname": "金牛视频",
      "inputtime": 1717750412,
      "newfield": [],
      "top": 0,
      "thumb_info": {
        "size": 390304,
        "width": 2999,
        "height": 1687
      },
      "thumb_share": "",
      "allow_comment": 1,
      "videourl_hd": "https://cstvod.candocloud.cn/jinniu/2024/6/7/9dd0f47ab9d049c6bbbda0365dbeae03_hd.mp4?key=4513ab7f5146da0cb8cf17cba1936775&time=202406121402",
      "videourl_low": "",
      "videourl_fhd": "",
      "full_path": "金牛视频",
      "is_show_time": 1,
      "allow_video_comment": 0,
      "video_length": 0,
      "web_url": "https://www.icannews.net/verticalVideoList?v=2997;;1841183&app_id=9",
      "video_length_txt": "",
      "allow_audio_comment": 0,
      "is_show_views": 1,
      "is_hide_copyfrom": 0,
      "view_num": 18,
      "viewtime": 0,
      "share_count": 0,
      "sub_title": null,
      "cite_title": null,
      "list_title": null,
      "like_count": 2,
      "comment_count": 0,
      "act_begin_time": 0,
      "act_end_time": 0,
      "act_status": 0,
      "app_show_style": 0,
      "news_type": "3",
      "favorite_count": 0
    },
    {
      "id": 1841194,
      "keywords": [],
      "thumb": "https://cmsimg.cditv.cn/2024/06/07/74399641b7fa455abc93a3bc918df438.png",
      "description": "端午节吃粽子是传统习俗，粽子的质量关系着广大市民的饮食安全。在金牛区马鞍东路的“粽子一条街”，街道联合市场监督管理局与国家轻工业食品质量监督检测成都站重点对粽子等农副产品进行检查，市民也可以前往检测点位，请工作人员进行抽检。",
      "title": "食品安全很“粽”要！",
      "content": "",
      "catid": 2997,
      "pictureurls": [],
      "listorder": 0,
      "adddate": 1717750336,
      "jump": {
        "auth": 0,
        "check": 0,
        "login": 0,
        "extensions": null,
        "switch_value_android": "2997;;1841194",
        "switch_value_iphone": "2997;;1841194",
        "switch_type": "official_account_vod"
      },
      "author": "泽仁尼冕",
      "contentid": 1841194,
      "showtype": 0,
      "url": "https://www.icannews.net/verticalVideoList?v=2997;;1841194&app_id=9",
      "contenttype": "1",
      "audiourl": "",
      "videourl": "https://cstvod.candocloud.cn/jinniu/2024/6/7/1df9c2d53d844fcfa32ac7d98990b4a2_fhd.mp4?key=a7508d452af40b7f591b6172bb0dc323&time=202406121402",
      "islike": 1,
      "updatetime": 1717750336,
      "username": "泽仁尼冕",
      "copyfrom": "金牛融媒",
      "catname": "金牛视频",
      "inputtime": 1717750336,
      "newfield": [],
      "top": 0,
      "thumb_info": {
        "size": 420148,
        "width": 2429,
        "height": 1362
      },
      "thumb_share": "https://cmsimg.cditv.cn/2024/06/07/1aa251f726bc467aa8464914c54685b8.png",
      "allow_comment": 1,
      "videourl_hd": "",
      "videourl_low": "",
      "videourl_fhd": "https://cstvod.candocloud.cn/jinniu/2024/6/7/1df9c2d53d844fcfa32ac7d98990b4a2_fhd.mp4?key=a7508d452af40b7f591b6172bb0dc323&time=202406121402",
      "full_path": "金牛视频",
      "is_show_time": 1,
      "allow_video_comment": 0,
      "video_length": 0,
      "web_url": "https://www.icannews.net/verticalVideoList?v=2997;;1841194&app_id=9",
      "video_length_txt": "",
      "allow_audio_comment": 0,
      "is_show_views": 1,
      "is_hide_copyfrom": 0,
      "view_num": 12,
      "viewtime": 0,
      "share_count": 0,
      "sub_title": null,
      "cite_title": null,
      "list_title": null,
      "like_count": 0,
      "comment_count": 0,
      "act_begin_time": 0,
      "act_end_time": 0,
      "act_status": 0,
      "app_show_style": 0,
      "news_type": "3",
      "favorite_count": 0
    },
    {
      "id": 1841172,
      "keywords": [],
      "thumb": "https://cmsimg.cditv.cn/2024/06/07/42865ead60fc48dc897ce699ca9b7cde.jpg",
      "description": "端午近，粽香飘。6月6日，抚琴街道老年协会携手成都恒博医院，在西南街社区广场开展了一场“端午佳节 送健康”活动，让大家在感受传统节日文化魅力的同时，为老人们送上健康。（记者：张海燕）",
      "title": "我们的节日丨浓情端午致安康 暖心义诊送健康",
      "content": "",
      "catid": 2006,
      "pictureurls": [],
      "listorder": 0,
      "adddate": 1717748402,
      "jump": {
        "auth": 0,
        "check": 0,
        "login": 0,
        "extensions": null,
        "switch_value_android": "2006;;1841172",
        "switch_value_iphone": "2006;;1841172",
        "switch_type": "official_account_vod"
      },
      "author": "赵明昊",
      "contentid": 1841172,
      "showtype": 0,
      "url": "https://www.icannews.net/verticalVideoList?v=2006;;1841172&app_id=9",
      "contenttype": "1",
      "audiourl": "",
      "videourl": "https://cstvod.candocloud.cn/jinniu/2024/6/7/e91966e31c584ea7a03f9e85cd69f70e_fhd.mp4?key=8c4db1aa566076562ef731489207adb0&time=202406121402",
      "islike": 1,
      "updatetime": 1717748402,
      "username": "赵明昊",
      "copyfrom": "金牛融媒",
      "catname": "视频新闻",
      "inputtime": 1717748402,
      "newfield": [],
      "top": 0,
      "thumb_info": {
        "size": 548060,
        "width": 1920,
        "height": 1080
      },
      "thumb_share": "",
      "allow_comment": 1,
      "videourl_hd": "",
      "videourl_low": "",
      "videourl_fhd": "https://cstvod.candocloud.cn/jinniu/2024/6/7/e91966e31c584ea7a03f9e85cd69f70e_fhd.mp4?key=8c4db1aa566076562ef731489207adb0&time=202406121402",
      "full_path": "视频新闻",
      "is_show_time": 1,
      "allow_video_comment": 0,
      "video_length": 0,
      "web_url": "https://www.icannews.net/verticalVideoList?v=2006;;1841172&app_id=9",
      "video_length_txt": "",
      "allow_audio_comment": 0,
      "is_show_views": 1,
      "is_hide_copyfrom": 0,
      "view_num": 412,
      "viewtime": 0,
      "share_count": 0,
      "sub_title": null,
      "cite_title": null,
      "list_title": null,
      "like_count": 0,
      "comment_count": 0,
      "act_begin_time": 0,
      "act_end_time": 0,
      "act_status": 0,
      "app_show_style": 0,
      "news_type": "3",
      "favorite_count": 0
    },
    {
      "id": 1841071,
      "keywords": [],
      "thumb": "https://cmsimg.cditv.cn/2024/06/07/96557ccbbe1146e6942a6eb1e6cd2e90.jpg",
      "description": "第一位走出考场学生来了，称今年语文难度正常 ",
      "title": "第一位走出考场学生来了！",
      "content": "",
      "catid": 2997,
      "pictureurls": [],
      "listorder": 0,
      "adddate": 1717748349,
      "jump": {
        "auth": 0,
        "check": 0,
        "login": 0,
        "extensions": null,
        "switch_value_android": "2997;;1841071",
        "switch_value_iphone": "2997;;1841071",
        "switch_type": "official_account_vod"
      },
      "author": "刘鑫（金牛）",
      "contentid": 1841071,
      "showtype": 0,
      "url": "https://www.icannews.net/verticalVideoList?v=2997;;1841071&app_id=9",
      "contenttype": "1",
      "audiourl": "",
      "videourl": "https://cstvod.candocloud.cn/jinniu/2024/6/7/5a2a36c46f494ded918fde7d0e284d4c_portrait_fhd.mp4?key=fc87c04119e2be92d467977714a9fef4&time=202406121402",
      "islike": 1,
      "updatetime": 1717748349,
      "username": "刘鑫（金牛）",
      "copyfrom": "金牛融媒",
      "catname": "金牛视频",
      "inputtime": 1717748349,
      "newfield": [],
      "top": 0,
      "thumb_info": {
        "size": 210352,
        "width": 835,
        "height": 1535
      },
      "thumb_share": "",
      "allow_comment": 1,
      "videourl_hd": "",
      "videourl_low": "",
      "videourl_fhd": "https://cstvod.candocloud.cn/jinniu/2024/6/7/5a2a36c46f494ded918fde7d0e284d4c_portrait_fhd.mp4?key=fc87c04119e2be92d467977714a9fef4&time=202406121402",
      "full_path": "金牛视频",
      "is_show_time": 1,
      "allow_video_comment": 0,
      "video_length": 0,
      "web_url": "https://www.icannews.net/verticalVideoList?v=2997;;1841071&app_id=9",
      "video_length_txt": "00:21",
      "allow_audio_comment": 0,
      "is_show_views": 1,
      "is_hide_copyfrom": 0,
      "view_num": 12,
      "viewtime": 0,
      "share_count": 0,
      "sub_title": null,
      "cite_title": null,
      "list_title": null,
      "like_count": 0,
      "comment_count": 0,
      "act_begin_time": 0,
      "act_end_time": 0,
      "act_status": 0,
      "app_show_style": 0,
      "news_type": "3",
      "favorite_count": 0
    },
    {
      "id": 1841073,
      "keywords": [],
      "thumb": "https://cmsimg.cditv.cn/2024/06/07/c7e0ffffdcf849e3a5cf67238e149b0f.jpg",
      "description": "成都金牛区参考人数5583人，较2023年高考增加581人",
      "title": "金牛区2024高考基本信息出炉",
      "content": "",
      "catid": 2997,
      "pictureurls": [],
      "listorder": 0,
      "adddate": 1717748335,
      "jump": {
        "auth": 0,
        "check": 0,
        "login": 0,
        "extensions": null,
        "switch_value_android": "2997;;1841073",
        "switch_value_iphone": "2997;;1841073",
        "switch_type": "official_account_vod"
      },
      "author": "刘鑫（金牛）",
      "contentid": 1841073,
      "showtype": 0,
      "url": "https://www.icannews.net/verticalVideoList?v=2997;;1841073&app_id=9",
      "contenttype": "1",
      "audiourl": "",
      "videourl": "https://cstvod.candocloud.cn/jinniu/2024/6/7/7b9989e4cc0649a5b4f1e54816a12dbd_portrait_fhd.mp4?key=7a2bede088e0232244460f9503e82c35&time=202406121402",
      "islike": 1,
      "updatetime": 1717748335,
      "username": "刘鑫（金牛）",
      "copyfrom": "金牛融媒",
      "catname": "金牛视频",
      "inputtime": 1717748335,
      "newfield": [],
      "top": 0,
      "thumb_info": {
        "size": 307161,
        "width": 1290,
        "height": 2282
      },
      "thumb_share": "",
      "allow_comment": 1,
      "videourl_hd": "",
      "videourl_low": "",
      "videourl_fhd": "https://cstvod.candocloud.cn/jinniu/2024/6/7/7b9989e4cc0649a5b4f1e54816a12dbd_portrait_fhd.mp4?key=7a2bede088e0232244460f9503e82c35&time=202406121402",
      "full_path": "金牛视频",
      "is_show_time": 1,
      "allow_video_comment": 0,
      "video_length": 0,
      "web_url": "https://www.icannews.net/verticalVideoList?v=2997;;1841073&app_id=9",
      "video_length_txt": "",
      "allow_audio_comment": 0,
      "is_show_views": 1,
      "is_hide_copyfrom": 0,
      "view_num": 12,
      "viewtime": 0,
      "share_count": 0,
      "sub_title": null,
      "cite_title": null,
      "list_title": null,
      "like_count": 0,
      "comment_count": 0,
      "act_begin_time": 0,
      "act_end_time": 0,
      "act_status": 0,
      "app_show_style": 0,
      "news_type": "3",
      "favorite_count": 0
    }
  ],
  "pagebar": {
    "pages": 158,
    "pagesize": 15,
    "count": 2361,
    "nowpage": 1
  },
  "nowcat": {
    "catid": 2997,
    "image": "",
    "catname": "金牛视频",
    "description": "",
    "listorder": 10,
    "showtype": "",
    "items": 2361,
    "type": 0,
    "remarks": null,
    "parentid": 1873,
    "newfield": [
      {
        "image": "",
        "name": "show_type",
        "desc": "vertical_video"
      }
    ],
    "attrs": null,
    "url": "https://zsjn.cdmp.candocloud.cn/list/2997/1.html",
    "thumb_share": "",
    "image_info": {
      "size": 0,
      "width": 0,
      "height": 0
    },
    "web_url": "https://zsjn.cdmp.candocloud.cn/web/list/2997/1.html"
  }
}

util.js的方法:

/*
 * @Author: qqh
 * @Description: 工具文件
 */
// #ifdef H5
var jweixin = require('jweixin-module');
// #endif
import CONFIG from '@/setting/config.js'
import encryption from './publiukey-ob.js'
import store from '@/store/index.js'
const windowInfo = uni.getWindowInfo();
module.exports = {
	// 根据类型跳转不同页面
	openPage(jump, name) {
		let path = '';
		name = name || jump.title;
		const type = jump.switch_type;
		const value = jump.switch_value || jump.switch_value_android || jump.switch_value_iphone || '';
		if (this.validatenull(type)) {
			this.showToast('类型不存在');
		} else if (type == 'url') {
			window.location.href = value;
		} else {
			const typeTemp = type.replace("official_account_", "").replace("rmt_", "");
			switch (typeTemp) {
				// 单网页隐私协议
				case 'single_web':
					path = '/singleWapDetail';
					break;
					// 图文详情
				case 'new':
					path = '/newsDetail';
					break;
					// 图集
				case 'images':
					path = '/imagesDetail';
					break;
					// 视频剧集详情
				case 'vod':
					path = '/videoDetail';
					break;
					// 音频详情
				case 'audio':
					path = '/audioDetail';
					break;
					// 电视
				case 'live':
					path = '/tvDetail';
					break;
					// 链接
					//case 'url':
					//path = '/wapDetail';
					//break;
					// 小栏目
				case 'cat_small':
					path = '/catSmall';
					break;
					// 大栏目
				case 'cat_big':
					path = '/catBig';
					break;
					// 大图视频列表
				case 'big_thumb_list':
					path = '/bigThumbList';
					break;
					// 直播推荐列表
				case 'microlive_position':
					path = '/livePositionList';
					break;
					// TODO 直播列表
				case 'microlive_list':
					path = '/livePositionList';
					break;
					// 直播详情
				case 'microlive':
					path = '/liveDetail';
					break;
					// 圈子主页
				case 'shot_center':
					path = '/pai/home';
					break;
					// 圈子分类列表
				case 'shot_categoryList':
					path = '/pai/category';
					break;
					// 圈子发布
				case 'shot':
					path = '/pai/publish';
					break;
					// 圈子详情
				case 'shot_detail':
					path = '/pai/detail';
					break;
					// 看度号主页
				case 'government_home':
					path = '/officalHome';
					break;
					// 报料列表
				case 'report_list':
					path = '/report/home';
					break;
					// 报料详情
				case 'report_detail':
					path = '/report/detail';
					break;
					// 	// 问答主页
					// case 'qa':
					// 	path = '/qa/home';
					// 	break;
					// 	// 问答详情
					// case 'qa_detail':
					// 	path = '/qa/detail';
					// 	break;
					// 	// 问答发布
					// case 'qa_add':
					// 	path = '/qa/publish';
					// 	break;
					// 	// 我的问答
					// case 'qa_my':
					// 	path = '/qa/myQa';
					// 	break;
				default:
					this.showToast('类型不存在');
					return;
			}
			// auth为1表示需要用户的auth信息，check为1表示需要验证用户是否认证手机号，login为1表示需要登录
			if (jump.login === 1 || jump.auth === 1) {
				if (this.eventNeedLogin()) {
					this.navigateToFn(path, type, value, name)
				}
			} else {
				this.navigateToFn(path, type, value, name)
			}
		}
	},
	navigateToFn(path, type, value, name) {
		const _this = this;
		if (_this.APP()) {
			if (_this.isElder()) {
				_this.navigatorwap(path, type, value, name);
			} else {
				_this.getAPIData('https://web.cdmp.candocloud.cn/api/getOpenAppLinkUrl', 'POST', {
					t: type,
					v: value,
					app_id: CONFIG.INFO.APP_ID
				}, function(res) {
					if (_this.iOS()) {
						window.location.href = res.data;
					} else {
						const key = res.data.split('?__=')[1];
						window.location.href =
							`${window.location.origin}${(_this.isJinniu() || _this.isWenjiang()) ? '/rw' : ''}?/_Cditv_CanDo_Url_Parse.php?__=${key}`;
					}
				});
			}
		} else {
			_this.navigatorwap(path, type, value, name);
		}
	},
	navigatorwap(path, type, value, name){
		const _this = this;
		let comurl = `${path}?app_id=${CONFIG.INFO.APP_ID}&t=${type}`
		if (!_this.validatenull(value)) {
			let v = encodeURIComponent(value);
			if (_this.otherWapInApp()) {
				v = encodeURIComponent(v);
			}
			comurl = comurl + `&v=${v}`;
		}
		if (!_this.validatenull(name)) {
			// #ifdef H5
			comurl = comurl + `&name=${encodeURIComponent(name)}`
			// #endif
			// #ifdef MP-WEIXIN
			comurl = comurl + `&name=${name}`
			// #endif
		}
		if (_this.otherWapInApp()) {
			const urlParams = new URLSearchParams(window.location.search);
			if (urlParams.get('openNewWeb') == '1') {
				_this.getAPIData('https://web.cdmp.candocloud.cn/api/getOpenAppLinkUrl', 'POST', {
					t: 'url',
					v: window.location.origin + (_this.isJinniu() || _this.isWenjiang() ? '/rw' : '') +
						comurl,
					app_id: CONFIG.INFO.APP_ID
				}, function(res) {
					if (_this.iOS()) {
						window.location.href = res.data;
					} else {
						const key = res.data.split('?__=')[1];
						window.location.href =
							`${window.location.origin}${(_this.isJinniu() || _this.isWenjiang() ? '/rw' : '')}?/_Cditv_CanDo_Url_Parse.php?__=${key}`;
					}
				});
			}
			return;
		}
		uni.navigateTo({
			url: comurl
		})
	},
	navigatorwap(path, type, value, name) {
		const _this = this;
		let comurl = `${path}?app_id=${CONFIG.INFO.APP_ID}&t=${type}`
		if (!_this.validatenull(value)) {
			let v = encodeURIComponent(value);
			if (_this.otherWapInApp()) {
				v = encodeURIComponent(v);
			}
			comurl = comurl + `&v=${v}`;
		}
		if (!_this.validatenull(name)) {
			// #ifdef H5
			comurl = comurl + `&name=${encodeURIComponent(name)}`
			// #endif
			// #ifdef MP-WEIXIN
			comurl = comurl + `&name=${name}`
			// #endif
		}
		if (_this.otherWapInApp()) {
			const urlParams = new URLSearchParams(window.location.search);
			if (urlParams.get('openNewWeb') == '1') {
				_this.getAPIData('https://web.cdmp.candocloud.cn/api/getOpenAppLinkUrl', 'POST', {
					t: 'url',
					v: window.location.origin + (_this.isJinniu() || _this.isWenjiang() ? '/rw' : '') +
						comurl,
					app_id: CONFIG.INFO.APP_ID
				}, function(res) {
					if (_this.iOS()) {
						window.location.href = res.data;
					} else {
						const key = res.data.split('?__=')[1];
						window.location.href =
							`${window.location.origin}${(_this.isJinniu() || _this.isWenjiang() ? '/rw' : '')}?/_Cditv_CanDo_Url_Parse.php?__=${key}`;
					}
				});
			}
			return;
		}
		uni.navigateTo({
			url: comurl
		})
	},
	// 根据指定路由参数跳转
	goOnePage(url, params = {}) {
		params = uni.$u.queryParams(Object.assign(params, {
			app_id: CONFIG.INFO.APP_ID
		}))
		url = `/${url}${params}`
		uni.navigateTo({
			url: url
		})
	},
	// 计算pc和移动宽高16:9,传递一个margin{left:0,right:0},单位px
	calcWaH(left = 0, right = 0) {
		let w = 0;
		let h = 0;
		w = this.isMobile() ? (windowInfo.screenWidth - left - right) : (640 - left - right);
		h = parseInt(w * 9 / 16);
		return [w, h]
	},
	// 计算3倍分辨率的图片拼接
	tripleResolut(defH = 0, left = 0, right = 0, is16Rate9 = true) {
		let w = 0;
		let h = 0;
		w = this.isMobile() ? (windowInfo.screenWidth - left - right) : (640 - left - right);
		if (is16Rate9) {
			h = parseInt(w * 9 / 16);
		} else {
			h = defH;
		}
		return `_${w*3}x${h*3}.jpg`;
	},
	// 计算固定宽的块级元素在pc上的适配,传递移动的宽，单位px
	calcNW(w) {
		w = this.isMobile() ? w : (640 * w / 375)
		return w * 2 + 'rpx';
	},
	isCandu() {
		return CONFIG.INFO.APP_ID === 1 ? true : false;
	},
	isChengHua() {
		return CONFIG.INFO.APP_ID === 11 ? true : false;
	},
	isJinniu() {
		return CONFIG.INFO.APP_ID === 9 ? true : false;
	},
	isWenjiang() {
		return CONFIG.INFO.APP_ID === 15 ? true : false;
	},
	// 看度和区县默认用户头像不同
	defUser() {
		return `/static/h5AndWeixin/public/${this.isCandu()?'cd_def_user':'def_user'}.png`;
	},
	// 温江和武侯默认头像不同
	defAvatar() {
		let name = '';
		if (CONFIG.INFO.APP_ID === 2 || CONFIG.INFO.APP_ID === 15) {
			name = 'def_user';
		} else {
			name = 'def_avater';
		}
		return `/static/h5AndWeixin/public/${name}.png`;
	},
	// 是否是老年版
	isElder() {
		return store.getters.isElder || this.localStorage('isElder') || false;
	},
	// 点击操作事件需要判断登录与否再进行操作
	eventNeedLogin(flag) {
		// #ifdef H5
		if (this.APP()) {
			if (this.validatenull(uni.getStorageSync('userInfo'))) {
				window.location.href = CONFIG.INFO.APP_LOGIN_URL;
				return false;
			} else {
				return true;
			}
		} else {
			if (this.validatenull(this.localStorage('userInfo'))) {
				if (this.validatenull(flag)) {
					this.goOnePage('login');
					return false;
				} else {
					this.goOnePage('login', {
						flag: flag
					});
					return false;
				}
			} else {
				return true;
			}
		}
		// #endif
		// #ifdef MP-WEIXIN
		if (this.validatenull(this.localStorage('userInfo'))) {
			if (this.validatenull(flag)) {
				this.goOnePage('weixinOneLogin');
				return false;
			} else {
				this.goOnePage('weixinOneLogin', {
					flag: flag
				});
				return false;
			}
		} else {
			return true;
		}
		// #endif
	},
	// 格式化预告直播开始时间
	formatStartTime(timestamp) {
		const date = new Date(timestamp * 1000);
		const Y = date.getFullYear();
		let M = date.getMonth() + 1;
		M = M < 10 ? ('0' + M) : M;
		let D = date.getDate();
		D = D < 10 ? ('0' + D) : D;
		let h = date.getHours();
		h = h < 10 ? ('0' + h) : h;
		let m = date.getMinutes();
		m = m < 10 ? ('0' + m) : m;
		const oldTime = new Date(Y + '-' + M + '-' + D + ' 00:00:00').getTime();
		const nowTime = new Date(new Date().toLocaleDateString()).getTime();
		const day = (nowTime - oldTime) / (24 * 60 * 60 * 1000);
		if (day === 0) {
			return '今天 ' + h + ':' + m;
		} else if (day === -1) {
			return '明天 ' + h + ':' + m;
		} else if (day === -2) {
			return '后天 ' + h + ':' + m;
		} else {
			return Y + '.' + M + '.' + D + ' ' + h + ':' + m;
		}
	},
	// 下划线之后的小写字母转大写
	toUp(str) {
		let newStr = '';
		let arr = str.split('_');
		arr.forEach((item, index) => {
			if (index > 0) {
				return newStr += item.replace(item[0], item[0].toUpperCase());
			} else {
				return newStr += item;
			}
		})
		return newStr;
	},
	// 判断是否登录
	isLogin() {
		if (this.APP()) {
			const userinfo = this.APP_JS() ? app.getLoginUser() : null;
			if (!this.validatenull(userinfo)) {
				return true;
			} else {
				return false;
			}
		} else {
			if (!this.validatenull(store.getters.userInfo)) {
				return true;
			} else {
				if (!this.validatenull(this.localStorage('userInfo'))) {
					return true;
				} else {
					return false;
				}
			}
		}
	},
	// 获取本地用户信息
	getLocalUserInfo() {
		if (this.APP()) {
			const userinfo = this.APP_JS() ? app.getLoginUser() : null;
			if (!this.validatenull(userinfo)) {
				return (typeof userinfo == 'object') ? userinfo : JSON.parse(userinfo);
			} else {
				return {};
			}
		} else {
			if (!this.validatenull(store.getters.userInfo)) {
				return store.getters.userInfo;
			} else {
				if (!this.validatenull(this.localStorage('userInfo'))) {
					return JSON.parse(this.localStorage('userInfo'));
				} else {
					return {};
				}
			}
		}
	},
	// 手机号码中间四位加*
	telPhoneFilter(value) {
		return value.substr(0, 3) + '****' + value.substr(7)
	},
	// 根据文件名后缀区分 文件类型
	/*
	 * @param: fileName - 文件名称
	 * 无后缀匹配 - false
	 * 图片 - image
	 * 视频 - video
	 * 音频 - radio
	 * 其他匹配项 - other
	 */
	matchType(fileName) {
		// 后缀获取
		var suffix = '';
		// 获取类型结果
		var result = '';
		try {
			var flieArr = fileName.split('.');
			suffix = flieArr[flieArr.length - 1];
		} catch (err) {
			suffix = '';
		}
		// fileName无后缀返回 false
		if (!suffix) {
			result = false;
			return result;
		}
		// 图片格式
		var imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif'];
		// 进行图片匹配
		result = imglist.some(function(item) {
			return item == suffix;
		});
		if (result) {
			result = 'image';
			return result;
		};
		// 匹配 视频
		var videolist = ['avi', 'mov', 'rmvb', 'rm', 'flv', 'mp4', '3gp', 'mkv', 'ts', 'm3u8'];
		result = videolist.some(function(item) {
			return item == suffix;
		});
		if (result) {
			result = 'video';
			return result;
		};
		// 匹配 音频
		var radiolist = ['mp3', 'wav', 'wmv'];
		result = radiolist.some(function(item) {
			return item == suffix;
		});
		if (result) {
			result = 'radio';
			return result;
		}
		// 其他 文件类型
		result = 'other';
		return result;
	},
	// 判断是否是微信浏览器
	isWeixin() {
		// #ifdef H5
		const ua = navigator.userAgent.toLowerCase();
		if (ua.match(/MicroMessenger/i) == 'micromessenger') {
			return true;
		} else {
			return false;
		}
		// #endif
		// #ifdef MP-WEIXIN
		return false;
		// #endif
	},
	// 生成UUID设备唯一标识(生成之后，存到localStorage,localStorage没有的话，再重新生成)
	getUUID() {
		let XClientId = this.localStorage('XClientId');
		if (!XClientId) {
			XClientId = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
				var r = Math.random() * 16 | 0,
					v = c == 'x' ? r : (r & 0x3 | 0x8);
				return v.toString(16);
			});
			this.localStorage('XClientId', XClientId);
		}
		return XClientId;
	},
	// 取视频第一帧图片
	getVideoBase64(url) {
		return new Promise(resolve => {
			let dataURL = '';
			let video = document.createElement("video");
			video.setAttribute('crossOrigin', 'anonymous'); //处理跨域
			video.setAttribute('src', url);
			video.setAttribute('width', 400);
			video.setAttribute('height', 240);
			video.setAttribute('preload', 'auto');
			video.addEventListener('loadeddata', function() {
				let canvas = document.createElement("canvas"),
					width = video.width, //canvas的尺寸和图片一样
					height = video.height;
				canvas.width = width;
				canvas.height = height;
				canvas.getContext("2d").drawImage(video, 0, 0, width, height); //绘制canvas
				dataURL = canvas.toDataURL('image/jpeg'); //转换为base64
				resolve(dataURL);
			});
		})
	},
	// 获取路由参数对象
	getQueryObject(url) {
		// #ifdef H5
		url = this.validatenull(url) ? window.location.href : url;
		// #endif
		const search = url.substring(url.lastIndexOf('?') + 1);
		const obj = {};
		const reg = /([^?&=]+)=([^?&=]*)/g;
		search.replace(reg, (rs, $1, $2) => {
			const name = decodeURIComponent($1);
			let val = decodeURIComponent($2);
			val = String(val);
			obj[name] = val;
			return rs;
		})
		return obj;
	},
	isObjectValueEqual(a, b) {
		//取对象a和b的属性名
		var aProps = Object.getOwnPropertyNames(a);
		var bProps = Object.getOwnPropertyNames(b);
		//判断属性名的length是否一致
		if (aProps.length != bProps.length) {
			return false;
		}
		//循环取出属性名，再判断属性值是否一致
		for (var i = 0; i < aProps.length; i++) {
			var propName = aProps[i];
			if (a[propName] !== b[propName]) {
				return false;
			}
		}
		return true;
	},
	// 获取路由参数键名
	getQueryString(b) {
		const c = new RegExp('(^|&)' + b + '=([^&]*)(&|$)');
		const d = decodeURIComponent(window.location.search).substr(1).match(c);
		return (d != null) ? unescape(d[2]) : null
	},
	// 判断是否为空
	validatenull(val) {
		if (typeof val === 'boolean') {
			return false;
		}
		if (typeof val === 'number') {
			return false;
		}
		if (val instanceof Array) {
			if (val.length === 0) return true;
		} else if (val instanceof Object) {
			if (JSON.stringify(val) === '{}') return true;
		} else {
			if (val === 'null' || val == null || val === 'undefined' || val === undefined || val === '')
				return true;
			return false;
		}
		return false;
	},
	// rsa 加密
	rsaEncryption: encryption.rsaEncryption,
	setDecrypt: encryption.setDecrypt,
	// rsa加密长字符
	rsaLongEncryption: encryption.rsaLongEncryption,
	setDecryptArray: encryption.setDecryptArray,
	// 判断是pc端还是移动端
	isMobile() {
		// #ifdef H5
		if (this.APP()) {
			if (this.isAndroidAllInOne()) {
				return false;
			} else {
				return true;
			}
		} else {
			if (window.navigator.userAgent.match(
					/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
				)) {
				return true; // 移动端
			} else {
				return false; // PC端
			}
		}
		// #endif
		// #ifdef MP-WEIXIN
		return true
		// #endif
	},
	// 是否不是鸿蒙系统
	isNoHarmony() {
		// #ifdef H5
		if (this.APP()) {
			return navigator.userAgent.toLowerCase().indexOf('_harmony') === -1 ? true : false;
		} else {
			return true;
		}
		// #endif
		// #ifdef MP-WEIXIN
		return true;
		// #endif
	},
	APP() {
		// #ifdef H5
		return this.APP_UA();
		// #endif
		// #ifdef MP-WEIXIN
		return false;
		// #endif
	},
	//在非1号客户端内（其他我们做的app）中嵌入1号客户端页面，自动隐藏立即打开、涉及到用户操作的界面逻辑（点赞、评论、收藏等）
	otherWapInApp() {
		// #ifdef H5
		if (this.APP_JS()) {
			let appInfo = app.getApp();
			appInfo = (typeof appInfo == 'object') ? appInfo : JSON.parse(appInfo);
			const appname = appInfo.package;
			const wapname = CONFIG.INFO.APP_PACKAGE;
			if (appname !== wapname) {
				return true;
			} else {
				return false;
			}
		} else {
			return false;
		}
		// #endif
		// #ifdef MP-WEIXIN
		return false;
		// #endif
	},
	// #ifdef H5
	APP_UA() {
		const hasUa = navigator.userAgent.toLowerCase().indexOf(CONFIG.INFO['USER_AGENT']) > -1;
		if (hasUa) {
			return hasUa;
		} else {
			if (this.iOS()) {
				if (this.APP_JS()) {
					let appInfo = app.getApp();
					appInfo = (typeof appInfo == 'object') ? appInfo : JSON.parse(appInfo);
					if (appInfo['package'] == CONFIG.INFO.APP_PACKAGE) {
						return true;
					} else {
						return false;
					}
				} else {
					return false;
				}
			} else {
				return hasUa;
			}
		}
	},
	APP_JS() {
		return (typeof app !== 'undefined') ? true : false;
	},
	Android() {
		return navigator.userAgent.match(/Android/i) ? true : false;
	},
	iOS() {
		return navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true : false;
	},
	WeChat() {
		return navigator.userAgent.match(/MicroMessenger/i) ? true : false;
	},
	QQ() {
		return navigator.userAgent.toLowerCase().match(/qq/i) ? true : false;
	},
	Mobile() {
		return navigator.userAgent.match(/mobile/i) ? true : false;
	},
	isIE() {
		// #ifdef H5
		if (!!window.ActiveXObject || "ActiveXObject" in window) {
			return true;
		} else {
			return false;
		}
		// #endif
		// #ifdef MP-WEIXIN
		return false;
		// #endif
	},
	Any() {
		return (this.Android() || this.iOS() || this.APP() || this.WeChat() || this.QQ() || this.Mobile());
	},
	loadBMap() {
		// 蒲江百度地图浏览器key：
		// grRGq2MynIL1f13saAaqewevtZxoPxXc
		const ak = CONFIG.INFO.APP_ID === 22 ? 'grRGq2MynIL1f13saAaqewevtZxoPxXc' :
			'SdoSx22VK9BGYQzZjb68HiM4mXVmNksl';
		return new Promise(function(resolve, reject) {
			if (typeof BMap !== 'undefined') {
				resolve(BMap);
				return true;
			}
			window.onBMapCallback = function() {
				resolve(BMap);
			}
			let script = document.createElement('script');
			script.type = 'text/javascript';
			script.src =
				'http://api.map.baidu.com/api?v=2.0&ak=' + ak + '&callback=onBMapCallback';
			script.onerror = reject;
			document.head.appendChild(script);
		})
	},
	// #endif
	// 存储/获取存储数据
	localStorage(b, c) {
		if (c !== undefined) {
			let d = (typeof c === 'object') ? JSON.stringify(c) : c;
			return uni.setStorageSync(b + '_' + CONFIG.INFO.APP_ID, d);
		} else {
			return uni.getStorageSync(b + '_' + CONFIG.INFO.APP_ID);
		}
	},
	// 删除存储数据
	removeLocalStorage(d) {
		uni.removeStorageSync(d + '_' + CONFIG.INFO.APP_ID);
	},
	// 发起请求
	getAPIData(url, method, data, successFun, failFun) {
		if (url && method && typeof data === 'object' && typeof successFun === 'function') {
			uni.request({
				url: url,
				method: method,
				data: data,
				header: {
					'content-type': 'application/x-www-form-urlencoded'
				},
				dataType: 'json',
				success: (res) => {
					successFun(res);
				},
				fail: (err) => {
					if (typeof failFun === 'function') {
						failFun(err);
					}
				}
			});
		} else {
			console.error('getApiData函数参加错误！接口地址：' + url);
		}
	},
	// 显示消息提示框
	showToast(title, icon = 'none') {
		return uni.showToast({
			title: title,
			duration: 2000,
			icon: icon
		});
	},
	// 格式化时间戳
	formatDate(dateTimeStamp) {
		let result = '';
		let nowYear = new Date().getFullYear();
		let date = new Date(dateTimeStamp * 1000);
		let YY = date.getFullYear();
		let MM = date.getMonth() + 1;
		MM = MM < 10 ? ('0' + MM) : MM;
		let d = date.getDate();
		d = d < 10 ? ('0' + d) : d;
		let h = date.getHours();
		h = h < 10 ? ('0' + h) : h;
		let m = date.getMinutes();
		m = m < 10 ? ('0' + m) : m;
		let s = date.getSeconds();
		s = s < 10 ? ('0' + s) : s;
		let minute = 60;
		let hour = minute * 60;
		let now = parseInt(+new Date() / 1000);
		let diffValue = now - dateTimeStamp;
		if (diffValue < 0) {
			return;
		}
		let minC = diffValue / minute;
		let hourC = diffValue / hour;
		let dayC = this.handleDate(dateTimeStamp);
		if (diffValue >= 0 && diffValue <= minute) {
			result = "刚刚";
		} else if (minC >= 1 && minC < 60) {
			result = parseInt(minC) + "分钟前";
		} else if (hourC >= 1 && hourC < 24) {
			result = parseInt(hourC) + "小时前";
		} else if (dayC == 1) {
			result = "昨天" + h + ':' + m;
		} else if (dayC == 2) {
			result = "前天" + h + ':' + m;
		} else if (nowYear === YY) {
			result = MM + '-' + d + ' ' + h + ':' + m;
		} else {
			result = YY + '-' + MM + '-' + d + ' ' + h + ':' + m;
		}
		return result;
	},
	handleDate(time){
		const now = new Date().setHours(0, 0, 0, 0);
		const targetDate = new Date(time * 1000).setHours(0, 0, 0, 0);
		const timeDifference = now - targetDate;
		const daysDifference = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
		return daysDifference;
	},
	// 处理列表的图片大小
	handleImgSize(originWidth, originHeight, isthree = true) {
		let itemWidth = 0;
		let itemHeight = 0;
		const SCREEN_WIDTH = windowInfo.screenWidth >= 640 ? 640 : windowInfo.screenWidth;
		let maxImgHeight = SCREEN_WIDTH / 2; // 最高高度为屏幕宽度的一半
		let maxImgWidth = SCREEN_WIDTH * 2 / 3; // 最大宽度为屏幕宽度的2/3
		let tempImgHeight = maxImgWidth;
		let tempImgWidth = maxImgWidth;
		if (originWidth && originWidth != 0) {
			tempImgHeight = SCREEN_WIDTH * 2 / 3 * (originHeight / originWidth)
		}
		if (originHeight && originHeight != 0) {
			tempImgWidth = SCREEN_WIDTH / 2 * (originWidth / originHeight)
		}
		if (tempImgWidth > maxImgWidth) { // 如果图片宽度超出最大宽度，以最大宽度为基准
			itemWidth = maxImgWidth;
			itemHeight = tempImgHeight;
		} else { // 如果图片宽度小于最大宽度，以最大高度为基准
			itemWidth = tempImgWidth;
			itemHeight = maxImgHeight;
		}
		return isthree ? [parseInt(itemWidth * 3), parseInt(itemHeight * 3)] : [parseInt(itemWidth), parseInt(
			itemHeight)];
	},
	setupWebViewJavascriptBridge(callback) {
		if (window.WebViewJavascriptBridge) {
			return callback(WebViewJavascriptBridge);
		}
		if (window.WVJBCallbacks) {
			return window.WVJBCallbacks.push(callback);
		}
		window.WVJBCallbacks = [callback];
		var WVJBIframe = document.createElement('iframe');
		WVJBIframe.style.display = 'none';
		WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
		document.documentElement.appendChild(WVJBIframe);
		setTimeout(function() {
			document.documentElement.removeChild(WVJBIframe)
		}, 0)
	},
	callhandler(name, callback) {
		this.setupWebViewJavascriptBridge(function(bridge) {
			bridge.callHandler(name, callback)
		})
	},
	callBridgefn() {
		let p = new Promise((resolve, reject) => {
			this.callhandler('getCommonHeader', (data) => {
				resolve(data);
			})
		})
		return p;
	},
	setWeixinShare(title, desc, imgUrl) {
		const _this = this;
		if (_this.isWeixin()) {
			const url = window.location.href;
			const shareImg = window.location.origin + (_this.isJinniu() || _this.isWenjiang() ? '/rw' : '') + CONFIG
				.INFO.IMG_PATH + 'logo.png';
			_this.getJsApiData(['updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareAppMessage',
					'onMenuShareTimeline'
				], null,
				() => {
					jweixin
						.updateAppMessageShareData({
							title: title,
							desc: _this.validatenull(desc) ? CONFIG.INFO.SHARE_DESC : desc,
							link: url,
							imgUrl: _this.validatenull(imgUrl) ? shareImg : imgUrl,
							success: res => {
								console.log("res11: ", res);
							},
							fail: err => {
								console.error("err22: ", err);
							}
						}),
						jweixin.updateTimelineShareData({
							title: title,
							link: url,
							imgUrl: _this.validatenull(imgUrl) ? shareImg : imgUrl,
							success: res => {
								console.log("res22: ", res);
							},
							fail: err => {
								console.error("err44: ", err);
							},
						}),
						jweixin.onMenuShareAppMessage({
							title: title,
							desc: _this.validatenull(desc) ? CONFIG.INFO.SHARE_DESC : desc,
							link: url,
							imgUrl: _this.validatenull(imgUrl) ? shareImg : imgUrl,
							success: res => {
								console.log('33', res);
							},
							error: err => {
								console.error(err);
							}
						}),
						jweixin.onMenuShareTimeline({
							title: title,
							link: url,
							imgUrl: _this.validatenull(imgUrl) ? shareImg : imgUrl,
							success: res => {
								console.log('44', res);
							},
							error: err => {
								console.error(err);
							}
						});
				})
		} else {
			return false;
		}
	},
	getJsApiData(jsApiList, openTagList, readyFc) {
		const _this = this;
		if (_this.validatenull(openTagList)) {
			openTagList = {};
		}
		const url = window.location.href;
		_this.getAPIData('https://web.cdmp.candocloud.cn/api/wechat/getconfig', 'GET', {
			account: CONFIG.INFO.WECHAT_ACCOUNT,
			url: url
		}, res => {
			const str = res.data;
			const appId = str.substring(_this.findStr(str, '"', 2) + 1, _this.findStr(str,
				'"', 3));
			const timestamp = str.substring(_this.findStr(str, ':', 1) + 1, _this.findStr(
				str, ',', 1));
			let nonceStr = str.substring(_this.findStr(str, '"', 8) + 1, _this.findStr(str,
				'"', 9));
			let signature = str.substring(_this.findStr(str, '"', 12) + 1, _this.findStr(
				str, '"', 13));
			jweixin.config({
				debug: false,
				appId: appId,
				timestamp: timestamp,
				nonceStr: nonceStr,
				signature: signature,
				jsApiList: jsApiList,
				...openTagList
			});
			jweixin.ready(() => {
				readyFc();
			});
			jweixin.error((e) => {
				console.log(e, '失败信息')
			})
		}, err => {
			console.error('接口请求失败', err);
		});
	},
	findStr(str, cha, num) {
		var x = str.indexOf(cha);
		for (var i = 0; i < num; i++) {
			x = str.indexOf(cha, x + 1);
		}
		return x;
	},
	sessionStorage(b, c) {
		if (this.validatenull(c)) {
			// #ifdef H5
			return window.sessionStorage.getItem(b + '_' + CONFIG.INFO.APP_ID);
			// #endif
			// #ifdef MP-WEIXIN
			return wx.getStorageSync(b + '_' + CONFIG.INFO.APP_ID);
			// #endif
		} else {
			let d = (typeof c === 'object') ? JSON.stringify(c) : c;
			// #ifdef H5
			return window.sessionStorage.setItem(b + '_' + CONFIG.INFO.APP_ID, d);
			// #endif
			// #ifdef MP-WEIXIN
			return wx.setStorageSync(b + '_' + CONFIG.INFO.APP_ID, d);
			// #endif
		}
	},
	removeSessionStorage(d) {
		// #ifdef H5
		window.sessionStorage.removeItem(d + '_' + CONFIG.INFO.APP_ID);
		// #endif
		// #ifdef MP-WEIXIN
		wx.removeStorageSync(d + '_' + CONFIG.INFO.APP_ID);
		// #endif
	},
	isShowBackIcon() {
		// #ifdef H5
		let url = window.location.href;
		let a = JSON.parse(window.sessionStorage.firsturlobj);
		let b = this.getQueryObject(url);
		let isSame = this.isObjectValueEqual(a, b);
		if (isSame && window.sessionStorage.firstpathname == window.location.pathname) {
			return false;
		} else {
			return true;
		}
		// #endif
		// #ifdef MP-WEIXIN
		return false;
		// #endif
	},
	// 思源宋体
	loadSFontCss() {
		var link = document.createElement("link");
		link.setAttribute("rel", "stylesheet");
		link.setAttribute("href", "https://g.omtech.cn/font/css/SourceHanSerifCN.css");
		document.head.appendChild(link);
	},
	// 思源黑体
	loadHFontCss() {
		var link = document.createElement("link");
		link.setAttribute("rel", "stylesheet");
		link.setAttribute("href", "https://g.omtech.cn/font/css/SourceHanSansCN.css");
		document.head.appendChild(link);
	},
	calc640Rate(num) {
		const big = 640 * num / 375;
		return `${Math.round(big)}rpx`;
	},
	filterViews(num) {
		if (num >= 10000 && num < 1000000) {
			num = (num / 10000).toFixed(1) + "万";
		}
		if (num >= 1000000) {
			num = "100万+";
		}
		return num;
	},
	parseNum(num) {
		if (num < 10000) {
			return num;
		} else if (num < 100000000) {
			return (num / 10000).toFixed(1) + '万';
		} else {
			return (num / 100000000).toFixed(1) + '亿'
		}
	},
	// #ifdef H5
	loadWebsiteIcon() {
		const iconHref = window.location.origin + (this.isJinniu() || this.isWenjiang() ? '/rw' : '') + CONFIG
			.INFO.IMG_PATH + 'favicon.ico';
		let link = document.createElement("link");
		link.setAttribute("rel", "shortcut icon");
		link.setAttribute("href", iconHref);
		link.setAttribute("type", "image/x-icon");
		document.head.appendChild(link);
	},
	// #endif
	// 判断是否是安卓一体机大屏
	isAndroidAllInOne() {
		const userAgent = navigator.userAgent.toLowerCase();
		return userAgent.indexOf("cando_ytj_ua") !== -1;
	},
	// 兼容安卓一体机大屏
	checkWideScreen() {
		if (!this.isMobile() && !this.isAndroidAllInOne()) {
			// 不是一体机环境且是宽屏
			document.documentElement.style.maxWidth = '640px';
			document.documentElement.style.margin = '0 auto';
		} else {
			// 宽度小于等于640px或是一体机环境，移除最大宽度限制
			document.documentElement.style.maxWidth = '';
			document.documentElement.style.margin = '';
		}
	},
	removeWideScreen() {
		document.documentElement.style = null;
	},
	calc1271Rate(num) {
		const big = windowInfo.screenWidth * num / 375;
		return `${big}rpx`;
	},
	calcElderRate(num, addunit = true) {
		const elder = num * 1.3;
		return addunit ? `${Math.round(elder)}rpx` : Math.round(elder);
	}
}

翘翘红

关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
4
评论
uniapp h5 竖向的swiper内嵌视频实现抖音短视频垂直切换，丝滑切换视频效果，无限数据加载不卡顿

博主一开始一直想实现类似抖音进入页面自动播放当前视频，上下滑动切换之后播放当前视频，但最后在ios上出现声音播放，但画面卡顿的问题，估计是ios的浏览器对自动播放做了安全限制，导致自动播放失效，为了功能的可用性，最终放弃自动播放，实现手动点击视频正中心的播放按钮进行播放，再点击视频暂停，这个bug在安卓端暂时没出现，大概率是ios的安全性更高导致的浏览器策略拦截了，需要用户手动交互。
复制链接

扫一扫