【uniapp】APP打包上架应用商-注意事项

初雪云-uniapp启动图自定义生成(支持一键生成storyboard)
HBuilderX需要的自定义storyboard文件格式为 " zip压缩包 "
————————————————————————————
初雪云-App隐私政策在线生成
————————————————————————————
css样式太多的情况,使用 image 可能导致样式生效较慢,出现 “闪一下” 的情况,此时设置 image{will-change: transform},可优化此问题。
————————————————————————————
注意:登录页面和注册页面都需要加《用户协议》和《隐私政策》
例如:登录即代表您已阅读并同意《用户协议》与《隐私政策》

问题一:【iOS】 App微信分享图片不显示(图片地址建议需小于 20K),安卓正常

解决方案:压缩图片使其小于 20K,增加压缩之后 iOS 分享图片就正常显示了。
图片压缩:info.imageUrl + ‘?x-oss-process=image/resize,w_100’
视频封面图压缩:that.fear_data.src+‘?x-oss-process=video/snapshot,t_100,w_100,f_jpg’,

问题二:【IOS】系统上video无法横屏问题

在manifest.json 文件中 app-plus 下添加如下代码
“flexible” : true,
“screenOrientation” : [
“portrait-primary”,
“portrait-secondary”,
“landscape-primary”,
“landscape-secondary”
],

问题三:App内富文本中a标签超链接

解决方案:在components\feng-parse\components\wxParseTemplate0.vue中修改代码
将const { href } = e.currentTarget.dataset;// TODO currentTarget才有dataset
修改为
const href = attr.href;// TODO currentTarget才有dataset

问题四:【IOS】配置使用UIWebview模块

解决方法:在manifest.json 文件中 app-plus 下添加如下代码
“kernel” : {
“ios” : “WKWebview” //或者 “WKWebview”
},
或者在
plus.webview.create(“”,“custom-webview”,{
‘kernel’: ‘WKWebview’
})

问题五:【IOS】使用plus.webview.create引入高德地图页面,"绘制区域地图"无法显示

高德地图-区域地图-实现对地图区域板块进行颜色标注与地图主题风格切换
问题原因:JSAPI 默认启用了 failIfMajorPerformanceCaveat 参数来获取 webgl 上下文,图形绘制性能比较差的环境下不开启WebGL绘制
解决方法:在地图 JSAPI 脚本引用之前设置全局变量 (在window._AMapSecurityConfig前面加上)
window.forceWebGL = true;
window[‘forceWebGLBaseRender’] = true; // 2.0全局变量也可以使用增强版

解决方法引用自:app端webview 提示浏览器版本过低 这种情况如何处理 影响到我自定义地图的样式

问题六:【IOS】短信验证码自动填充两次bug

解决方案:可以给input框加上maxLength属性,让最大长度等于验证码的位数
<input type=“number” maxlength=“6” placeholder=“请输入验证码” placeholder-class=“font-32 c-b9c”>

问题七:【iOS】底部安全区域配置,仅iOS平台生效

在manifest.json 文件中 app-plus 下添加如下代码
“safearea” : {
//安全区域配置,仅iOS平台生效
“bottom” : {
// 底部安全区域配置
“offset” : “none” // 底部安全区域偏移,"none"表示不空出安全区域,“auto"自动计算空出安全区域,默认值为"none”
}
},

问题八:关闭App的窗口回弹效果

在pages.json 文件的 style 中添加如下代码
“app-plus” : {
“bounce” : “none” //关闭窗口回弹效果
}

在这里插入图片描述 在这里插入图片描述

一、“Android” — 设置targetSdkVersion

小米、OPPO、vivo、华为等主流应用商店,将于2023年12月采用 targetSdkVersion>=30的等级要求作为应用上架收录标准。建议广大开发者如期适配。

打开项目的manifest.json文件,在 “App常用其它设置” -> “Android设置” -> “targetSdkVersion” 项中进行设置:
在这里插入图片描述

二、修改App端上传图片/视频 uni.uploadFile

在这里插入图片描述

