Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 6402
Star 111
Fork 188
H
hello uni-app x
提交 e708b2d4 编写于 作者: DCloud-WZF's avatar DCloud-WZF 💬
浏览文件
操作

refactor: 代码格式化

上级 d8ff71f3
展开全部 隐藏空白更改
内联 并排
Showing with 17626 addition and 17892 deletion
pages/API/animation-frame/animation-frame.uvue
浏览文件 @ e708b2d4
......@@ -3,8 +3,8 @@
<page-head :title="title"></page-head>
<button @click="startRequestAnimationFrame">requestAnimationFrame</button>
<button @click="stopRequestAnimationFrame">cancelAnimationFrame</button>
<text class="frame-count">FPS: {{FPSString}}</text>
<text class="frame-count">FrameCount: {{testFrameCount}}</text>
<text class="frame-count">FPS: {{FPSString}}</text>
<text class="frame-count">FrameCount: {{testFrameCount}}</text>
<text class="tips">提示: 在当前测试例子中，每增加一次调用 requestAnimationFrame 帧率翻倍，cancelAnimationFrame 后恢复</text>
</view>
</template>
......@@ -14,7 +14,7 @@
data() {
return {
title: 'AnimationFrame',
taskId: 0,
taskId: 0,
FPSString: '- / -ms',
lastTime: 0,
frameCount: 0,
......@@ -29,25 +29,25 @@
methods: {
startRequestAnimationFrame() {
this.taskId = requestAnimationFrame((timestamp : number) => {
this.updateFPS(timestamp)
this.updateFPS(timestamp)
this.testFrameCount++
this.startRequestAnimationFrame()
})
},
stopRequestAnimationFrame() {
cancelAnimationFrame(this.taskId)
this.lastTime = 0
this.frameCount = 0
cancelAnimationFrame(this.taskId)
this.lastTime = 0
this.frameCount = 0
this.FPSString = '- / -ms'
},
updateFPS(timestamp : number) {
this.frameCount++
if (timestamp - this.lastTime >= 1000) {
const timeOfFrame = (1000 / this.frameCount)
this.FPSString = `${this.frameCount} / ${timeOfFrame.toFixed(3)}ms`
this.frameCount = 0
this.lastTime = timestamp
}
},
updateFPS(timestamp : number) {
this.frameCount++
if (timestamp - this.lastTime >= 1000) {
const timeOfFrame = (1000 / this.frameCount)
this.FPSString = `${this.frameCount} / ${timeOfFrame.toFixed(3)}ms`
this.frameCount = 0
this.lastTime = timestamp
}
}
}
}
......@@ -60,11 +60,11 @@
.frame-count {
margin-top: 15px;
}
.tips {
font-size: 12px;
margin-top: 30px;
opacity: 0.7;
}
.tips {
font-size: 12px;
margin-top: 30px;
opacity: 0.7;
}
</style>
pages/API/choose-image/choose-image.uvue
浏览文件 @ e708b2d4
<template>
<!-- #ifdef APP -->
<scroll-view class="page-scroll-view">
<!-- #endif -->
<view>
<page-head :title="title"></page-head>
<view class="uni-common-mt">
<view class="uni-list">
<view class="uni-list-cell cell-pd">
<view class="uni-list-cell-left uni-label">
图片来源
</view>
<view class="uni-list-cell-right" @click="chooseImageSource">
<text class="click-t">{{sourceType[sourceTypeIndex]}}</text>
</view>
</view>
<view class="uni-list-cell cell-pd">
<view class="uni-list-cell-left uni-label">
图片质量
</view>
<view class="uni-list-cell-right" @click="chooseImageType">
<text class="click-t">{{sizeType[sizeTypeIndex]}}</text>
</view>
</view>
<view class="uni-list-cell cell-pd">
<view class="uni-list-cell-left uni-label">
数量限制
</view>
<view class="uni-list-cell-right">
<input class="click-t" :value="countIndex+1" type="number" :maxlength="1" @confirm="chooseImageCount" confirm-type="done" />
</view>
</view>
<view class="uni-list-cell cell-pd">
<view class="uni-list-cell-left uni-label">
图像裁剪
</view>
<view class="uni-list-cell-right">
<switch :checked="isCrop" @change="switchCrop"></switch>
</view>
</view>
<view ref="cropOptionNode" class="crop-option" :style="{'height':isCrop?'200px':'0px','margin-bottom':isCrop?'11px':'0px'}">
<view class="uni-list-cell cell-pd">
<view class="uni-list-cell-left item_width">
图片质量(%)
</view>
<view class="uni-list-cell-right">
<input :value="cropPercent" @confirm="cropPercentConfim" type="number" maxlength="-1"/>
</view>
</view>
<view class="uni-list-cell cell-pd">
<view class="uni-list-cell-left item_width">
裁剪宽度(px)
</view>
<view class="uni-list-cell-right">
<input :value="cropWidth" @confirm="cropWidthConfim" type="number" maxlength="-1"/>
</view>
</view>
<view class="uni-list-cell cell-pd">
<view class="uni-list-cell-left item_width">
裁剪高度(px)
</view>
<view class="uni-list-cell-right">
<input :value="cropHeight" @confirm="cropHeightConfim" type="number" maxlength="-1"/>
</view>
</view>
<view class="uni-list-cell cell-pd">
<view class="uni-list-cell-left item_width">
保留原宽高
</view>
<view class="uni-list-cell-right">
<switch :checked="cropResize" @change="cropResizeChange"></switch>
</view>
</view>
</view>
</view>
<view class="uni-list list-pd" style="padding: 15px;">
<view class="uni-flex" style="margin-bottom: 10px;">
<view class="uni-list-cell-left">点击可预览选好的图片</view>
<view style="margin-left: auto;">
<text class="click-t">{{imageList.length}}/{{countIndex+1}}</text>
</view>
</view>
<view class="uni-flex" style="flex-wrap: wrap;">
<view v-for="(image,index) in imageList" :key="index" class="uni-uploader__input-box" style="border: 0;">
<image style="width: 104px; height: 104px;" :src="image" :data-src="image" @tap="previewImage(index)">
</image>
<image src="/static/plus.png" class="image-remove" @click="removeImage(index)"></image>
</view>
<image class="uni-uploader__input-box" @tap="chooseImage" src="/static/plus.png"></image>
</view>
</view>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script>
var sourceTypeArray = [
['camera'],
['album'],
['camera', 'album']
]
var sizeTypeArray = [
['compressed'],
['original'],
['compressed', 'original']
]
export default {
data() {
return {
title: 'chooseImage',
imageList: [] as Array<string>,
sourceTypeIndex: 2,
sourceType: ['拍照', '相册', '拍照或相册'],
sizeTypeIndex: 2,
sizeType: ['压缩', '原图', '压缩或原图'],
countIndex: 8,
count: [1, 2, 3, 4, 5, 6, 7, 8, 9],
isCrop: false,
cropPercent: 80,
cropWidth: 100,
cropHeight: 100,
cropResize: false
}
},
onUnload() {
this.imageList = [];
this.sourceTypeIndex = 2
this.sourceType = ['拍照', '相册', '拍照或相册']
this.sizeTypeIndex = 2
this.sizeType = ['压缩', '原图', '压缩或原图']
this.countIndex = 8
},
methods: {
cropHeightConfim(e : InputConfirmEvent) {
let value = parseInt(e.detail.value)
if (value > 0) {
this.cropHeight = value
} else {
uni.showToast({
position: "bottom",
title: "裁剪高度需要大于0"
})
}
},
cropWidthConfim(e : InputConfirmEvent) {
let value = parseInt(e.detail.value)
if (value > 0) {
this.cropWidth = value
} else {
uni.showToast({
position: "bottom",
title: "裁剪宽度需要大于0"
})
}
},
cropPercentConfim(e : InputConfirmEvent) {
let value = parseInt(e.detail.value)
if (value > 0 && value <= 100) {
this.cropPercent = value
} else {
uni.showToast({
position: "bottom",
title: "请输入0~100之间的值"
})
}
},
cropResizeChange(e : UniSwitchChangeEvent) {
this.cropResize = e.detail.value
},
switchCrop(e : UniSwitchChangeEvent) {
this.isCrop = e.detail.value
},
removeImage(index : number) {
this.imageList.splice(index, 1)
},
chooseImageSource() {
uni.showActionSheet({
itemList: ['拍照', '相册', '拍照或相册'],
success: (e) => {
this.sourceTypeIndex = e.tapIndex!
}
})
},
chooseImageType() {
uni.showActionSheet({
itemList: ['压缩', '原图', '压缩或原图'],
success: (e) => {
this.sizeTypeIndex = e.tapIndex!
}
})
},
chooseImageCount(event : InputConfirmEvent) {
let count = parseInt(event.detail.value) - 1
if (count < 0) {
uni.showToast({
position: "bottom",
title: "图片数量应该大于0"
})
return
}
this.countIndex = count
},
chooseImage: function () {
// var cropOption:ChooseImageCropOptions|null = this.isCrop ? null : new ChooseImageCropOptions( )
if (this.imageList.length >= 9) {
uni.showToast({
position: "bottom",
title: "已经有9张图片了，请删除部分图片之后重新选择"
})
return
}
uni.chooseImage({
sourceType: sourceTypeArray[this.sourceTypeIndex],
sizeType: sizeTypeArray[this.sizeTypeIndex],
crop: this.isCrop ? { "quality": this.cropPercent, "width": this.cropWidth, "height": this.cropHeight, "resize": this.cropResize } as ChooseImageCropOptions : null,
count: this.imageList.length + this.count[this.countIndex] > 9 ? 9 - this.imageList.length : this.count[this.countIndex],
success: (res) => {
this.imageList = this.imageList.concat(res.tempFilePaths);
},
fail: (err) => {
console.log("err: ", JSON.stringify(err));
}
})
},
previewImage: function (index : number) {
uni.previewImage({
current: index,
urls: this.imageList
})
}
}
}
</script>
<style>
.cell-pd {
padding: 11px 15px;
}
.click-t {
color: darkgray;
}
.list-pd {
margin-top: 25px;
}
.uni-uploader__input-box {
margin: 5px;
width: 104px;
height: 104px;
border: 1px solid #D9D9D9;
}
.uni-uploader__input {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
.image-remove {
transform: rotate(45deg);
width: 25px;
height: 25px;
position: absolute;
top: 0;
right: 0;
border-radius: 13px;
background-color: rgba(200, 200, 200, 0.8);
}
.item_width {
width: 130px;
}
.crop-option {
margin-left: 11px;
margin-right: 11px;
border-radius: 11px;
background-color: #eee;
transition-property: height, margin-bottom;
transition-duration: 200ms;
}
<template>
<!-- #ifdef APP -->
<scroll-view class="page-scroll-view">
<!-- #endif -->
<view>
<page-head :title="title"></page-head>
<view class="uni-common-mt">
<view class="uni-list">
<view class="uni-list-cell cell-pd">
<view class="uni-list-cell-left uni-label">
图片来源
</view>
<view class="uni-list-cell-right" @click="chooseImageSource">
<text class="click-t">{{sourceType[sourceTypeIndex]}}</text>
</view>
</view>
<view class="uni-list-cell cell-pd">
<view class="uni-list-cell-left uni-label">
图片质量
</view>
<view class="uni-list-cell-right" @click="chooseImageType">
<text class="click-t">{{sizeType[sizeTypeIndex]}}</text>
</view>
</view>
<view class="uni-list-cell cell-pd">
<view class="uni-list-cell-left uni-label">
数量限制
</view>
<view class="uni-list-cell-right">
<input class="click-t" :value="countIndex+1" type="number" :maxlength="1" @confirm="chooseImageCount"
confirm-type="done" />
</view>
</view>
<view class="uni-list-cell cell-pd">
<view class="uni-list-cell-left uni-label">
图像裁剪
</view>
<view class="uni-list-cell-right">
<switch :checked="isCrop" @change="switchCrop"></switch>
</view>
</view>
<view ref="cropOptionNode" class="crop-option"
:style="{'height':isCrop?'200px':'0px','margin-bottom':isCrop?'11px':'0px'}">
<view class="uni-list-cell cell-pd">
<view class="uni-list-cell-left item_width">
图片质量(%)
</view>
<view class="uni-list-cell-right">
<input :value="cropPercent" @confirm="cropPercentConfim" type="number" maxlength="-1" />
</view>
</view>
<view class="uni-list-cell cell-pd">
<view class="uni-list-cell-left item_width">
裁剪宽度(px)
</view>
<view class="uni-list-cell-right">
<input :value="cropWidth" @confirm="cropWidthConfim" type="number" maxlength="-1" />
</view>
</view>
<view class="uni-list-cell cell-pd">
<view class="uni-list-cell-left item_width">
裁剪高度(px)
</view>
<view class="uni-list-cell-right">
<input :value="cropHeight" @confirm="cropHeightConfim" type="number" maxlength="-1" />
</view>
</view>
<view class="uni-list-cell cell-pd">
<view class="uni-list-cell-left item_width">
保留原宽高
</view>
<view class="uni-list-cell-right">
<switch :checked="cropResize" @change="cropResizeChange"></switch>
</view>
</view>
</view>
</view>
<view class="uni-list list-pd" style="padding: 15px;">
<view class="uni-flex" style="margin-bottom: 10px;">
<view class="uni-list-cell-left">点击可预览选好的图片</view>
<view style="margin-left: auto;">
<text class="click-t">{{imageList.length}}/{{countIndex+1}}</text>
</view>
</view>
<view class="uni-flex" style="flex-wrap: wrap;">
<view v-for="(image,index) in imageList" :key="index" class="uni-uploader__input-box" style="border: 0;">
<image style="width: 104px; height: 104px;" :src="image" :data-src="image" @tap="previewImage(index)">
</image>
<image src="/static/plus.png" class="image-remove" @click="removeImage(index)"></image>
</view>
<image class="uni-uploader__input-box" @tap="chooseImage" src="/static/plus.png"></image>
</view>
</view>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script>
var sourceTypeArray = [
['camera'],
['album'],
['camera', 'album']
]
var sizeTypeArray = [
['compressed'],
['original'],
['compressed', 'original']
]
export default {
data() {
return {
title: 'chooseImage',
imageList: [] as Array<string>,
sourceTypeIndex: 2,
sourceType: ['拍照', '相册', '拍照或相册'],
sizeTypeIndex: 2,
sizeType: ['压缩', '原图', '压缩或原图'],
countIndex: 8,
count: [1, 2, 3, 4, 5, 6, 7, 8, 9],
isCrop: false,
cropPercent: 80,
cropWidth: 100,
cropHeight: 100,
cropResize: false
}
},
onUnload() {
this.imageList = [];
this.sourceTypeIndex = 2
this.sourceType = ['拍照', '相册', '拍照或相册']
this.sizeTypeIndex = 2
this.sizeType = ['压缩', '原图', '压缩或原图']
this.countIndex = 8
},
methods: {
cropHeightConfim(e : InputConfirmEvent) {
let value = parseInt(e.detail.value)
if (value > 0) {
this.cropHeight = value
} else {
uni.showToast({
position: "bottom",
title: "裁剪高度需要大于0"
})
}
},
cropWidthConfim(e : InputConfirmEvent) {
let value = parseInt(e.detail.value)
if (value > 0) {
this.cropWidth = value
} else {
uni.showToast({
position: "bottom",
title: "裁剪宽度需要大于0"
})
}
},
cropPercentConfim(e : InputConfirmEvent) {
let value = parseInt(e.detail.value)
if (value > 0 && value <= 100) {
this.cropPercent = value
} else {
uni.showToast({
position: "bottom",
title: "请输入0~100之间的值"
})
}
},
cropResizeChange(e : UniSwitchChangeEvent) {
this.cropResize = e.detail.value
},
switchCrop(e : UniSwitchChangeEvent) {
this.isCrop = e.detail.value
},
removeImage(index : number) {
this.imageList.splice(index, 1)
},
chooseImageSource() {
uni.showActionSheet({
itemList: ['拍照', '相册', '拍照或相册'],
success: (e) => {
this.sourceTypeIndex = e.tapIndex!
}
})
},
chooseImageType() {
uni.showActionSheet({
itemList: ['压缩', '原图', '压缩或原图'],
success: (e) => {
this.sizeTypeIndex = e.tapIndex!
}
})
},
chooseImageCount(event : InputConfirmEvent) {
let count = parseInt(event.detail.value) - 1
if (count < 0) {
uni.showToast({
position: "bottom",
title: "图片数量应该大于0"
})
return
}
this.countIndex = count
},
chooseImage: function () {
// var cropOption:ChooseImageCropOptions|null = this.isCrop ? null : new ChooseImageCropOptions( )
if (this.imageList.length >= 9) {
uni.showToast({
position: "bottom",
title: "已经有9张图片了，请删除部分图片之后重新选择"
})
return
}
uni.chooseImage({
sourceType: sourceTypeArray[this.sourceTypeIndex],
sizeType: sizeTypeArray[this.sizeTypeIndex],
crop: this.isCrop ? { "quality": this.cropPercent, "width": this.cropWidth, "height": this.cropHeight, "resize": this.cropResize } as ChooseImageCropOptions : null,
count: this.imageList.length + this.count[this.countIndex] > 9 ? 9 - this.imageList.length : this.count[this.countIndex],
success: (res) => {
this.imageList = this.imageList.concat(res.tempFilePaths);
},
fail: (err) => {
console.log("err: ", JSON.stringify(err));
}
})
},
previewImage: function (index : number) {
uni.previewImage({
current: index,
urls: this.imageList
})
}
}
}
</script>
<style>
.cell-pd {
padding: 11px 15px;
}
.click-t {
color: darkgray;
}
.list-pd {
margin-top: 25px;
}
.uni-uploader__input-box {
margin: 5px;
width: 104px;
height: 104px;
border: 1px solid #D9D9D9;
}
.uni-uploader__input {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
.image-remove {
transform: rotate(45deg);
width: 25px;
height: 25px;
position: absolute;
top: 0;
right: 0;
border-radius: 13px;
background-color: rgba(200, 200, 200, 0.8);
}
.item_width {
width: 130px;
}
.crop-option {
margin-left: 11px;
margin-right: 11px;
border-radius: 11px;
background-color: #eee;
transition-property: height, margin-bottom;
transition-duration: 200ms;
}
</style>
pages/API/choose-location/choose-location.uvue
浏览文件 @ e708b2d4
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap">
<view style="background:#FFFFFF; padding:40rpx;">
<view class="uni-hello-text uni-center">当前位置信息</view>
<block v-if="hasLocation === false">
<view class="uni-h2 uni-center uni-common-mt">未选择位置</view>
</block>
<block v-if="hasLocation === true">
<view class="uni-hello-text uni-center" style="margin-top:10px;">
{{locationAddress}}
</view>
<view class="uni-h2 uni-center uni-common-mt">
<text>E: {{location.longitude[0]}}°{{location.longitude[1]}}′</text>
<text>\nN: {{location.latitude[0]}}°{{location.latitude[1]}}′</text>
</view>
</block>
</view>
<view class="uni-btn-v">
<view class="tips">注意：需要正确配置地图服务商的Key才能正常选择位置</view>
<button type="primary" @tap="chooseLocation">选择位置</button>
<button @tap="clear">清空</button>
</view>
</view>
</view>
</template>
<script lang="uts">
function formatLocation (longitude, latitude) {
if (typeof longitude === 'string' && typeof latitude === 'string') {
longitude = parseFloat(longitude)
latitude = parseFloat(latitude)
}
longitude = longitude.toFixed(2)
latitude = latitude.toFixed(2)
return {
longitude: longitude.toString().split('.'),
latitude: latitude.toString().split('.')
}
}
export default {
data () {
return {
title: 'chooseLocation',
hasLocation: false,
location: {},
locationAddress: ''
}
},
methods: {
chooseLocation: function () {
uni.chooseLocation({
success: (res) => {
console.log(res, 123)
this.hasLocation = true
this.location = formatLocation(res.longitude, res.latitude)
this.locationAddress = res.address
}
})
},
clear: function () {
this.hasLocation = false
}
}
}
</script>
<style>
.page-body-info {
padding-bottom: 0;
height: 440rpx;
}
.tips {
font-size: 12px;
margin-top: 15px;
opacity: .8;
}
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap">
<view style="background:#FFFFFF; padding:40rpx;">
<view class="uni-hello-text uni-center">当前位置信息</view>
<block v-if="hasLocation === false">
<view class="uni-h2 uni-center uni-common-mt">未选择位置</view>
</block>
<block v-if="hasLocation === true">
<view class="uni-hello-text uni-center" style="margin-top:10px;">
{{locationAddress}}
</view>
<view class="uni-h2 uni-center uni-common-mt">
<text>E: {{location.longitude[0]}}°{{location.longitude[1]}}′</text>
<text>\nN: {{location.latitude[0]}}°{{location.latitude[1]}}′</text>
</view>
</block>
</view>
<view class="uni-btn-v">
<view class="tips">注意：需要正确配置地图服务商的Key才能正常选择位置</view>
<button type="primary" @tap="chooseLocation">选择位置</button>
<button @tap="clear">清空</button>
</view>
</view>
</view>
</template>
<script lang="uts">
function formatLocation(longitude, latitude) {
if (typeof longitude === 'string' && typeof latitude === 'string') {
longitude = parseFloat(longitude)
latitude = parseFloat(latitude)
}
longitude = longitude.toFixed(2)
latitude = latitude.toFixed(2)
return {
longitude: longitude.toString().split('.'),
latitude: latitude.toString().split('.')
}
}
export default {
data() {
return {
title: 'chooseLocation',
hasLocation: false,
location: {},
locationAddress: ''
}
},
methods: {
chooseLocation: function () {
uni.chooseLocation({
success: (res) => {
console.log(res, 123)
this.hasLocation = true
this.location = formatLocation(res.longitude, res.latitude)
this.locationAddress = res.address
}
})
},
clear: function () {
this.hasLocation = false
}
}
}
</script>
<style>
.page-body-info {
padding-bottom: 0;
height: 440rpx;
}
.tips {
font-size: 12px;
margin-top: 15px;
opacity: .8;
}
</style>
pages/API/choose-video/choose-video.uvue
浏览文件 @ e708b2d4
<template>
<!-- #ifdef APP -->
<scroll-view style="flex:1">
<!-- #endif -->
<page-head :title="title"></page-head>
<view class="uni-padding-wrap">
<video class="video" :src="src" :controls="true"></video>
<view class="uni-title">
<text class="uni-subtitle-text">视频信息</text>
</view>
<text>{{videoInfo}}</text>
<view class="uni-btn-v">
<button type="primary" @click="chooseVideo">选取视频</button>
</view>
<enum-data title="视频来源" :items="sourceTypeItemTypes" @change="onSourceTypeChange"></enum-data>
<enum-data title="摄像头" :items="cameraItemTypes" @change="onCameraChange"></enum-data>
</view>
<input-data title="最长拍摄时间，单位秒" defaultValue="60" type="number" @confirm="onMaxDurationConfirm"></input-data>
<!-- #ifdef APP -->
<view class="uni-padding-wrap">
<boolean-data title="是否压缩" :defaultValue="true" @change="onCompressedChange"></boolean-data>
</view>
<!-- #endif -->
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script>
import { ItemType } from '@/components/enum-data/enum-data';
type Camera = "back" | "front"
type Source = "album" | "camera"
export default {
data() {
return {
title: "chooseVideo",
src: "",
sourceTypeItemTypes: [{ "value": 0, "name": "从相册中选择视频" }, { "value": 1, "name": "拍摄视频" }, { "value": 2, "name": "从相册中选择视频或拍摄视频" }] as ItemType[],
sourceTypeItems: [["album"], ["camera"], ["album", "camera"]] as Source[][],
cameraItemTypes: [{ "value": 0, "name": "后置摄像头" }, { "value": 1, "name": "前置摄像头" }] as ItemType[],
cameraItems: ["back", "front"] as Camera[],
sourceType: ["album", "camera"] as Source[],
compressed: true,
maxDuration: 60,
camera: "back" as Camera,
videoInfo: ""
}
},
methods: {
chooseVideo() {
uni.chooseVideo({
sourceType: this.sourceType,
// #ifdef APP
compressed: this.compressed,
// #endif
maxDuration: this.maxDuration,
camera: this.camera,
success: (res) => {
console.log("chooseVideo success", JSON.stringify(res));
this.src = res.tempFilePath;
this.videoInfo = `视频长度: ${res.duration}s\n视频大小: ${Math.ceil(res.size / 1024)}KB\n视频宽度: ${res.width}\n视频高度: ${res.height}\n`;
},
fail: (err) => {
uni.showModal({
title: "选择视频失败",
content: JSON.stringify(err),
showCancel: false
});
}
});
},
onSourceTypeChange(value : number) {
this.sourceType = this.sourceTypeItems[value];
},
onCompressedChange(value : boolean) {
this.compressed = value;
},
onMaxDurationConfirm(value : number) {
this.maxDuration = value;
},
onCameraChange(value : number) {
this.camera = this.cameraItems[value];
}
}
}
</script>
<style>
.video {
align-self: center;
width: 300px;
height: 225px;
}
<template>
<!-- #ifdef APP -->
<scroll-view style="flex:1">
<!-- #endif -->
<page-head :title="title"></page-head>
<view class="uni-padding-wrap">
<video class="video" :src="src" :controls="true"></video>
<view class="uni-title">
<text class="uni-subtitle-text">视频信息</text>
</view>
<text>{{videoInfo}}</text>
<view class="uni-btn-v">
<button type="primary" @click="chooseVideo">选取视频</button>
</view>
<enum-data title="视频来源" :items="sourceTypeItemTypes" @change="onSourceTypeChange"></enum-data>
<enum-data title="摄像头" :items="cameraItemTypes" @change="onCameraChange"></enum-data>
</view>
<input-data title="最长拍摄时间，单位秒" defaultValue="60" type="number" @confirm="onMaxDurationConfirm"></input-data>
<!-- #ifdef APP -->
<view class="uni-padding-wrap">
<boolean-data title="是否压缩" :defaultValue="true" @change="onCompressedChange"></boolean-data>
</view>
<!-- #endif -->
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script>
import { ItemType } from '@/components/enum-data/enum-data';
type Camera = "back" | "front"
type Source = "album" | "camera"
export default {
data() {
return {
title: "chooseVideo",
src: "",
sourceTypeItemTypes: [{ "value": 0, "name": "从相册中选择视频" }, { "value": 1, "name": "拍摄视频" }, { "value": 2, "name": "从相册中选择视频或拍摄视频" }] as ItemType[],
sourceTypeItems: [["album"], ["camera"], ["album", "camera"]] as Source[][],
cameraItemTypes: [{ "value": 0, "name": "后置摄像头" }, { "value": 1, "name": "前置摄像头" }] as ItemType[],
cameraItems: ["back", "front"] as Camera[],
sourceType: ["album", "camera"] as Source[],
compressed: true,
maxDuration: 60,
camera: "back" as Camera,
videoInfo: ""
}
},
methods: {
chooseVideo() {
uni.chooseVideo({
sourceType: this.sourceType,
// #ifdef APP
compressed: this.compressed,
// #endif
maxDuration: this.maxDuration,
camera: this.camera,
success: (res) => {
console.log("chooseVideo success", JSON.stringify(res));
this.src = res.tempFilePath;
this.videoInfo = `视频长度: ${res.duration}s\n视频大小: ${Math.ceil(res.size / 1024)}KB\n视频宽度: ${res.width}\n视频高度: ${res.height}\n`;
},
fail: (err) => {
uni.showModal({
title: "选择视频失败",
content: JSON.stringify(err),
showCancel: false
});
}
});
},
onSourceTypeChange(value : number) {
this.sourceType = this.sourceTypeItems[value];
},
onCompressedChange(value : boolean) {
this.compressed = value;
},
onMaxDurationConfirm(value : number) {
this.maxDuration = value;
},
onCameraChange(value : number) {
this.camera = this.cameraItems[value];
}
}
}
</script>
<style>
.video {
align-self: center;
width: 300px;
height: 225px;
}
</style>
pages/API/clipboard/clipboard.uvue
浏览文件 @ e708b2d4
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap">
<view class="uni-title">请输入剪贴板内容</view>
<view class="uni-list">
<view class="uni-list-cell">
<input class="uni-input" type="text" placeholder="请输入剪贴板内容" :value="data" @input="dataChange"/>
</view>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setClipboard">存储数据</button>
<button @tap="getClipboard">读取数据</button>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'get/setClipboardData',
data: '',
// 自动化测试
getDataTest:'',
setClipboardTest: false
}
},
methods: {
dataChange: function (e) {
this.data = e.detail.value
},
getClipboard: function () {
uni.getClipboardData({
success: (res) => {
console.log(res.data);
this.getDataTest = res.data;
const content = res.data ? '剪贴板内容为:' + res.data : '剪贴板暂无内容';
uni.showModal({
content,
title: '读取剪贴板',
showCancel: false
})
},
fail: () => {
uni.showModal({
content: '读取剪贴板失败!',
showCancel: false
})
}
});
},
setClipboard: function () {
if (this.data.length === 0) {
uni.showModal({
title: '设置剪贴板失败',
content: '内容不能为空',
showCancel: false
})
} else {
uni.setClipboardData({
data: this.data,
success: () => {
this.setClipboardTest = true
// 成功处理
uni.showToast({
title: '设置剪贴板成功',
icon: "success",
mask: !1
})
},
fail: () => {
// bug：自动化测试时设置成功也进入了fail
this.setClipboardTest = false
// 失败处理
uni.showToast({
title: '储存数据失败!',
icon: "none",
mask: !1
})
}
});
}
}
}
}
</script>
<style>
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap">
<view class="uni-title">请输入剪贴板内容</view>
<view class="uni-list">
<view class="uni-list-cell">
<input class="uni-input" type="text" placeholder="请输入剪贴板内容" :value="data" @input="dataChange" />
</view>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setClipboard">存储数据</button>
<button @tap="getClipboard">读取数据</button>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'get/setClipboardData',
data: '',
// 自动化测试
getDataTest: '',
setClipboardTest: false
}
},
methods: {
dataChange: function (e) {
this.data = e.detail.value
},
getClipboard: function () {
uni.getClipboardData({
success: (res) => {
console.log(res.data);
this.getDataTest = res.data;
const content = res.data ? '剪贴板内容为:' + res.data : '剪贴板暂无内容';
uni.showModal({
content,
title: '读取剪贴板',
showCancel: false
})
},
fail: () => {
uni.showModal({
content: '读取剪贴板失败!',
showCancel: false
})
}
});
},
setClipboard: function () {
if (this.data.length === 0) {
uni.showModal({
title: '设置剪贴板失败',
content: '内容不能为空',
showCancel: false
})
} else {
uni.setClipboardData({
data: this.data,
success: () => {
this.setClipboardTest = true
// 成功处理
uni.showToast({
title: '设置剪贴板成功',
icon: "success",
mask: !1
})
},
fail: () => {
// bug：自动化测试时设置成功也进入了fail
this.setClipboardTest = false
// 失败处理
uni.showToast({
title: '储存数据失败!',
icon: "none",
mask: !1
})
}
});
}
}
}
}
</script>
<style>
</style>
pages/API/cloud-storage/cloud-storage.uvue
浏览文件 @ e708b2d4
<template>
<!-- #ifdef APP -->
<scroll-view class="page-scroll-view">
<!-- #endif -->
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-btn-v uni-common-mt">
<button type="primary" @click="uploadFile">选择文件上传</button>
<button type="primary" @click="chooseAndUploadFile">一个接口选择文件并上传</button>
</view>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script>
export default {
data() {
return {
title: '云存储'
}
},
onLoad() {
},
onUnload() {
},
methods: {
uploadFile: function () {
uni.chooseImage({
count: 1,
success(res) : void {
uni.showLoading({
title: '上传中...'
})
const tempFilePath = res.tempFilePaths[0]
uniCloud.uploadFile({
filePath: tempFilePath,
cloudPath: 'test.jpg'
})
.then(function (res) {
uni.hideLoading()
console.log(res)
uni.showModal({
content: '上传成功',
showCancel: false
});
})
.catch(function (err : any | null) {
uni.hideLoading()
const error = err as UniCloudError
uni.showModal({
content: '上传失败，' + error.errMsg,
showCancel: false
});
})
// .finally((_: number) : void => {
// uni.hideLoading()
// })
},
fail(err) : void {
console.error('chooseImage fail: ', err)
}
})
},
chooseAndUploadFile() {
uniCloud.chooseAndUploadFile({
type: 'image'
}).then(function (res) {
uni.hideLoading()
console.log(res)
uni.showModal({
content: '上传成功',
showCancel: false
});
})
.catch(function (err : any | null) {
uni.hideLoading()
const error = err as UniCloudError
uni.showModal({
content: '上传失败，' + error.errMsg,
showCancel: false
});
})
}
}
}
</script>
<style>
<template>
<!-- #ifdef APP -->
<scroll-view class="page-scroll-view">
<!-- #endif -->
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-btn-v uni-common-mt">
<button type="primary" @click="uploadFile">选择文件上传</button>
<button type="primary" @click="chooseAndUploadFile">一个接口选择文件并上传</button>
</view>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script>
export default {
data() {
return {
title: '云存储'
}
},
onLoad() {
},
onUnload() {
},
methods: {
uploadFile: function () {
uni.chooseImage({
count: 1,
success(res) : void {
uni.showLoading({
title: '上传中...'
})
const tempFilePath = res.tempFilePaths[0]
uniCloud.uploadFile({
filePath: tempFilePath,
cloudPath: 'test.jpg'
})
.then(function (res) {
uni.hideLoading()
console.log(res)
uni.showModal({
content: '上传成功',
showCancel: false
});
})
.catch(function (err : any | null) {
uni.hideLoading()
const error = err as UniCloudError
uni.showModal({
content: '上传失败，' + error.errMsg,
showCancel: false
});
})
// .finally((_: number) : void => {
// uni.hideLoading()
// })
},
fail(err) : void {
console.error('chooseImage fail: ', err)
}
})
},
chooseAndUploadFile() {
uniCloud.chooseAndUploadFile({
type: 'image'
}).then(function (res) {
uni.hideLoading()
console.log(res)
uni.showModal({
content: '上传成功',
showCancel: false
});
})
.catch(function (err : any | null) {
uni.hideLoading()
const error = err as UniCloudError
uni.showModal({
content: '上传失败，' + error.errMsg,
showCancel: false
});
})
}
}
}
</script>
<style>
</style>
pages/API/compass/compass.uvue
浏览文件 @ e708b2d4
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap">
<view class="uni-hello-text uni-center" style="padding-bottom:50rpx;">
旋转手机即可获取方位信息
</view>
<view class="direction">
<view class="bg-compass-line"></view>
<image class="bg-compass" src="../../../static/compass.png" :style="'transform: rotate('+direction+'deg)'"></image>
<view class="direction-value">
<text>{{direction}}</text>
<text class="direction-degree">o</text>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'onCompassChange',
direction: 0
}
},
onReady: function () {
uni.onCompassChange((res) => {
console.log('onCompassChange', res)
this.direction = res.direction
})
},
onUnload() {
uni.stopCompass();
this.direction = 0;
}
}
</script>
<style>
.direction {
position: relative;
margin-top: 70rpx;
display: flex;
width: 540rpx;
height: 540rpx;
align-items: center;
justify-content: center;
margin:0 auto;
}
.direction-value {
position: relative;
font-size: 200rpx;
color: #353535;
line-height: 1;
z-index: 1;
}
.direction-degree {
position: absolute;
top: 0;
right: -40rpx;
font-size: 60rpx;
}
.bg-compass {
position: absolute;
top: 0;
left: 0;
width: 540rpx;
height: 540rpx;
transition: .1s;
}
.bg-compass-line {
position: absolute;
left: 267rpx;
top: -10rpx;
width: 6rpx;
height: 56rpx;
background-color: #1AAD19;
border-radius: 999rpx;
z-index: 1;
}
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap">
<view class="uni-hello-text uni-center" style="padding-bottom:50rpx;">
旋转手机即可获取方位信息
</view>
<view class="direction">
<view class="bg-compass-line"></view>
<image class="bg-compass" src="../../../static/compass.png" :style="'transform: rotate('+direction+'deg)'">
</image>
<view class="direction-value">
<text>{{direction}}</text>
<text class="direction-degree">o</text>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'onCompassChange',
direction: 0
}
},
onReady: function () {
uni.onCompassChange((res) => {
console.log('onCompassChange', res)
this.direction = res.direction
})
},
onUnload() {
uni.stopCompass();
this.direction = 0;
}
}
</script>
<style>
.direction {
position: relative;
margin-top: 70rpx;
display: flex;
width: 540rpx;
height: 540rpx;
align-items: center;
justify-content: center;
margin: 0 auto;
}
.direction-value {
position: relative;
font-size: 200rpx;
color: #353535;
line-height: 1;
z-index: 1;
}
.direction-degree {
position: absolute;
top: 0;
right: -40rpx;
font-size: 60rpx;
}
.bg-compass {
position: absolute;
top: 0;
left: 0;
width: 540rpx;
height: 540rpx;
transition: .1s;
}
.bg-compass-line {
position: absolute;
left: 267rpx;
top: -10rpx;
width: 6rpx;
height: 56rpx;
background-color: #1AAD19;
border-radius: 999rpx;
z-index: 1;
}
</style>
pages/API/compress-image/compress-image.uvue
浏览文件 @ e708b2d4
<template>
<!-- #ifdef APP -->
<scroll-view style="flex:1">
<!-- #endif -->
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap">
<view class="image-container">
<image class="image" :src="beforeCompressPath" mode="aspectFit"></image>
<image class="image" :src="afterCompressPath" mode="aspectFit"></image>
</view>
<view class="uni-title">
<text class="uni-subtitle-text">压缩前图片信息</text>
</view>
<text>{{beforeCompressImageInfo}}</text>
<view class="uni-title">
<text class="uni-subtitle-text">压缩后图片信息</text>
</view>
<text>{{afterCompressImageInfo}}</text>
<view class="uni-btn-v">
<button type="primary" @click="chooseImage">从相册中选取待压缩的图片</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="compressImage">压缩图片</button>
</view>
</view>
<input-data defaultValue="80" title="压缩质量，范围0～100，数值越小，质量越低，压缩率越高（仅对jpg有效）" type="number"
@confirm="onQualityConfirm"></input-data>
<input-data title="压缩后图片的宽度，单位px" type="string" @confirm="onCompressedWidthConfirm"></input-data>
<input-data title="压缩后图片的高度，单位px" type="string" @confirm="onCompressedHeightConfirm"></input-data>
<input-data defaultValue="0" title="旋转度数，范围0～360" type="number" @confirm="onRotateConfirm"></input-data>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script>
// #ifdef APP-ANDROID
import FileInputStream from 'java.io.FileInputStream';
// #endif
export default {
data() {
return {
title: "compressImage",
beforeCompressImageInfo: "",
afterCompressImageInfo: "",
beforeCompressPath: "",
afterCompressPath: "",
quality: 80,
compressedWidth: null as number | null,
compressedHeight: null as number | null,
rotate: 0,
// 自动化测试
imageInfoForTest: null,
imageSrcForTest: '/static/test-image/logo.png'
}
},
methods: {
compressImage() {
if (this.beforeCompressPath == "") {
uni.showToast({
title: "请先选择图片",
icon: "error"
});
return;
}
uni.showLoading({
title: "图片压缩中"
});
uni.compressImage({
src: this.beforeCompressPath,
quality: this.quality,
compressedWidth: this.compressedWidth,
compressedHeight: this.compressedHeight,
rotate: this.rotate,
success: (res) => {
console.log("compressImage success", JSON.stringify(res));
this.afterCompressPath = res.tempFilePath;
uni.showToast({
title: "压缩成功",
icon: null
});
uni.getImageInfo({
src: res.tempFilePath,
success: (_res) => {
this.afterCompressImageInfo = `图片宽度: ${_res.width}\n图片高度: ${_res.height}\n`;
// #ifdef APP-ANDROID
const size = new FileInputStream(res.tempFilePath.substring("file://".length)).available() / 1024;
this.afterCompressImageInfo = this.afterCompressImageInfo.concat(`图片大小: ${size}KB`);
// #endif
}
});
},
fail: (err) => {
uni.showModal({
title: "压缩图片失败",
content: JSON.stringify(err),
showCancel: false
});
},
complete: (_) => {
uni.hideLoading();
}
});
},
chooseImage() {
uni.chooseImage({
count: 1,
sizeType: ["original"],
sourceType: ["album"],
success: (res) => {
this.beforeCompressPath = res.tempFilePaths[0];
uni.getImageInfo({
src: res.tempFilePaths[0],
success: (_res) => {
this.beforeCompressImageInfo = `图片宽度: ${_res.width}\n图片高度: ${_res.height}\n`;
// #ifdef APP-ANDROID
const size = new FileInputStream(res.tempFilePaths[0].substring("file://".length)).available() / 1024;
this.beforeCompressImageInfo = this.beforeCompressImageInfo.concat(`图片大小: ${size}KB`);
// #endif
}
});
}
});
},
onQualityConfirm(value : number) {
this.quality = value;
},
onCompressedWidthConfirm(value : string) {
this.compressedWidth = parseInt(value);
},
onCompressedHeightConfirm(value : string) {
this.compressedHeight = parseInt(value);
},
onRotateConfirm(value : number) {
this.rotate = value;
},
testCompressImage() {
uni.compressImage({
src: this.imageSrcForTest,
quality: 50,
compressedWidth: 100,
compressedHeight: 100,
success: (res) => {
uni.getImageInfo({
src: res.tempFilePath,
success: (_res) => {
let beforeCompressSize : number, afterComoressSize : number;
// #ifdef APP-ANDROID
beforeCompressSize = new FileInputStream(UTSAndroid.convert2AbsFullPath(this.imageSrcForTest)).available();
afterComoressSize = new FileInputStream(res.tempFilePath.substring("file://".length)).available();
// #endif
this.imageInfoForTest = {
"width": _res.width,
"height": _res.height,
"isSizeReduce": afterComoressSize < beforeCompressSize
};
}
});
},
fail: (_) => {
this.imageInfoForTest = null;
}
});
}
}
}
</script>
<style>
.image {
flex: 1;
}
.image-container {
flex-direction: row;
}
<template>
<!-- #ifdef APP -->
<scroll-view style="flex:1">
<!-- #endif -->
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap">
<view class="image-container">
<image class="image" :src="beforeCompressPath" mode="aspectFit"></image>
<image class="image" :src="afterCompressPath" mode="aspectFit"></image>
</view>
<view class="uni-title">
<text class="uni-subtitle-text">压缩前图片信息</text>
</view>
<text>{{beforeCompressImageInfo}}</text>
<view class="uni-title">
<text class="uni-subtitle-text">压缩后图片信息</text>
</view>
<text>{{afterCompressImageInfo}}</text>
<view class="uni-btn-v">
<button type="primary" @click="chooseImage">从相册中选取待压缩的图片</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="compressImage">压缩图片</button>
</view>
</view>
<input-data defaultValue="80" title="压缩质量，范围0～100，数值越小，质量越低，压缩率越高（仅对jpg有效）" type="number"
@confirm="onQualityConfirm"></input-data>
<input-data title="压缩后图片的宽度，单位px" type="string" @confirm="onCompressedWidthConfirm"></input-data>
<input-data title="压缩后图片的高度，单位px" type="string" @confirm="onCompressedHeightConfirm"></input-data>
<input-data defaultValue="0" title="旋转度数，范围0～360" type="number" @confirm="onRotateConfirm"></input-data>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script>
// #ifdef APP-ANDROID
import FileInputStream from 'java.io.FileInputStream';
// #endif
export default {
data() {
return {
title: "compressImage",
beforeCompressImageInfo: "",
afterCompressImageInfo: "",
beforeCompressPath: "",
afterCompressPath: "",
quality: 80,
compressedWidth: null as number | null,
compressedHeight: null as number | null,
rotate: 0,
// 自动化测试
imageInfoForTest: null,
imageSrcForTest: '/static/test-image/logo.png'
}
},
methods: {
compressImage() {
if (this.beforeCompressPath == "") {
uni.showToast({
title: "请先选择图片",
icon: "error"
});
return;
}
uni.showLoading({
title: "图片压缩中"
});
uni.compressImage({
src: this.beforeCompressPath,
quality: this.quality,
compressedWidth: this.compressedWidth,
compressedHeight: this.compressedHeight,
rotate: this.rotate,
success: (res) => {
console.log("compressImage success", JSON.stringify(res));
this.afterCompressPath = res.tempFilePath;
uni.showToast({
title: "压缩成功",
icon: null
});
uni.getImageInfo({
src: res.tempFilePath,
success: (_res) => {
this.afterCompressImageInfo = `图片宽度: ${_res.width}\n图片高度: ${_res.height}\n`;
// #ifdef APP-ANDROID
const size = new FileInputStream(res.tempFilePath.substring("file://".length)).available() / 1024;
this.afterCompressImageInfo = this.afterCompressImageInfo.concat(`图片大小: ${size}KB`);
// #endif
}
});
},
fail: (err) => {
uni.showModal({
title: "压缩图片失败",
content: JSON.stringify(err),
showCancel: false
});
},
complete: (_) => {
uni.hideLoading();
}
});
},
chooseImage() {
uni.chooseImage({
count: 1,
sizeType: ["original"],
sourceType: ["album"],
success: (res) => {
this.beforeCompressPath = res.tempFilePaths[0];
uni.getImageInfo({
src: res.tempFilePaths[0],
success: (_res) => {
this.beforeCompressImageInfo = `图片宽度: ${_res.width}\n图片高度: ${_res.height}\n`;
// #ifdef APP-ANDROID
const size = new FileInputStream(res.tempFilePaths[0].substring("file://".length)).available() / 1024;
this.beforeCompressImageInfo = this.beforeCompressImageInfo.concat(`图片大小: ${size}KB`);
// #endif
}
});
}
});
},
onQualityConfirm(value : number) {
this.quality = value;
},
onCompressedWidthConfirm(value : string) {
this.compressedWidth = parseInt(value);
},
onCompressedHeightConfirm(value : string) {
this.compressedHeight = parseInt(value);
},
onRotateConfirm(value : number) {
this.rotate = value;
},
testCompressImage() {
uni.compressImage({
src: this.imageSrcForTest,
quality: 50,
compressedWidth: 100,
compressedHeight: 100,
success: (res) => {
uni.getImageInfo({
src: res.tempFilePath,
success: (_res) => {
let beforeCompressSize : number, afterComoressSize : number;
// #ifdef APP-ANDROID
beforeCompressSize = new FileInputStream(UTSAndroid.convert2AbsFullPath(this.imageSrcForTest)).available();
afterComoressSize = new FileInputStream(res.tempFilePath.substring("file://".length)).available();
// #endif
this.imageInfoForTest = {
"width": _res.width,
"height": _res.height,
"isSizeReduce": afterComoressSize < beforeCompressSize
};
}
});
},
fail: (_) => {
this.imageInfoForTest = null;
}
});
}
}
}
</script>
<style>
.image {
flex: 1;
}
.image-container {
flex-direction: row;
}
</style>
pages/API/compress-video/compress-video.uvue
浏览文件 @ e708b2d4
<template>
<!-- #ifdef APP -->
<scroll-view style="flex:1">
<!-- #endif -->
<page-head :title="title"></page-head>
<view>
<view class="uni-padding-wrap">
<video class="video" :src="beforeCompressPath" :controls="true"></video>
<view class="uni-title">
<text class="uni-subtitle-text">压缩前视频信息</text>
</view>
<text>{{beforeCompressVideoInfo}}</text>
<video class="video" :src="afterCompressPath" :controls="true"></video>
<view class="uni-title">
<text class="uni-subtitle-text">压缩后视频信息</text>
</view>
<text>{{afterCompressVideoInfo}}</text>
<view class="uni-btn-v">
<button type="primary" @click="chooseVideo">从相册中选取待压缩的视频</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="compressVideo">压缩视频</button>
</view>
<enum-data title="压缩质量" :items="qualityItemTypes" @change="onQualityChange"></enum-data>
<view class="uni-common-mt">
<text class="uni-title uni-title-text">相对于原视频的分辨率比例，取值范围(0, 1]</text>
<slider :min="0.1" :max="1" :step="0.1" :show-value="true" @change="onResolutionChange"></slider>
</view>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script>
import { ItemType } from '@/components/enum-data/enum-data';
export default {
data() {
return {
title: "compressVideo",
beforeCompressVideoInfo: "",
afterCompressVideoInfo: "",
beforeCompressPath: "",
afterCompressPath: "",
quality: null as string | null,
bitrate: null as number | null,
fps: null as number | null,
resolution: null as number | null,
qualityItemTypes: [{ "value": 0, "name": "low(低)" }, { "value": 1, "name": "medium(中)" }, { "value": 2, "name": "high(高)" }] as ItemType[],
qualityItems: ["low", "medium", "high"],
// 自动化测试
videoInfoForTest: null,
videoSrcForTest: '/static/test-video/10second-demo.mp4'
}
},
methods: {
compressVideo() {
if (this.beforeCompressPath == "") {
uni.showToast({
title: "请先选择视频",
icon: "error"
});
return;
}
uni.showLoading({
title: "视频压缩中"
});
uni.compressVideo({
src: this.beforeCompressPath,
quality: this.quality,
resolution: this.resolution,
success: (res) => {
console.log("compressVideo success", JSON.stringify(res));
this.afterCompressPath = res.tempFilePath;
uni.showToast({
title: "压缩成功",
icon: null
});
uni.getVideoInfo({
src: res.tempFilePath,
success: (_res) => {
this.afterCompressVideoInfo = `视频画面方向: ${_res.orientation}\n视频格式: ${_res.type}\n视频长度: ${_res.duration}s\n视频大小: ${_res.size}KB\n视频宽度: ${_res.width}\n视频高度: ${_res.height}\n视频帧率: ${_res.fps}fps\n视频码率: ${_res.bitrate}kbps`;
}
});
},
fail: (err) => {
uni.showModal({
title: "压缩视频失败",
content: JSON.stringify(err),
showCancel: false
});
},
complete: (_) => {
uni.hideLoading();
}
});
},
chooseVideo() {
uni.chooseVideo({
sourceType: ["album"],
compressed: false,
success: (res) => {
this.beforeCompressPath = res.tempFilePath;
uni.getVideoInfo({
src: res.tempFilePath,
success: (_res) => {
this.beforeCompressVideoInfo = `视频画面方向: ${_res.orientation}\n视频格式: ${_res.type}\n视频长度: ${_res.duration}s\n视频大小: ${_res.size}KB\n视频宽度: ${_res.width}\n视频高度: ${_res.height}\n视频帧率: ${_res.fps}fps\n视频码率: ${_res.bitrate}kbps`;
}
});
}
});
},
onQualityChange(value : number) {
this.quality = this.qualityItems[value];
},
onResolutionChange(event : UniSliderChangeEvent) {
this.resolution = event.detail.value;
},
testCompressVideo() {
let beforeCompressSize : number, afterComoressSize : number;
uni.compressVideo({
src: this.videoSrcForTest,
quality: 'medium',
success: (res) => {
uni.getVideoInfo({
src: this.videoSrcForTest,
success: (_res) => {
beforeCompressSize = Math.trunc(_res.size);
uni.getVideoInfo({
src: res.tempFilePath,
success: (__res) => {
afterComoressSize = Math.trunc(__res.size);
this.videoInfoForTest = {
"width": __res.width,
"height": __res.height,
"isSizeReduce": afterComoressSize < beforeCompressSize
};
}
});
}
});
},
fail: (_) => {
this.videoInfoForTest = null;
}
});
}
}
}
</script>
<style>
.video {
align-self: center;
}
.image-container {
flex-direction: row;
}
<template>
<!-- #ifdef APP -->
<scroll-view style="flex:1">
<!-- #endif -->
<page-head :title="title"></page-head>
<view>
<view class="uni-padding-wrap">
<video class="video" :src="beforeCompressPath" :controls="true"></video>
<view class="uni-title">
<text class="uni-subtitle-text">压缩前视频信息</text>
</view>
<text>{{beforeCompressVideoInfo}}</text>
<video class="video" :src="afterCompressPath" :controls="true"></video>
<view class="uni-title">
<text class="uni-subtitle-text">压缩后视频信息</text>
</view>
<text>{{afterCompressVideoInfo}}</text>
<view class="uni-btn-v">
<button type="primary" @click="chooseVideo">从相册中选取待压缩的视频</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="compressVideo">压缩视频</button>
</view>
<enum-data title="压缩质量" :items="qualityItemTypes" @change="onQualityChange"></enum-data>
<view class="uni-common-mt">
<text class="uni-title uni-title-text">相对于原视频的分辨率比例，取值范围(0, 1]</text>
<slider :min="0.1" :max="1" :step="0.1" :show-value="true" @change="onResolutionChange"></slider>
</view>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script>
import { ItemType } from '@/components/enum-data/enum-data';
export default {
data() {
return {
title: "compressVideo",
beforeCompressVideoInfo: "",
afterCompressVideoInfo: "",
beforeCompressPath: "",
afterCompressPath: "",
quality: null as string | null,
bitrate: null as number | null,
fps: null as number | null,
resolution: null as number | null,
qualityItemTypes: [{ "value": 0, "name": "low(低)" }, { "value": 1, "name": "medium(中)" }, { "value": 2, "name": "high(高)" }] as ItemType[],
qualityItems: ["low", "medium", "high"],
// 自动化测试
videoInfoForTest: null,
videoSrcForTest: '/static/test-video/10second-demo.mp4'
}
},
methods: {
compressVideo() {
if (this.beforeCompressPath == "") {
uni.showToast({
title: "请先选择视频",
icon: "error"
});
return;
}
uni.showLoading({
title: "视频压缩中"
});
uni.compressVideo({
src: this.beforeCompressPath,
quality: this.quality,
resolution: this.resolution,
success: (res) => {
console.log("compressVideo success", JSON.stringify(res));
this.afterCompressPath = res.tempFilePath;
uni.showToast({
title: "压缩成功",
icon: null
});
uni.getVideoInfo({
src: res.tempFilePath,
success: (_res) => {
this.afterCompressVideoInfo = `视频画面方向: ${_res.orientation}\n视频格式: ${_res.type}\n视频长度: ${_res.duration}s\n视频大小: ${_res.size}KB\n视频宽度: ${_res.width}\n视频高度: ${_res.height}\n视频帧率: ${_res.fps}fps\n视频码率: ${_res.bitrate}kbps`;
}
});
},
fail: (err) => {
uni.showModal({
title: "压缩视频失败",
content: JSON.stringify(err),
showCancel: false
});
},
complete: (_) => {
uni.hideLoading();
}
});
},
chooseVideo() {
uni.chooseVideo({
sourceType: ["album"],
compressed: false,
success: (res) => {
this.beforeCompressPath = res.tempFilePath;
uni.getVideoInfo({
src: res.tempFilePath,
success: (_res) => {
this.beforeCompressVideoInfo = `视频画面方向: ${_res.orientation}\n视频格式: ${_res.type}\n视频长度: ${_res.duration}s\n视频大小: ${_res.size}KB\n视频宽度: ${_res.width}\n视频高度: ${_res.height}\n视频帧率: ${_res.fps}fps\n视频码率: ${_res.bitrate}kbps`;
}
});
}
});
},
onQualityChange(value : number) {
this.quality = this.qualityItems[value];
},
onResolutionChange(event : UniSliderChangeEvent) {
this.resolution = event.detail.value;
},
testCompressVideo() {
let beforeCompressSize : number, afterComoressSize : number;
uni.compressVideo({
src: this.videoSrcForTest,
quality: 'medium',
success: (res) => {
uni.getVideoInfo({
src: this.videoSrcForTest,
success: (_res) => {
beforeCompressSize = Math.trunc(_res.size);
uni.getVideoInfo({
src: res.tempFilePath,
success: (__res) => {
afterComoressSize = Math.trunc(__res.size);
this.videoInfoForTest = {
"width": __res.width,
"height": __res.height,
"isSizeReduce": afterComoressSize < beforeCompressSize
};
}
});
}
});
},
fail: (_) => {
this.videoInfoForTest = null;
}
});
}
}
}
</script>
<style>
.video {
align-self: center;
}
.image-container {
flex-direction: row;
}
</style>
pages/API/create-inner-audio-context/create-inner-audio-context.uvue
浏览文件 @ e708b2d4
<template>
<view class="uni-padding-wrap">
<page-head title="audio"></page-head>
<view class="uni-common-mt">
<slider :value="position" :min="0" :max="duration" @changing="onchanging" @change="onchange"></slider>
</view>
<view class="uni-title">
<text class="uni-title-text">属性示例</text>
</View>
<text class="uni-text-box uni-common-mt">当前音频播放位置（保留小数点后 6 位）：{{currentTime}} s</text>
<text class="uni-text-box">音频的长度（单位:s）：{{duration}} s</text>
<text class="uni-text-box">当前是否停止状态：{{isPaused}}</text>
<text class="uni-text-box">音频缓冲的时间点：{{buffered}}</text>
<text class="uni-text-box">当前音量：{{volume}}</text>
<!-- 设置音量无效 -->
<!-- <button plain :disabled="volume == 1" @click="increaseVolume">增加音量</button>
<button plain :disabled="volume == 0" @click="decreaseVolume">减少音量</button> -->
<text class="uni-subtitle-text uni-title">开始播放的位置（单位：s）</text>
<input :value="startTime" type="number" placeholder="开始播放的位置（单位：s）" class="uni-input"
@input="startTimeInput"></input>
<boolean-data :defaultValue="false" title="是否自动开始播放" @change="setAutoplay"></boolean-data>
<boolean-data :defaultValue="false" title="是否循环播放" @change="setLoop"></boolean-data>
<view class="uni-title">
<text class="uni-title-text">方法示例</text>
</View>
<button :disabled="isPlaying" type="primary" @click="play" class="uni-btn">播放</button>
<button :disabled="!isPlaying" type="primary" @click="pause" class="uni-btn">暂停</button>
<button :disabled="!isPlaying && !isPaused" type="primary" @click="stop" class="uni-btn">停止</button>
<button type="primary" @click="onchange(20)" class="uni-btn">跳转到指定位置20</button>
<view class="uni-title">
<text class="uni-title-text">格式/路径示例</text>
</View>
<navigator url="/pages/API/create-inner-audio-context/inner-audio-format" class="uni-btn">
<button type="primary" @click="pause">音频格式示例</button>
</navigator>
<navigator url="/pages/API/create-inner-audio-context/inner-audio-path" class="uni-btn uni-common-mb">
<button type="primary" @click="pause">音频路径示例</button>
</navigator>
</view>
</template>
<script lang="uts">
const audioUrl = 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3'
export default {
data() {
return {
title: "innerAudioContext",
currentTime: 0,
duration: 100,
startTime: 0,
buffered: 0,
volume: 0.5,
isCanplay: false,
isPlaying: false,
isPaused: true,
isPlayEnd: false,
_isChanging: false,
_audioContext: null as InnerAudioContext | null,
// 自动化测试
onSeekingTest:false,
onSeekedTest:false,
onWaitingTest:false
}
},
computed: {
position() {
return this.isPlayEnd ? 0 : this.currentTime;
},
},
onReady() {
this._audioContext = uni.createInnerAudioContext();
this._audioContext!.src = audioUrl;
this.volume = this._audioContext!.volume;
this.onCanplay()
},
onUnload() {
if (this._audioContext != null && this.isPlaying) {
this.stop();
this._audioContext!.destroy()
}
},
methods: {
onCanplay() {
this._audioContext!.onCanplay(() => {
console.log('音频进入可以播放状态事件');
this.isCanplay = true;
// 当音频可以播放时，获取缓冲信息
this.buffered = this._audioContext!.buffered;
this.duration = this._audioContext!.duration || 0;
});
},
onchanging() {
this._isChanging = true;
},
onchange(e) {
console.log(e, 'e');
let pos = typeof e === "number" ? e : e.detail.value;
this._audioContext!.seek(pos);
this.onSeeking()
this.onSeeked()
this._isChanging = false;
},
startTimeInput(e : InputEvent) {
let startTimeValue = Number(e.detail.value)
this._audioContext!.startTime = startTimeValue;
this.onchange(startTimeValue)
},
setAutoplay() {
this._audioContext!.autoplay = !this._audioContext!.autoplay;
console.log(this._audioContext!.autoplay, 'autoplay');
},
setLoop() {
this._audioContext!.loop = !this._audioContext!.loop;
console.log(this._audioContext!.loop, 'loop');
},
play() {
if (!this.isCanplay) {
uni.showToast({
title: '音频未进入可以播放状态，请稍后再试'
});
return;
}
this.isPlaying = true;
this._audioContext!.play();
this.isPlayEnd = false;
if (this._audioContext!.startTime > 0) {
this.onchange(this._audioContext!.startTime)
}
this._audioContext!.onPlay(() => {
this.isPaused = false;
console.log('开始播放',this.isPaused);
});
this.onTimeUpdate()
this.onWaiting()
this.onError()
this.onEnded()
},
onSeeking() {
this._audioContext!.onSeeking(() => {
console.log('音频进行 seek 操作事件');
this.onSeekingTest = true
});
},
onSeeked() {
this._audioContext!.onSeeked(() => {
console.log('音频完成 seek 操作事件');
this.onSeekedTest = true
});
},
onWaiting() {
this._audioContext!.onWaiting(() => {
console.log('音频加载中事件');
this.onWaitingTest = true
});
},
onTimeUpdate() {
this._audioContext!.onTimeUpdate(() => {
// console.log('onTimeUpdate:音频播放进度更新事件,currentTime',this._audioContext!.currentTime);
if (this._isChanging === true) { return; }
this.currentTime = this._audioContext!.currentTime || 0;
if (this.currentTime > this.buffered) {
console.log('缓冲不足');
}
});
},
increaseVolume() {
this.volume = Math.min(this.volume + 0.1, 1);
this.volume = parseFloat(this.volume.toFixed(1));
console.log('增加音量', this.volume);
},
decreaseVolume() {
this.volume = Math.max(this.volume - 0.1, 0);
this.volume = parseFloat(this.volume.toFixed(1));
console.log('减少音量', this.volume);
},
onEnded() {
this._audioContext!.onEnded(() => {
console.log('播放结束');
this.currentTime = 0;
this.startTime = 0
this.isPlaying = false;
this.isPaused = true;
this.isPlayEnd = true;
});
},
onError() {
this._audioContext!.onError((err) => {
console.log('err', err);
this.isPlaying = false;
this.isPaused = true;
});
},
pause() {
this._audioContext!.pause();
this._audioContext!.onPause(() => {
console.log('音频暂停事件');
this.isPaused = true;
});
this.isPlaying = false;
},
stop() {
console.log('stop');
this._audioContext!.stop();
this._audioContext!.onStop(() => {
// 第一次点停止时，不触发
this.isPaused = true;
console.log('音频停止事件');
});
this.isPlaying = false;
console.log('stop',this.isPaused);
}
}
}
</script>
<style>
.play-time-area {
display: flex;
flex-direction: row;
margin-top: 20px;
}
.duration {
margin-left: auto;
}
.play-button-area {
display: flex;
flex-direction: row;
justify-content: center;
margin: 50px 0;
}
.icon-play {
width: 60px;
height: 60px;
}
<template>
<view class="uni-padding-wrap">
<page-head title="audio"></page-head>
<view class="uni-common-mt">
<slider :value="position" :min="0" :max="duration" @changing="onchanging" @change="onchange"></slider>
</view>
<view class="uni-title">
<text class="uni-title-text">属性示例</text>
</View>
<text class="uni-text-box uni-common-mt">当前音频播放位置（保留小数点后 6 位）：{{currentTime}} s</text>
<text class="uni-text-box">音频的长度（单位:s）：{{duration}} s</text>
<text class="uni-text-box">当前是否停止状态：{{isPaused}}</text>
<text class="uni-text-box">音频缓冲的时间点：{{buffered}}</text>
<text class="uni-text-box">当前音量：{{volume}}</text>
<!-- 设置音量无效 -->
<!-- <button plain :disabled="volume == 1" @click="increaseVolume">增加音量</button>
<button plain :disabled="volume == 0" @click="decreaseVolume">减少音量</button> -->
<text class="uni-subtitle-text uni-title">开始播放的位置（单位：s）</text>
<input :value="startTime" type="number" placeholder="开始播放的位置（单位：s）" class="uni-input"
@input="startTimeInput"></input>
<boolean-data :defaultValue="false" title="是否自动开始播放" @change="setAutoplay"></boolean-data>
<boolean-data :defaultValue="false" title="是否循环播放" @change="setLoop"></boolean-data>
<view class="uni-title">
<text class="uni-title-text">方法示例</text>
</View>
<button :disabled="isPlaying" type="primary" @click="play" class="uni-btn">播放</button>
<button :disabled="!isPlaying" type="primary" @click="pause" class="uni-btn">暂停</button>
<button :disabled="!isPlaying && !isPaused" type="primary" @click="stop" class="uni-btn">停止</button>
<button type="primary" @click="onchange(20)" class="uni-btn">跳转到指定位置20</button>
<view class="uni-title">
<text class="uni-title-text">格式/路径示例</text>
</View>
<navigator url="/pages/API/create-inner-audio-context/inner-audio-format" class="uni-btn">
<button type="primary" @click="pause">音频格式示例</button>
</navigator>
<navigator url="/pages/API/create-inner-audio-context/inner-audio-path" class="uni-btn uni-common-mb">
<button type="primary" @click="pause">音频路径示例</button>
</navigator>
</view>
</template>
<script lang="uts">
const audioUrl = 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3'
export default {
data() {
return {
title: "innerAudioContext",
currentTime: 0,
duration: 100,
startTime: 0,
buffered: 0,
volume: 0.5,
isCanplay: false,
isPlaying: false,
isPaused: true,
isPlayEnd: false,
_isChanging: false,
_audioContext: null as InnerAudioContext | null,
// 自动化测试
onSeekingTest: false,
onSeekedTest: false,
onWaitingTest: false
}
},
computed: {
position() {
return this.isPlayEnd ? 0 : this.currentTime;
},
},
onReady() {
this._audioContext = uni.createInnerAudioContext();
this._audioContext!.src = audioUrl;
this.volume = this._audioContext!.volume;
this.onCanplay()
},
onUnload() {
if (this._audioContext != null && this.isPlaying) {
this.stop();
this._audioContext!.destroy()
}
},
methods: {
onCanplay() {
this._audioContext!.onCanplay(() => {
console.log('音频进入可以播放状态事件');
this.isCanplay = true;
// 当音频可以播放时，获取缓冲信息
this.buffered = this._audioContext!.buffered;
this.duration = this._audioContext!.duration || 0;
});
},
onchanging() {
this._isChanging = true;
},
onchange(e) {
console.log(e, 'e');
let pos = typeof e === "number" ? e : e.detail.value;
this._audioContext!.seek(pos);
this.onSeeking()
this.onSeeked()
this._isChanging = false;
},
startTimeInput(e : InputEvent) {
let startTimeValue = Number(e.detail.value)
this._audioContext!.startTime = startTimeValue;
this.onchange(startTimeValue)
},
setAutoplay() {
this._audioContext!.autoplay = !this._audioContext!.autoplay;
console.log(this._audioContext!.autoplay, 'autoplay');
},
setLoop() {
this._audioContext!.loop = !this._audioContext!.loop;
console.log(this._audioContext!.loop, 'loop');
},
play() {
if (!this.isCanplay) {
uni.showToast({
title: '音频未进入可以播放状态，请稍后再试'
});
return;
}
this.isPlaying = true;
this._audioContext!.play();
this.isPlayEnd = false;
if (this._audioContext!.startTime > 0) {
this.onchange(this._audioContext!.startTime)
}
this._audioContext!.onPlay(() => {
this.isPaused = false;
console.log('开始播放', this.isPaused);
});
this.onTimeUpdate()
this.onWaiting()
this.onError()
this.onEnded()
},
onSeeking() {
this._audioContext!.onSeeking(() => {
console.log('音频进行 seek 操作事件');
this.onSeekingTest = true
});
},
onSeeked() {
this._audioContext!.onSeeked(() => {
console.log('音频完成 seek 操作事件');
this.onSeekedTest = true
});
},
onWaiting() {
this._audioContext!.onWaiting(() => {
console.log('音频加载中事件');
this.onWaitingTest = true
});
},
onTimeUpdate() {
this._audioContext!.onTimeUpdate(() => {
// console.log('onTimeUpdate:音频播放进度更新事件,currentTime',this._audioContext!.currentTime);
if (this._isChanging === true) { return; }
this.currentTime = this._audioContext!.currentTime || 0;
if (this.currentTime > this.buffered) {
console.log('缓冲不足');
}
});
},
increaseVolume() {
this.volume = Math.min(this.volume + 0.1, 1);
this.volume = parseFloat(this.volume.toFixed(1));
console.log('增加音量', this.volume);
},
decreaseVolume() {
this.volume = Math.max(this.volume - 0.1, 0);
this.volume = parseFloat(this.volume.toFixed(1));
console.log('减少音量', this.volume);
},
onEnded() {
this._audioContext!.onEnded(() => {
console.log('播放结束');
this.currentTime = 0;
this.startTime = 0
this.isPlaying = false;
this.isPaused = true;
this.isPlayEnd = true;
});
},
onError() {
this._audioContext!.onError((err) => {
console.log('err', err);
this.isPlaying = false;
this.isPaused = true;
});
},
pause() {
this._audioContext!.pause();
this._audioContext!.onPause(() => {
console.log('音频暂停事件');
this.isPaused = true;
});
this.isPlaying = false;
},
stop() {
console.log('stop');
this._audioContext!.stop();
this._audioContext!.onStop(() => {
// 第一次点停止时，不触发
this.isPaused = true;
console.log('音频停止事件');
});
this.isPlaying = false;
console.log('stop', this.isPaused);
}
}
}
</script>
<style>
.play-time-area {
display: flex;
flex-direction: row;
margin-top: 20px;
}
.duration {
margin-left: auto;
}
.play-button-area {
display: flex;
flex-direction: row;
justify-content: center;
margin: 50px 0;
}
.icon-play {
width: 60px;
height: 60px;
}
</style>
pages/API/create-inner-audio-context/inner-audio-format.uvue
浏览文件 @ e708b2d4
<template>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-title">
<text class="uni-title-text">支持的音频格式示例</text>
</view>
<view class="formats" v-for="(item,index) in supportFormats" :key="index">
<text class="uni-subtitle-text">{{item.format}}</text>
<image class="icon-play" :src="(isPlaying && playIndex==index)?'/static/pause.png':'/static/play.png'" @click="play(item.src,index)"></image>
</view>
<view class="uni-title">
<text class="uni-title-text">不支持的音频格式</text>
</view>
<view class="formats" v-for="(item,index) in notSupportFormats" :key="index">
<text class="uni-subtitle-text">{{item.format}}</text>
<image class="icon-play" :src="(isPlaying && playIndex==index)?'/static/pause.png':'/static/play.png'" @click="play(item.src,index)"></image>
</view>
</view>
</template>
<script>
type AudioFormat = {
format : string
src : string
}
export default {
data() {
return {
title: 'audio-format',
playIndex:0,
isPlaying: false,
_audioContext: null as InnerAudioContext | null,
supportFormats: [
{
format: 'mp3',
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.mp3'
},
{
format: 'mp4',
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.mp4'
},
{
format: 'm4a',
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.m4a'
},
{
format: 'aac',
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.aac'
},
{
format: 'flac',
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.flac'
},
{
format: 'ogg',
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.ogg'
},
{
format: 'wav',
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.wav'
},
] as Array<AudioFormat>,
notSupportFormats:[
{
format: 'wma',
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.wma'
},
{
format: 'aiff',
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.aiff'
},
{
format: 'caf',
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.caf'
},
{
format: '错误格式',
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.wmaa'
},
] as Array<AudioFormat>
}
},
onReady() {
this._audioContext = uni.createInnerAudioContext();
},
onUnload() {
if (this._audioContext != null) {
this.pause();
this._audioContext!.destroy()
}
},
methods: {
pause() {
this._audioContext!.pause();
this.isPlaying = false;
},
play(audioUrl,index){
// console.log(index,audioUrl);
if (this.isPlaying && this.playIndex == index) {
this.pause();
return;
}
this.playIndex = index
this._audioContext!.src = audioUrl;
this._audioContext!.play();
this.isPlaying = true;
this._audioContext!.onPlay(() => {
console.log('开始播放');
});
this._audioContext!.onEnded(() => {
console.log('播放结束');
this.isPlaying = false;
});
this._audioContext!.onError((err) => {
this.isPlaying = false;
console.log('err',err);
});
},
},
}
</script>
<style>
.formats{
align-items: center;
}
.icon-play {
width: 60px;
height: 60px;
margin: 10px;
}
<template>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-title">
<text class="uni-title-text">支持的音频格式示例</text>
</view>
<view class="formats" v-for="(item,index) in supportFormats" :key="index">
<text class="uni-subtitle-text">{{item.format}}</text>
<image class="icon-play" :src="(isPlaying && playIndex==index)?'/static/pause.png':'/static/play.png'"
@click="play(item.src,index)"></image>
</view>
<view class="uni-title">
<text class="uni-title-text">不支持的音频格式</text>
</view>
<view class="formats" v-for="(item,index) in notSupportFormats" :key="index">
<text class="uni-subtitle-text">{{item.format}}</text>
<image class="icon-play" :src="(isPlaying && playIndex==index)?'/static/pause.png':'/static/play.png'"
@click="play(item.src,index)"></image>
</view>
</view>
</template>
<script>
type AudioFormat = {
format : string
src : string
}
export default {
data() {
return {
title: 'audio-format',
playIndex: 0,
isPlaying: false,
_audioContext: null as InnerAudioContext | null,
supportFormats: [
{
format: 'mp3',
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.mp3'
},
{
format: 'mp4',
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.mp4'
},
{
format: 'm4a',
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.m4a'
},
{
format: 'aac',
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.aac'
},
{
format: 'flac',
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.flac'
},
{
format: 'ogg',
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.ogg'
},
{
format: 'wav',
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.wav'
},
] as Array<AudioFormat>,
notSupportFormats: [
{
format: 'wma',
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.wma'
},
{
format: 'aiff',
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.aiff'
},
{
format: 'caf',
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.caf'
},
{
format: '错误格式',
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.wmaa'
},
] as Array<AudioFormat>
}
},
onReady() {
this._audioContext = uni.createInnerAudioContext();
},
onUnload() {
if (this._audioContext != null) {
this.pause();
this._audioContext!.destroy()
}
},
methods: {
pause() {
this._audioContext!.pause();
this.isPlaying = false;
},
play(audioUrl, index) {
// console.log(index,audioUrl);
if (this.isPlaying && this.playIndex == index) {
this.pause();
return;
}
this.playIndex = index
this._audioContext!.src = audioUrl;
this._audioContext!.play();
this.isPlaying = true;
this._audioContext!.onPlay(() => {
console.log('开始播放');
});
this._audioContext!.onEnded(() => {
console.log('播放结束');
this.isPlaying = false;
});
this._audioContext!.onError((err) => {
this.isPlaying = false;
console.log('err', err);
});
},
},
}
</script>
<style>
.formats {
align-items: center;
}
.icon-play {
width: 60px;
height: 60px;
margin: 10px;
}
</style>
pages/API/create-inner-audio-context/inner-audio-path.uvue
浏览文件 @ e708b2d4
<template>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-title">
<text class="uni-title-text">音频路径示例</text>
</view>
<view class="formats" v-for="(item,index) in supportPaths" :key="index">
<text class="uni-subtitle-text">{{item.description}}</text>
<image class="icon-play" :src="(isPlaying && playIndex==index)?'/static/pause.png':'/static/play.png'" @click="play(item.src,index)"></image>
</view>
</view>
</template>
<script>
type AudioPath = {
description : string
src : string
}
export default {
data() {
return {
title: 'audio-path',
playIndex:0,
isPlaying: false,
_audioContext: null as InnerAudioContext | null,
supportPaths: [
{
description: '本地路径：/static方式',
src: '/static/test-audio/ForElise.mp3'
},
{
description: '本地路径：../static/',
src: '../../../static/test-audio/ForElise.mp3'
},
{
description: '网络路径',
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.mp3'
},
{
description: '不存在的音频',
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/invalid_url.mp3'
},
{
description: '错误路径',
src: '../static/test-audio/ForElise.mp3'
},
] as Array<AudioPath>
}
},
onReady() {
this._audioContext = uni.createInnerAudioContext();
},
onUnload() {
if (this._audioContext != null) {
this.pause();
this._audioContext!.destroy()
}
},
methods: {
pause() {
this._audioContext!.pause();
this.isPlaying = false;
},
play(audioUrl,index){
// console.log(index,audioUrl);
if (this.isPlaying && this.playIndex == index) {
this.pause();
return;
}
this.playIndex = index
this._audioContext!.src = audioUrl;
this._audioContext!.play();
this.isPlaying = true;
this._audioContext!.onPlay(() => {
console.log('开始播放');
});
this._audioContext!.onEnded(() => {
console.log('播放结束');
this.isPlaying = false;
});
this._audioContext!.onError((err) => {
this.isPlaying = false;
console.log('err',err);
});
}
}
}
</script>
<style>
.formats{
align-items: center;
}
.icon-play {
width: 60px;
height: 60px;
margin: 10px;
}
<template>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-title">
<text class="uni-title-text">音频路径示例</text>
</view>
<view class="formats" v-for="(item,index) in supportPaths" :key="index">
<text class="uni-subtitle-text">{{item.description}}</text>
<image class="icon-play" :src="(isPlaying && playIndex==index)?'/static/pause.png':'/static/play.png'"
@click="play(item.src,index)"></image>
</view>
</view>
</template>
<script>
type AudioPath = {
description : string
src : string
}
export default {
data() {
return {
title: 'audio-path',
playIndex: 0,
isPlaying: false,
_audioContext: null as InnerAudioContext | null,
supportPaths: [
{
description: '本地路径：/static方式',
src: '/static/test-audio/ForElise.mp3'
},
{
description: '本地路径：../static/',
src: '../../../static/test-audio/ForElise.mp3'
},
{
description: '网络路径',
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.mp3'
},
{
description: '不存在的音频',
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/invalid_url.mp3'
},
{
description: '错误路径',
src: '../static/test-audio/ForElise.mp3'
},
] as Array<AudioPath>
}
},
onReady() {
this._audioContext = uni.createInnerAudioContext();
},
onUnload() {
if (this._audioContext != null) {
this.pause();
this._audioContext!.destroy()
}
},
methods: {
pause() {
this._audioContext!.pause();
this.isPlaying = false;
},
play(audioUrl, index) {
// console.log(index,audioUrl);
if (this.isPlaying && this.playIndex == index) {
this.pause();
return;
}
this.playIndex = index
this._audioContext!.src = audioUrl;
this._audioContext!.play();
this.isPlaying = true;
this._audioContext!.onPlay(() => {
console.log('开始播放');
});
this._audioContext!.onEnded(() => {
console.log('播放结束');
this.isPlaying = false;
});
this._audioContext!.onError((err) => {
this.isPlaying = false;
console.log('err', err);
});
}
}
}
</script>
<style>
.formats {
align-items: center;
}
.icon-play {
width: 60px;
height: 60px;
margin: 10px;
}
</style>
pages/API/create-interstitial-ad/create-interstitial-ad.uvue
浏览文件 @ e708b2d4
<template>
<page-head title="插屏广告"></page-head>
<button :type="btnType" style="margin: 10px;" :disabled="btnDisable" @click="showAd()">{{btnText}}</button>
</template>
<script>
export default {
data() {
return {
btnText: "",
btnType: "primary",
btnDisable: false,
interstitialAd: null as InterstitialAd | null,
isAdLoadSuccess: false
}
},
onReady() {
this.loadAd()
},
methods: {
loadAd() {
if (this.btnDisable)
return
this.btnDisable = true
this.btnText = "正在加载广告"
this.btnType = "primary"
if (this.interstitialAd == null) {
this.interstitialAd = uni.createInterstitialAd({
adpid: "1111111113" //此处为测试广告位，实际开发中请在uni-ad后台申请自己的广告位后替换
})
this.interstitialAd!.onError((_) => {
this.btnType = "warn"
this.btnText = "广告加载失败，点击重试"
this.btnDisable = false
})
this.interstitialAd!.onLoad((_) => {
this.btnType = "primary"
this.btnText = "广告加载成功，点击观看"
this.btnDisable = false
this.isAdLoadSuccess = true
})
this.interstitialAd!.onClose((e) => {
this.isAdLoadSuccess = false
this.loadAd()
})
}
this.interstitialAd!.load()
},
showAd() {
if (this.isAdLoadSuccess) {
this.interstitialAd!.show()
} else {
this.loadAd()
}
}
}
}
</script>
<style>
<template>
<page-head title="插屏广告"></page-head>
<button :type="btnType" style="margin: 10px;" :disabled="btnDisable" @click="showAd()">{{btnText}}</button>
</template>
<script>
export default {
data() {
return {
btnText: "",
btnType: "primary",
btnDisable: false,
interstitialAd: null as InterstitialAd | null,
isAdLoadSuccess: false
}
},
onReady() {
this.loadAd()
},
methods: {
loadAd() {
if (this.btnDisable)
return
this.btnDisable = true
this.btnText = "正在加载广告"
this.btnType = "primary"
if (this.interstitialAd == null) {
this.interstitialAd = uni.createInterstitialAd({
adpid: "1111111113" //此处为测试广告位，实际开发中请在uni-ad后台申请自己的广告位后替换
})
this.interstitialAd!.onError((_) => {
this.btnType = "warn"
this.btnText = "广告加载失败，点击重试"
this.btnDisable = false
})
this.interstitialAd!.onLoad((_) => {
this.btnType = "primary"
this.btnText = "广告加载成功，点击观看"
this.btnDisable = false
this.isAdLoadSuccess = true
})
this.interstitialAd!.onClose((e) => {
this.isAdLoadSuccess = false
this.loadAd()
})
}
this.interstitialAd!.load()
},
showAd() {
if (this.isAdLoadSuccess) {
this.interstitialAd!.show()
} else {
this.loadAd()
}
}
}
}
</script>