Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
hello uni-app x
提交
e708b2d4
H
hello uni-app x
项目概览
DCloud
/
hello uni-app x
通知
6402
Star
111
Fork
188
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
25
列表
看板
标记
里程碑
合并请求
2
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
H
hello uni-app x
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
25
Issue
25
列表
看板
标记
里程碑
合并请求
2
合并请求
2
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
e708b2d4
编写于
8月 27, 2024
作者:
DCloud-WZF
💬
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
refactor: 代码格式化
上级
d8ff71f3
变更
201
展开全部
隐藏空白更改
内联
并排
Showing
201 changed file
with
17626 addition
and
17892 deletion
+17626
-17892
pages/API/animation-frame/animation-frame.uvue
pages/API/animation-frame/animation-frame.uvue
+22
-22
pages/API/choose-image/choose-image.uvue
pages/API/choose-image/choose-image.uvue
+295
-293
pages/API/choose-location/choose-location.uvue
pages/API/choose-location/choose-location.uvue
+78
-78
pages/API/choose-video/choose-video.uvue
pages/API/choose-video/choose-video.uvue
+93
-93
pages/API/clipboard/clipboard.uvue
pages/API/clipboard/clipboard.uvue
+89
-91
pages/API/cloud-storage/cloud-storage.uvue
pages/API/cloud-storage/cloud-storage.uvue
+91
-91
pages/API/compass/compass.uvue
pages/API/compass/compass.uvue
+86
-85
pages/API/compress-image/compress-image.uvue
pages/API/compress-image/compress-image.uvue
+178
-178
pages/API/compress-video/compress-video.uvue
pages/API/compress-video/compress-video.uvue
+160
-160
pages/API/create-inner-audio-context/create-inner-audio-context.uvue
...reate-inner-audio-context/create-inner-audio-context.uvue
+237
-237
pages/API/create-inner-audio-context/inner-audio-format.uvue
pages/API/create-inner-audio-context/inner-audio-format.uvue
+136
-133
pages/API/create-inner-audio-context/inner-audio-path.uvue
pages/API/create-inner-audio-context/inner-audio-path.uvue
+100
-98
pages/API/create-interstitial-ad/create-interstitial-ad.uvue
pages/API/create-interstitial-ad/create-interstitial-ad.uvue
+61
-61
pages/API/create-request-permission-listener/create-request-permission-listener.uvue
...rmission-listener/create-request-permission-listener.uvue
+89
-88
pages/API/create-rewarded-video-ad/create-rewarded-video-ad.uvue
...PI/create-rewarded-video-ad/create-rewarded-video-ad.uvue
+66
-66
pages/API/create-selector-query/create-selector-query.uvue
pages/API/create-selector-query/create-selector-query.uvue
+94
-94
pages/API/create-selector-query/nodes-info-child.uvue
pages/API/create-selector-query/nodes-info-child.uvue
+7
-7
pages/API/create-selector-query/selector-query-child-multi.uvue
...API/create-selector-query/selector-query-child-multi.uvue
+12
-12
pages/API/dialog-page/dialog-1.uvue
pages/API/dialog-page/dialog-1.uvue
+8
-8
pages/API/dialog-page/dialog-2.uvue
pages/API/dialog-page/dialog-2.uvue
+12
-12
pages/API/dialog-page/dialog-page.uvue
pages/API/dialog-page/dialog-page.uvue
+33
-33
pages/API/dialog-page/next-page.uvue
pages/API/dialog-page/next-page.uvue
+25
-25
pages/API/download-file/download-file.uvue
pages/API/download-file/download-file.uvue
+92
-93
pages/API/element-draw/element-draw.uvue
pages/API/element-draw/element-draw.uvue
+316
-316
pages/API/element-takesnapshot/element-takesnapshot.uvue
pages/API/element-takesnapshot/element-takesnapshot.uvue
+76
-75
pages/API/env/env.uvue
pages/API/env/env.uvue
+50
-48
pages/API/event-bus/event-bus.uvue
pages/API/event-bus/event-bus.uvue
+8
-8
pages/API/exit/exit.uvue
pages/API/exit/exit.uvue
+23
-23
pages/API/facial-recognition-meta-info/facial-recognition-meta-info.uvue
...l-recognition-meta-info/facial-recognition-meta-info.uvue
+85
-87
pages/API/get-app-authorize-setting/get-app-authorize-setting.uvue
.../get-app-authorize-setting/get-app-authorize-setting.uvue
+59
-59
pages/API/get-app-base-info/get-app-base-info.uvue
pages/API/get-app-base-info/get-app-base-info.uvue
+52
-52
pages/API/get-battery-info/get-battery-info.uvue
pages/API/get-battery-info/get-battery-info.uvue
+32
-32
pages/API/get-current-pages/get-current-pages.uvue
pages/API/get-current-pages/get-current-pages.uvue
+1
-1
pages/API/get-current-pages/page-style.uts
pages/API/get-current-pages/page-style.uts
+2
-2
pages/API/get-element-by-id/get-element-by-id-multiple-root-node.uvue
...t-element-by-id/get-element-by-id-multiple-root-node.uvue
+3
-3
pages/API/get-element-by-id/get-element-by-id.uvue
pages/API/get-element-by-id/get-element-by-id.uvue
+7
-7
pages/API/get-enter-options-sync/get-enter-options-sync.uvue
pages/API/get-enter-options-sync/get-enter-options-sync.uvue
+10
-9
pages/API/get-file-system-manager/get-file-system-manager.uvue
.../API/get-file-system-manager/get-file-system-manager.uvue
+1280
-1280
pages/API/get-image-info/get-image-info.uvue
pages/API/get-image-info/get-image-info.uvue
+118
-118
pages/API/get-launch-options-sync/get-launch-options-sync.uvue
.../API/get-launch-options-sync/get-launch-options-sync.uvue
+16
-17
pages/API/get-location/get-location.uvue
pages/API/get-location/get-location.uvue
+6
-6
pages/API/get-native-view/element-getnativeview.uvue
pages/API/get-native-view/element-getnativeview.uvue
+52
-52
pages/API/get-system-setting/get-system-setting.uvue
pages/API/get-system-setting/get-system-setting.uvue
+10
-10
pages/API/get-univerify-manager/get-univerify-manager.uvue
pages/API/get-univerify-manager/get-univerify-manager.uvue
+121
-121
pages/API/get-video-info/get-video-info.uvue
pages/API/get-video-info/get-video-info.uvue
+86
-86
pages/API/install-apk/install-apk.uvue
pages/API/install-apk/install-apk.uvue
+1
-1
pages/API/interceptor/interceptor.uvue
pages/API/interceptor/interceptor.uvue
+1
-1
pages/API/load-font-face/load-font-face-child.uvue
pages/API/load-font-face/load-font-face-child.uvue
+46
-46
pages/API/load-font-face/load-font-face.uvue
pages/API/load-font-face/load-font-face.uvue
+105
-105
pages/API/make-phone-call/make-phone-call.uvue
pages/API/make-phone-call/make-phone-call.uvue
+50
-50
pages/API/navigator/navigator.uvue
pages/API/navigator/navigator.uvue
+21
-20
pages/API/navigator/new-page/new-page-1.uvue
pages/API/navigator/new-page/new-page-1.uvue
+48
-48
pages/API/navigator/new-page/new-page-3.uvue
pages/API/navigator/new-page/new-page-3.uvue
+4
-4
pages/API/navigator/new-page/onLoad.uvue
pages/API/navigator/new-page/onLoad.uvue
+118
-118
pages/API/open-location/open-location.uvue
pages/API/open-location/open-location.uvue
+81
-81
pages/API/page-scroll-to/page-scroll-to.uvue
pages/API/page-scroll-to/page-scroll-to.uvue
+60
-60
pages/API/preview-image/preview-image.uvue
pages/API/preview-image/preview-image.uvue
+121
-121
pages/API/provider/provider.uvue
pages/API/provider/provider.uvue
+152
-152
pages/API/pull-down-refresh/pull-down-refresh.uvue
pages/API/pull-down-refresh/pull-down-refresh.uvue
+2
-2
pages/API/request-payment/request-payment/order-detail.uvue
pages/API/request-payment/request-payment/order-detail.uvue
+37
-37
pages/API/request-payment/request-payment/request-payment-uni-pay.uvue
...uest-payment/request-payment/request-payment-uni-pay.uvue
+523
-518
pages/API/request/request.uvue
pages/API/request/request.uvue
+122
-122
pages/API/resize-observer/resize-observer.uvue
pages/API/resize-observer/resize-observer.uvue
+10
-10
pages/API/rpx2px/rpx2px.uvue
pages/API/rpx2px/rpx2px.uvue
+66
-66
pages/API/save-image-to-photos-album/save-image-to-photos-album.uvue
...ave-image-to-photos-album/save-image-to-photos-album.uvue
+60
-60
pages/API/save-video-to-photos-album/save-video-to-photos-album.uvue
...ave-video-to-photos-album/save-video-to-photos-album.uvue
+59
-59
pages/API/set-navigation-bar-title/set-navigation-bar-title.uvue
...PI/set-navigation-bar-title/set-navigation-bar-title.uvue
+64
-64
pages/API/set-page-backgroundColorContent/set-page-backgroundColorContent.uvue
...ckgroundColorContent/set-page-backgroundColorContent.uvue
+34
-34
pages/API/show-action-sheet/show-action-sheet.uvue
pages/API/show-action-sheet/show-action-sheet.uvue
+30
-29
pages/API/show-loading/show-loading.uvue
pages/API/show-loading/show-loading.uvue
+108
-108
pages/API/show-modal/show-modal.uvue
pages/API/show-modal/show-modal.uvue
+159
-159
pages/API/show-toast/show-toast.uvue
pages/API/show-toast/show-toast.uvue
+179
-179
pages/API/storage/storage.uvue
pages/API/storage/storage.uvue
+376
-375
pages/API/theme-change/theme-change.uvue
pages/API/theme-change/theme-change.uvue
+94
-94
pages/API/uni-push/uni-push.uvue
pages/API/uni-push/uni-push.uvue
+7
-7
pages/API/unicloud/unicloud/cloud-function.uvue
pages/API/unicloud/unicloud/cloud-function.uvue
+107
-107
pages/API/unicloud/unicloud/cloud-storage.uvue
pages/API/unicloud/unicloud/cloud-storage.uvue
+91
-91
pages/API/unicloud/unicloud/database.uvue
pages/API/unicloud/unicloud/database.uvue
+321
-321
pages/API/upload-file/upload-file.uvue
pages/API/upload-file/upload-file.uvue
+16
-16
pages/API/virtual-payment/virtual-payment-uni-pay.uvue
pages/API/virtual-payment/virtual-payment-uni-pay.uvue
+192
-190
pages/API/virtual-payment/virtual-payment.uvue
pages/API/virtual-payment/virtual-payment.uvue
+6
-6
pages/CSS/background/background-color.uvue
pages/CSS/background/background-color.uvue
+40
-43
pages/CSS/background/background-image.uvue
pages/CSS/background/background-image.uvue
+60
-60
pages/CSS/border/border-bottom.uvue
pages/CSS/border/border-bottom.uvue
+20
-20
pages/CSS/border/border-color.uvue
pages/CSS/border/border-color.uvue
+43
-56
pages/CSS/border/border-left.uvue
pages/CSS/border/border-left.uvue
+20
-20
pages/CSS/border/border-radius.uvue
pages/CSS/border/border-radius.uvue
+46
-46
pages/CSS/border/border-right.uvue
pages/CSS/border/border-right.uvue
+20
-20
pages/CSS/border/border-style.uvue
pages/CSS/border/border-style.uvue
+75
-99
pages/CSS/border/border-top.uvue
pages/CSS/border/border-top.uvue
+20
-20
pages/CSS/border/border-width.uvue
pages/CSS/border/border-width.uvue
+46
-46
pages/CSS/border/complex-border/complex-border.uvue
pages/CSS/border/complex-border/complex-border.uvue
+42
-44
pages/CSS/border/dynamic-border.uvue
pages/CSS/border/dynamic-border.uvue
+81
-81
pages/CSS/display/flex.uvue
pages/CSS/display/flex.uvue
+54
-51
pages/CSS/display/none.uvue
pages/CSS/display/none.uvue
+54
-51
pages/CSS/flex/align-content.uvue
pages/CSS/flex/align-content.uvue
+89
-149
pages/CSS/flex/align-items.uvue
pages/CSS/flex/align-items.uvue
+53
-71
pages/CSS/flex/flex-basis.uvue
pages/CSS/flex/flex-basis.uvue
+28
-34
pages/CSS/flex/flex-direction.uvue
pages/CSS/flex/flex-direction.uvue
+52
-76
pages/CSS/flex/flex-flow.uvue
pages/CSS/flex/flex-flow.uvue
+184
-232
pages/CSS/flex/flex-grow.uvue
pages/CSS/flex/flex-grow.uvue
+31
-33
pages/CSS/flex/flex-shrink.uvue
pages/CSS/flex/flex-shrink.uvue
+31
-33
pages/CSS/flex/flex.uvue
pages/CSS/flex/flex.uvue
+72
-96
pages/CSS/flex/justify-content.uvue
pages/CSS/flex/justify-content.uvue
+62
-92
pages/CSS/layout/height.uvue
pages/CSS/layout/height.uvue
+24
-24
pages/CSS/layout/max-height.uvue
pages/CSS/layout/max-height.uvue
+24
-24
pages/CSS/layout/max-width.uvue
pages/CSS/layout/max-width.uvue
+24
-24
pages/CSS/layout/min-height.uvue
pages/CSS/layout/min-height.uvue
+24
-24
pages/CSS/layout/min-width.uvue
pages/CSS/layout/min-width.uvue
+24
-24
pages/CSS/layout/position.uvue
pages/CSS/layout/position.uvue
+84
-138
pages/CSS/layout/visibility.uvue
pages/CSS/layout/visibility.uvue
+37
-37
pages/CSS/layout/width.uvue
pages/CSS/layout/width.uvue
+24
-24
pages/CSS/layout/z-index.uvue
pages/CSS/layout/z-index.uvue
+114
-111
pages/CSS/margin/margin-bottom.uvue
pages/CSS/margin/margin-bottom.uvue
+32
-32
pages/CSS/margin/margin-left.uvue
pages/CSS/margin/margin-left.uvue
+32
-32
pages/CSS/margin/margin-right.uvue
pages/CSS/margin/margin-right.uvue
+32
-32
pages/CSS/margin/margin-top.uvue
pages/CSS/margin/margin-top.uvue
+32
-32
pages/CSS/margin/margin.uvue
pages/CSS/margin/margin.uvue
+32
-32
pages/CSS/overflow/overflow-visible-event.uvue
pages/CSS/overflow/overflow-visible-event.uvue
+30
-30
pages/CSS/overflow/overflow.uvue
pages/CSS/overflow/overflow.uvue
+40
-40
pages/CSS/padding/padding-bottom.uvue
pages/CSS/padding/padding-bottom.uvue
+29
-29
pages/CSS/padding/padding-left.uvue
pages/CSS/padding/padding-left.uvue
+29
-29
pages/CSS/padding/padding-right.uvue
pages/CSS/padding/padding-right.uvue
+29
-29
pages/CSS/padding/padding-top.uvue
pages/CSS/padding/padding-top.uvue
+29
-29
pages/CSS/padding/padding.uvue
pages/CSS/padding/padding.uvue
+29
-29
pages/CSS/pointer-events/pointer-events.uvue
pages/CSS/pointer-events/pointer-events.uvue
+109
-109
pages/CSS/text/color.uvue
pages/CSS/text/color.uvue
+21
-21
pages/CSS/text/font-size.uvue
pages/CSS/text/font-size.uvue
+27
-27
pages/CSS/text/font-style.uvue
pages/CSS/text/font-style.uvue
+18
-18
pages/CSS/text/text-overflow.uvue
pages/CSS/text/text-overflow.uvue
+43
-43
pages/CSS/transition/transition.uvue
pages/CSS/transition/transition.uvue
+315
-315
pages/component/ad/ad.uvue
pages/component/ad/ad.uvue
+31
-31
pages/component/button/button.uvue
pages/component/button/button.uvue
+3
-3
pages/component/canvas/canvas-context.uvue
pages/component/canvas/canvas-context.uvue
+3
-3
pages/component/canvas/canvas.uvue
pages/component/canvas/canvas.uvue
+1
-1
pages/component/canvas/canvas/ball.uvue
pages/component/canvas/canvas/ball.uvue
+1
-1
pages/component/cover-view/cover-view.uvue
pages/component/cover-view/cover-view.uvue
+64
-64
pages/component/editor/editor.test.js
pages/component/editor/editor.test.js
+105
-105
pages/component/editor/editor.uvue
pages/component/editor/editor.uvue
+304
-306
pages/component/form/form.uvue
pages/component/form/form.uvue
+145
-145
pages/component/global-events/global-events.uvue
pages/component/global-events/global-events.uvue
+1
-1
pages/component/global-events/touch-events.uvue
pages/component/global-events/touch-events.uvue
+114
-115
pages/component/global-events/transition-events.uvue
pages/component/global-events/transition-events.uvue
+85
-85
pages/component/global-properties/global-properties.uvue
pages/component/global-properties/global-properties.uvue
+136
-146
pages/component/image/image-format.uvue
pages/component/image/image-format.uvue
+109
-109
pages/component/image/image-large.uvue
pages/component/image/image-large.uvue
+40
-40
pages/component/image/image-mode.uvue
pages/component/image/image-mode.uvue
+130
-130
pages/component/image/image-path.uvue
pages/component/image/image-path.uvue
+114
-114
pages/component/image/image.uvue
pages/component/image/image.uvue
+25
-25
pages/component/label/label.uvue
pages/component/label/label.uvue
+121
-116
pages/component/list-view/ListViewWrapper.uvue
pages/component/list-view/ListViewWrapper.uvue
+4
-4
pages/component/list-view/issue-2199-item.uvue
pages/component/list-view/issue-2199-item.uvue
+1
-1
pages/component/list-view/list-view-multiplex-input.uvue
pages/component/list-view/list-view-multiplex-input.uvue
+45
-44
pages/component/list-view/list-view-multiplex-video.uvue
pages/component/list-view/list-view-multiplex-video.uvue
+38
-38
pages/component/list-view/list-view-multiplex.uvue
pages/component/list-view/list-view-multiplex.uvue
+89
-89
pages/component/list-view/list-view-refresh.uvue
pages/component/list-view/list-view-refresh.uvue
+75
-74
pages/component/list-view/list-view.uvue
pages/component/list-view/list-view.uvue
+319
-319
pages/component/map/map.uvue
pages/component/map/map.uvue
+674
-674
pages/component/movable-view/movable-view.uvue
pages/component/movable-view/movable-view.uvue
+129
-128
pages/component/native-view/native-view.uvue
pages/component/native-view/native-view.uvue
+47
-47
pages/component/navigator/navigate.uvue
pages/component/navigator/navigate.uvue
+12
-12
pages/component/navigator/navigator.uvue
pages/component/navigator/navigator.uvue
+48
-48
pages/component/navigator/redirect.uvue
pages/component/navigator/redirect.uvue
+12
-12
pages/component/nested-scroll-body/nested-scroll-body.uvue
pages/component/nested-scroll-body/nested-scroll-body.uvue
+113
-111
pages/component/nested-scroll-header/nested-scroll-header.uvue
.../component/nested-scroll-header/nested-scroll-header.uvue
+79
-80
pages/component/picker-view/picker-view.uvue
pages/component/picker-view/picker-view.uvue
+37
-37
pages/component/picker/picker.uvue
pages/component/picker/picker.uvue
+174
-171
pages/component/rich-text/rich-text-complex.uvue
pages/component/rich-text/rich-text-complex.uvue
+54
-54
pages/component/rich-text/rich-text-tags.uvue
pages/component/rich-text/rich-text-tags.uvue
+326
-326
pages/component/rich-text/rich-text.uvue
pages/component/rich-text/rich-text.uvue
+68
-68
pages/component/scroll-view/scroll-view-custom-refresher-props.uvue
...onent/scroll-view/scroll-view-custom-refresher-props.uvue
+61
-60
pages/component/scroll-view/scroll-view-props.uvue
pages/component/scroll-view/scroll-view-props.uvue
+33
-33
pages/component/scroll-view/scroll-view-refresher-props.uvue
pages/component/scroll-view/scroll-view-refresher-props.uvue
+177
-177
pages/component/scroll-view/scroll-view-refresher.uvue
pages/component/scroll-view/scroll-view-refresher.uvue
+148
-148
pages/component/scroll-view/scroll-view.uvue
pages/component/scroll-view/scroll-view.uvue
+196
-194
pages/component/slider/slider.uvue
pages/component/slider/slider.uvue
+187
-191
pages/component/sticky-header/sticky-header.uvue
pages/component/sticky-header/sticky-header.uvue
+91
-91
pages/component/sticky-section/sticky-section.uvue
pages/component/sticky-section/sticky-section.uvue
+59
-58
pages/component/swiper/swiper-list-view.uvue
pages/component/swiper/swiper-list-view.uvue
+70
-67
pages/component/swiper/swiper.uvue
pages/component/swiper/swiper.uvue
+60
-60
pages/component/switch/switch.uvue
pages/component/switch/switch.uvue
+70
-68
pages/component/text/text-props.uvue
pages/component/text/text-props.uvue
+173
-179
pages/component/text/text.uvue
pages/component/text/text.uvue
+5
-5
pages/component/unicloud-db/unicloud-db.uvue
pages/component/unicloud-db/unicloud-db.uvue
+179
-179
pages/component/unicloud-db/unicloud-db/contacts/add.uvue
pages/component/unicloud-db/unicloud-db/contacts/add.uvue
+116
-116
pages/component/unicloud-db/unicloud-db/contacts/detail.uvue
pages/component/unicloud-db/unicloud-db/contacts/detail.uvue
+109
-109
pages/component/unicloud-db/unicloud-db/contacts/edit.uvue
pages/component/unicloud-db/unicloud-db/contacts/edit.uvue
+170
-169
pages/component/unicloud-db/unicloud-db/contacts/list.uvue
pages/component/unicloud-db/unicloud-db/contacts/list.uvue
+144
-144
pages/component/unicloud-db/unicloud-db/contacts/types.uts
pages/component/unicloud-db/unicloud-db/contacts/types.uts
+24
-24
pages/component/unicloud-db/unicloud-db/mixin-datacom/datacom.uvue
...ponent/unicloud-db/unicloud-db/mixin-datacom/datacom.uvue
+69
-69
pages/component/unicloud-db/unicloud-db/mixin-datacom/mixin-datacom.uvue
.../unicloud-db/unicloud-db/mixin-datacom/mixin-datacom.uvue
+26
-26
pages/component/video/video-format.uvue
pages/component/video/video-format.uvue
+110
-109
pages/component/video/video.uvue
pages/component/video/video.uvue
+577
-561
pages/component/view/view.uvue
pages/component/view/view.uvue
+72
-72
pages/component/web-view/web-view.uvue
pages/component/web-view/web-view.uvue
+223
-222
pages/component/web-view/web-view/web-view-local.uvue
pages/component/web-view/web-view/web-view-local.uvue
+78
-78
pages/tabBar/API.uvue
pages/tabBar/API.uvue
+4
-6
pages/tabBar/CSS.uvue
pages/tabBar/CSS.uvue
+2
-2
pages/tabBar/component.uvue
pages/tabBar/component.uvue
+2
-2
pages/tabBar/generateMenu.uts
pages/tabBar/generateMenu.uts
+8
-8
pages/tabBar/template.uvue
pages/tabBar/template.uvue
+49
-46
未找到文件。
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>