let that=this;
uni.chooseImage({
	count: 1,
	sourceType: ['camera','album'],
	sizeType: ['compressed', 'original'],
	success: rey => {
		uni.showLoading({ title: '上传中',mask: true });
		uni.uploadFile({
			url: that.uploadUrl, // 你的上传图片接口
			filePath: rey.tempFilePaths[0],
			name: 'file',
			success:(uploadFileRes) =>{
				let res = JSON.parse(uploadFileRes.data)
				uni.hideLoading();
				if(res.code==1){
					
				} else{
					that.toast(res.msg)
				}
			}
		})
	},
	fail: (error) => {}
});

三、配置隐私政策提示框(此方法只支持Android)

在 manifest.json 中配置,在app-plus中添加

uni-app【Android平台隐私与政策提示框】

"privacy" : {
    "prompt" : "template",
    "template" : {
        "title" : "用户协议和隐私政策",
        "message" : "  请你务必审慎阅读、充分理解“用户协议”和“隐私政策”各条款,包括但不限于:为了更好的向你提供服务,我们需要收集你的设备标识、操作日志等信息用于分析、优化应用性能。<br/>  你可阅读<a href='https://https://xieyi.com'>《用户协议》</a>和<a href='https://https://xieyi.com'>《隐私政策》</a>了解详细信息。如果你同意,请点击下面按钮开始接受我们的服务。",
        "buttonAccept" : "同意并接受",
        "buttonRefuse" : "暂不同意",
        "second" : {
            "title" : "温馨提示",
            "message" : "  进入应用前,你需先同意<a href='https://https://xieyi.com'>《用户协议》</a>和<a href='https://https://xieyi.com'>《隐私政策》</a>,否则将退出应用。",
            "buttonAccept" : "同意并继续",
            "buttonRefuse" : "退出应用"
        }
    }
},

效果图
在这里插入图片描述

四、华为应用市场审核(注:应用内提供客服联系方式)

用户告知权限申请的目的

【插件市场】解决软件在运行时,未见向用户告知权限申请的目的,华为等上架被拒问题

在这里插入图片描述
4.1 在上传图片中使用

chooseImage选择图片的sourceType要自己定义,来判断选择的权限

<template>
	<view class="page">
		<view class="authItem" @tap.stop="judgment">上传图片</view>
		<!-- 用户告知权限申请的目的 -->
		<yk-authpup ref="authpup" type="top" @changeAuth="changeAuth" :permissionID="permissionID"></yk-authpup>
	</view>
</template>

<script>
	var sourceType = [ ['camera'],['album'],['camera','album'] ]
	import ykAuthpup from "@/components/yk-authpup/yk-authpup";
	export default {
		components: { ykAuthpup },
		data() {
			return {
				// 用户告知权限申请的目的
				soIndex: 0,
				permissionID:''
			}
		},
		methods: {
			judgment() { // 判断H5还是App
				// #ifdef APP-PLUS
				let that=this;
				uni.showActionSheet({
					itemList: ['拍摄', '从相册选择'],
					success: function (res) {
						that.soIndex = res.tapIndex;
						if(res.tapIndex==0){ // 相机
							this.permissionID = 'CAMERA';
						} else if(res.tapIndex==1){ // 相册选择
							this.permissionID = 'WRITE_EXTERNAL_STORAGE';
						}
						if (plus.os.name == 'Android') setTimeout(()=>{ that.$refs['authpup'].open(); },200)
						if (plus.os.name == "iOS") that.changeAuth();
					},
					fail: function (res) { console.log(res.errMsg); }
				});
				// #endif
				// #ifdef H5
				this.changeAuth();
				// #endif
			},
			changeAuth() { //用户授权权限后的回调
				this.choose_img();
			},
			choose_img(){
				// ios需要先uni.chooseImage(这样ios设置中才会有相机或者相册出现),系统会弹出权限允许或拒绝
				var that=this;
				uni.chooseImage({
					count: 1,
					// #ifdef H5
					sourceType: ['camera','album'],
					// #endif
					// #ifdef APP-PLUS
					sourceType: sourceType[this.soIndex],
					// #endif
					sizeType: ['compressed', 'original'],
					success: rey => {
						uni.showLoading({ title: '上传中',mask: true });
						uni.uploadFile({
							url: that.uploadUrl,
							filePath: rey.tempFilePaths[0],
							name: 'file',
							success:(res) =>{
								var data=JSON.parse(res.data);
								if(data.code==1){
								
								} else{
									that.toast(data.msg)
								}
							}
						})
					},
					fail: (err) => {
						// #ifdef APP-PLUS
						// 只有相机需要手动加“去设置”弹窗,相册系统自带
						// 失败时提示"chooseImage:fail No filming permission"是没有权限的意思,再弹出“去设置”弹窗
						if(plus.os.name == "iOS"&&err["errMsg"]=="chooseImage:fail No filming permission"){
							setTimeout(()=>{ that.$refs['authpup'].open(); },200)
						}
						// #endif
					}
				});
			},
		}
	}
</script>

<style></style>

4.2 对yk-authpup插件进行修改- components/yk-authpup/yk-authpup

由于权限拒绝之后,再次点击 权限说明弹窗总是会一闪一闪,所以进行了修改。
[/** ====新增==== */] 是我修改的内容

<template>
	<!-- 用户告知权限申请的目的 -->
	<view v-if="showPopup" class="uni-popup" :style="{top:isNativeHead?'':StatusBar}">
		<view :class="[type, ani, animation ? 'ani' : '']" class="uni-custom uni-popup__wrapper" @click="close(true)">
			<view class="uni-popup__wrapper-box">
				<view class="title">{{authList[permissionID].title}}</view>
				<view class="content">{{authList[permissionID].content}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'YkAuthpup',
		props: {
			// 开启动画
			animation: {
				type: Boolean,
				default: true
			},
			type: {
				type: String,
				default: 'top'
			},
			show: {
				type: Boolean,
				default: true
			},
			//是否是原生头部
			isNativeHead:{
				type: Boolean,
				default: false
			},
			permissionID: {
				type: [String, Number],
				default: ''
			}
		},
		data() {
			return {
				ani: '',
				showPopup: false,
				StatusBar:'',
				authList: {
					'WRITE_EXTERNAL_STORAGE': {
						explain: "存储(相册)", 
						title: "存储空间/照片权限申请说明",
						content: "便于您使用该功能拍照上传您的照片/视频及用于更换头像、xxxx、资料上传等场景中使用,请您确认授权,否则无法使用该功能"
					},
					'CAMERA':{
						explain: "相机、存储(相册)", 
						title: "相机/摄像头权限申请说明",
						content: "便于您使用该功能拍照上传您的照片/视频及用于更换头像、xxxx、资料上传等场景中使用,请您确认授权,否则无法使用该功能"
					},
					'ACCESS_FINE_LOCATION': {
						explain: "地理位置", 
						title: "地理位置权限申请说明",
						content: "便于应用程序可以提供基于位置的服务、计算距离、获取经纬度、定位导航、附近搜索等功能,请您确认授权,否则无法使用该功能"
					},
					'CALL_PHONE': {
						explain: "拨打电话", 
						title: "拨打电话权限申请说明",
						content: "便于您使用该功能联系xxxx,请您确认授权,否则无法使用该功能"
					}
				},
				/** ====新增==== */
				quanx: {
					'WRITE_EXTERNAL_STORAGE': 0,
					'CAMERA': 0,
					'ACCESS_FINE_LOCATION': 0,
					'CALL_PHONE': 0,
				},
				refuseNum:{
					'WRITE_EXTERNAL_STORAGE': 0,
					'CAMERA': 0,
					'ACCESS_FINE_LOCATION': 0,
					'CALL_PHONE': 0,
				},//拒绝次数,
				/** ====新增==== */
			}
		},
		created() {
			// #ifdef APP-PLUS
			this.getSystemInfo();
			// #endif
		},
		methods: {
			//获取状态栏高度
			getSystemInfo() {
				let _this = this;
				uni.getSystemInfo({
					success: function(e) {
						_this.StatusBar = e.statusBarHeight + 'px'; //用于自定义头部时,给手机状态栏留出位置,可通过isNativeHead这个参数控制
					}
				})
			},
			open() {
				this.requestPermissions(this.permissionID);
			},
			close(type) {
				this.ani = '';
				this.$nextTick(() => {
					setTimeout(() => {
						this.showPopup = false;
					}, 300)
				})
			},
			//权限检测
			requestPermissions(permissionID) {
				let _this = this;
				/** ====新增==== */
				let _quanx = uni.getStorageSync('quanx')||_this.quanx;
				/** ====新增==== */
				// #ifdef APP-PLUS
				//判断安卓与ios设备
				if (plus.os.name == 'Android') {
					let _permissionID = 'android.permission.' + permissionID;
					plus.android.checkPermission(_permissionID,
						granted => {
							if (granted.checkResult == -1) {
								/** ====新增判断==== */
								//还未授权当前查询的权限,打开权限申请目的自定义弹框
								if(_quanx[permissionID]==0){
									_this.showPopup = true;
									_this.$nextTick(() => {
										setTimeout(() => {
											_this.ani = 'uni-' + _this.type
										},30)
									})
								}
								/** ====新增==== */
							}
						},
						error => {
							console.log(error.message);
						}
					);
					plus.android.requestPermissions([_permissionID], (e) => {
						//关闭权限申请目的自定义弹框
						_this.$nextTick(() => {
							setTimeout(() => {
								_this.ani = '';
								_this.showPopup = false
							}, 0)
						})
						// console.log(e,'kkkkk')
						if (e.granted.length > 0) { // 已获取的权限
							/** ====新增==== */
							_quanx[permissionID]=1;
							/** ====新增==== */
							//当前查询权限已授权,此时可以通知页面执行接下来的操作
							_this.$emit('changeAuth');
						}
						if (e.deniedAlways.length > 0) { // 永久拒绝申请的权限
							/** ====新增==== */
							_quanx[permissionID]=-1;
							// 拒绝次数
							let _refuseNum = uni.getStorageSync('refuseNum')||_this.refuseNum;
							_refuseNum[permissionID]++;
							if(_refuseNum[permissionID]!=1){
								//当前查询权限已被永久禁用,此时需要引导用户跳转手机系统设置去开启
								uni.showModal({
									title: '温馨提示',
									content: '您未允许xxxx获取'+this.authList[permissionID].explain+'权限,您可在系统设置中开启',
									cancelText: "暂不", confirmText: "去设置", showCancel: true,
									success: (res) => {
										if (res.confirm) {
											_this.goSetting();
										}
									}
								})
							}
							uni.setStorageSync('refuseNum', _refuseNum); // 拒绝次数
							/** ====新增==== */
						}
						/** ====新增==== */
						uni.setStorageSync('quanx', _quanx);
						/** ====新增==== */
					})
				} else {
					//IOS不需要添加自定义弹框来描述权限目的,因为在配置文件的隐私信息访问的许可描述里可添加
					//正常可以直接调用uni的API调起权限询问弹框使用各种权限,下面的判断使用场景主要是在IOS禁用某权限后,这个可以判断有无权限,进而引导用户跳转设置开启,仅列出了位置、相册、通讯录、相机、录音等权限,其他IOS权限可具体参考 https://ext.dcloud.net.cn/plugin?id=15787
					let result = 0;
					if (permissionID == 'ACCESS_FINE_LOCATION') {
						//IOS检测位置权限
						let cLLocationManager = plus.ios.importClass("CLLocationManager"),
							authStatus = cLLocationManager.authorizationStatus(),
							enable = cLLocationManager.locationServicesEnabled();
						if (enable && authStatus != 2) {
							result = 1;
						} else {
							result = 0;
						}
						plus.ios.deleteObject(cLLocationManager);
					} else if (permissionID == 'WRITE_EXTERNAL_STORAGE') {
						result = 1; // ios相册权限已禁用时,系统会自动弹出“去设置”弹窗
						//IOS检测相册权限
						// let PHPhotoLibrary = plus.ios.importClass("PHPhotoLibrary"),
						// 	authStatus = PHPhotoLibrary.authorizationStatus();
						// if (authStatus === 3) {
						// 	result = 1;
						// } else {
						// 	result = 0;
						// }
						// plus.ios.deleteObject(PHPhotoLibrary);
					} else if (permissionID == 'CAMERA') {
						//IOS检测相机/摄像头权限
						let avCaptureDevice = plus.ios.importClass("AVCaptureDevice"),
						    authStatus = avCaptureDevice.authorizationStatusForMediaType("vide");
						if (authStatus === 3) {
						  result = 1;
						} else {
						  result = 0;
						}
						plus.ios.deleteObject(avCaptureDevice);
					} else if (permissionID == 'CALL_PHONE') {
						result = 1; // 安卓需要权限,ios拨打电话不需要权限
						//IOS检测通讯录权限
						// let contactStore = plus.ios.importClass("CNContactStore"),
						// 	authStatus = contactStore.authorizationStatusForEntityType(0);
						// if (authStatus === 3) {
						// 	result = 1;
						// } else {
						// 	result = 0;
						// }
						// plus.ios.deleteObject(contactStore);
					}else if(permissionID == 'RECORD_AUDIO'){
						//IOS检测麦克风权限
						let aVAudioSession = plus.ios.importClass("AVAudioSession"),
							aVAudio = aVAudioSession.sharedInstance(),
							authStatus = aVAudio.recordPermission();
						if ([1684369017, 1970168948].includes(authStatus)) {
						  result = 0;
						} else {
						  result = 1;
						}
						plus.ios.deleteObject(aVAudioSession);
					}
					if (result) {
						//当前查询权限已授权,此时可以通知页面执行接下来的操作
						_this.$emit('changeAuth')
					} else {
						//当前查询的权限已禁用,引导用户跳转手机系统设置去开启
						uni.showModal({
							title: '温馨提示', 
							content: '您未允许xxxx获取'+this.authList[permissionID].explain+'权限,您可在系统设置中开启',
							cancelText: "暂不", confirmText: "去设置", showCancel: true, 
							success: (res) => {
								if (res.confirm) {
									_this.goSetting();
								}
							}
						})
					}
				}
				// #endif
			},
			//跳转手机系统设置
			goSetting() {
				if (plus.os.name == "iOS") {
					var UIApplication = plus.ios.import("UIApplication");
					var application2 = UIApplication.sharedApplication();
					var NSURL2 = plus.ios.import("NSURL");
					var setting2 = NSURL2.URLWithString("app-settings:");
					application2.openURL(setting2);
					plus.ios.deleteObject(setting2);
					plus.ios.deleteObject(NSURL2);
					plus.ios.deleteObject(application2);
				} else {
					var Intent = plus.android.importClass("android.content.Intent");
					var Settings = plus.android.importClass("android.provider.Settings");
					var Uri = plus.android.importClass("android.net.Uri");
					var mainActivity = plus.android.runtimeMainActivity();
					var intent = new Intent();
					intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
					var uri = Uri.fromParts("package", mainActivity.getPackageName(), null);
					intent.setData(uri);
					mainActivity.startActivity(intent);
				}
			}
		}
	}
</script>

<style lang="scss">
	.uni-popup {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 99999;
		overflow: hidden;
		&__wrapper {
			position: absolute;
			z-index: 999;
			/* #ifndef APP-NVUE */
			box-sizing: border-box;
			/* #endif */
			&.ani {
				/* #ifndef APP-NVUE */
				transition: all 0.3s;
				/* #endif */
			}
			&.top {
				top: 0;
				width:705rpx;
				/* #ifdef APP-NVUE */
				left:22.5rpx;
				/* #endif */
				/* #ifndef APP-NVUE */
				left:0;
				transform: translateY(-705rpx);
				/* #endif */
			}
			&-box {
				position: relative;
				/* #ifndef APP-NVUE */
				box-sizing: border-box;
				/* #endif */
			}
			&.uni-custom {
				& .uni-popup__wrapper-box {
					width: 705rpx;
					/* #ifndef APP-NVUE */
					margin: 0 22.5rpx;
					/* #endif */
					padding: 20rpx;
					background: #fff;
					border: solid 2rpx #ddd;
					// box-shadow: 0 4rpx 20rpx 0 rgba(225,225,225,0.6);
					/* #ifndef APP-NVUE */
					box-sizing: border-box;
					/* #endif */
					border-radius: 36rpx;
					.title{
						font-size: 34rpx;
						// font-weight: bold;
					}
					.content{
						font-size: 28rpx;
						color: #6b6b6b;
						margin-top: 16rpx;
						line-height: 1.4
;
					}
				}
				&.top{
					& .uni-popup__wrapper-box {
						width: 705rpx;
					}
				}
			}
			&.uni-top{
				transform: translateY(0);
			}
		}
	}
</style>

五、在《隐私政策》中增加 “高德开放平台SDK”

如果使用com.amap.api(高德)SDK,注意要写在隐私里面
高德开放平台定位SDK
SDK用途: 实现定位、定位导航、计算距离、获取经纬度
SDK收集个人信息类型:位置信息(经纬度、精确位置、粗略位置)【通过IP 地址、GNSS信息、WiFi状态、WiFi参数、WiFi列表、SSID、BSSID、基站信息、信号强度的信息、蓝牙信息、传感器信息(矢量、加速度、压力)、设备信号强度信息获取、外部存储目录】、设备标识信息(IMEI、IDFA、IDFV、Android ID、MEID、MAC地址、OAID、IMSI、ICCID、硬件序列号)、当前应用信息(应用名、应用版本号)、设备参数及系统信息(系统属性、设备型号、操作系统、运营商信息)。

在这里插入图片描述

六、uniapp中解决在富文本中video组件在app端层级过高的问题(富文本中的video)

解决方案:用图片(封面图)进行视频占位,点击图片跳转页面播放视频
在components\feng-parse\components\wxParseVideo.vue中修改代码

用图片(封面图)进行视频占位,点击图片跳转页面播放视频
在components\feng-parse\parse.vue中修改代码
修改setHtml()此方法
results.nodes.forEach((item,index) => {
setTimeout(() => {
if(item.node){
if(item.nodes){
// 新增字段aindex
item.nodes.forEach((jtem) => {
jtem.aindex = index;
})
}
this.nodes.push(item)
}
}, 0);
})

node.aindex 是我新增的字段,如果富文本中有多个视频时,以此区分ID

wxParseVideo.vue

<template>
<!-- 这个模板用来解决原生video总是浮在最上层的问题,使用view替换video,播放是再替换回,监听一个事件,用来被遮盖时做替换video -->
<!--增加video标签支持,并循环添加-->
<!-- @click="play" -->
	<view>
		<!-- #ifdef H5 -->
		<view v-if="!playState" :class="node.classStr" :style="node.styleStr" style="display: inline-block;margin: auto;max-width: 100%;" class="video-video">
			<view style="display: flex;width: 100%;height:100%;flex-direction: row; justify-content: center;align-items: center;">
				<image src="https://gwbj.tongwenkeji.com/html/static/play.png" style="width: 20%;" mode="widthFix"></image>
			</view>
		</view>
		<video :autoplay="false" v-if="playState" class="video-video"
		:poster="node.attr.src+'?x-oss-process=video/snapshot,t_100,f_jpg'"
		@fullscreenchange="fullscreen" :object-fit="objectFit"
		:class="node.classStr" :style="node.styleStr" :src="node.attr.src"></video>
		<!-- #endif -->
		<!-- #ifdef APP -->
		<view class="relative h-450" @click="onVideo(node.attr.src,node.aindex)">
			<view class="video_cover wh-100p fcc">
				<image class="wh-70" src="../../../static/images/play1.png" mode="widthFix"></image>
			</view>
			<image class="wp-100 h-450" :src="node.attr.src+'?x-oss-process=video/snapshot,t_100,f_jpg'" mode="aspectFill"></image>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
export default {
	name: 'wxParseVideo',
	props: {
		node: {}
	},
	data(){
		return{
			objectFit: 'cover',
			playState: true,
			videoStyle: 'width: 100%;',
			mp4Url: ''
		}
	},
	methods:{
		play(){
			console.log('点击了video 播放')
			//显示播放器并播放播放器
			this.playState = !this.playState
		},
		fullscreen(event) {
			if(event.detail.fullScreen) this.objectFit='contain';
			else this.objectFit='cover';
		},
		onVideo(src,_aindex){
			let par={ src: src,id: 'wxPvideo_'+this.node.aindex}
			uni.setStorageSync('wxParseVideo', par);
			this.navTo('/pages/wxParseVideo');
		},
	},
	mounted() {
		//捕获侧滑菜单的遮盖行为,隐藏video
		uni.$on('slideMenuShow',e=>{
			console.log('捕获事件:'+e)
			if(e == 'show' && this.playState){
				//正在播放则停止
				this.playState = false
			}
		})
	}
};
</script>

<style>
.video-video{ background: #000000; width: 100% !important; }
.h-450{ height: 450rpx; }
.video_cover{
	position: absolute; top: 0; left: 0; bottom: 0;
	background-color: rgba(1,1,1,.5); z-index: 1;
}
</style>

/pages/wxParseVideo.nvue

<template>
<view class="container" :style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;'">
	<video v-if="info.src" :autoplay="true" :src="info.src" 
	id="myVideo" :style="boxStyle" 
	:loop="false" :muted="false" :controls="true" :http-cache="true"
	:page-gesture="false" :show-fullscreen-btn="false" :show-loading="false"
	:show-center-play-btn="playBtn" :enable-progress-gesture="false"
	:poster="info.src+'?x-oss-process=video/snapshot,t_100,f_jpg'"></video>
	<view class="header" :style="{marginTop:statusBarHeight+'px'}">
		<view @click.stop="navBack()" class="header_div">
			<image class="header_img" src="@/static/images/back.png" mode="aspectFill"></image>
		</view>
	</view>
</view>
</template>

<script>
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight
let audo = uni.createInnerAudioContext()
audo.loop = true
export default {
	data() {
		return {
			statusBarHeight: statusBarHeight,
			playBtn: true,
			videoContext: '',
			id: '',
			info: {
				src: '',
			},
			boxStyle:{//视频,图片封面样式🌟💗
				'height': 0,
				'width': 0,
			},
			deleteHeight: 0,//测试高度🌟💗
			windowWidth: 0,
		};
	},
	onLoad(event) {
		this.platform = uni.getSystemInfoSync().platform
		var model = uni.getSystemInfoSync().model
		if(this.platform == 'ios' && (model !== 'iPhone6' || model !== 'iPhone6s' || model !== 'iPhone7' || model !== 'iPhone8')){
			this.deleteHeight = 32//有 tabbar的 修改这里可以改变视频高度
		}
		this.windowWidth = uni.getSystemInfoSync().screenWidth//获取屏幕宽度
		this.boxStyle.width = this.windowWidth + 'px'//给宽度加px
		this.wHeight = uni.getSystemInfoSync().screenHeight;//获取屏幕高度
		// #ifdef H5
		this.boxStyle.height = this.wHeight + 'px';//改变视频高度
		// #endif
		// #ifdef APP-PLUS
		this.boxStyle.height = (this.wHeight - this.deleteHeight) + 'px';//改变视频高度
		// #endif
		this.playBtn=false;
		this.videoContext = uni.createVideoContext('myVideo', this);
		this.get_data();
	},
	onHide(){
		uni.createVideoContext('myVideo',this).pause();//暂停以后继续播放
	},
	onUnload(){
		uni.createVideoContext('myVideo',this).pause();//暂停以后继续播放
	},
	methods: {
		navBack(d) { uni.navigateBack({ delta: d||1 }) },
		get_data(){
			var info = uni.getStorageSync("wxParseVideo")
			this.info.src = info.src;
			setTimeout(()=>{
				uni.createVideoContext('myVideo',this).play()
			},50)
		},
	}
};
</script>

<style>
.container { background-color: #000000; }
.header { position: fixed; left: 0; z-index: 999; top: 0; padding: 0 30rpx; width: 200rpx; }
.header_div{ height: 100rpx; line-height: 100rpx; justify-content: flex-start; align-items: center; flex-direction: row; }
.header_img{ width: 45rpx; height: 45rpx; }
.header_img2{ width: 50rpx; height: 50rpx; }
</style>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值