提交 39ecb50e 编写于 作者: DCloud-yyl's avatar DCloud-yyl

适配支持uni-app x项目

上级 f5da955e
root = true
[*]
charset = utf-8
end_of_line = lf
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true
<script lang="uts">
let firstBackTime = 0
export default {
onLaunch: function () {
console.log('App Launch')
},
onShow: function () {
console.log('App Show')
},
onHide: function () {
console.log('App Hide')
},
onLastPageBackPress: function () {
console.log('App LastPageBackPress')
if (firstBackTime == 0) {
uni.showToast({
title: '再按一次退出应用',
position: 'bottom',
})
firstBackTime = Date.now()
setTimeout(() => {
firstBackTime = 0
}, 2000)
} else if (Date.now() - firstBackTime < 2000) {
firstBackTime = Date.now()
uni.exit()
}
},
onExit: function () {
console.log('App Exit')
},
}
</script>
<style>
/*每个页面公共css */
.uni-row {
flex-direction: row;
}
.uni-column {
flex-direction: column;
}
</style>
\ No newline at end of file
import App from './App'
import { createSSRApp } from 'vue'
export function createApp() {
const app = createSSRApp(App)
return {
app
}
}
\ No newline at end of file
{ {
"name" : "uni-component", "name": "uni-component",
"appid" : "__UNI__0094991", "appid": "__UNI__0094991",
"description" : "uts组件示例", "description": "uts组件示例",
"versionName" : "1.0.0", "versionName": "1.0.0",
"versionCode" : "100", "versionCode": "100",
"transformPx" : false, "transformPx": false,
/* 5+App特有相关 */ /* uni-app x 特有相关 */
"app-plus" : { // "uni-app-x": {},
"usingComponents" : true, /* uni-app特有相关 */
"nvueStyleCompiler" : "uni-app", "app-plus": {
"compilerVersion" : 3, "usingComponents": true,
"splashscreen" : { "nvueStyleCompiler": "uni-app",
"alwaysShowBeforeRender" : true, "compilerVersion": 3,
"waiting" : true, "splashscreen": {
"autoclose" : true, "alwaysShowBeforeRender": true,
"delay" : 0 "waiting": true,
}, "autoclose": true,
/* 模块配置 */ "delay": 0
"modules" : {}, },
/* 应用发布信息 */ /* 模块配置 */
"distribute" : { "modules": {},
/* android打包配置 */ /* 应用发布信息 */
"android" : { "distribute": {
"permissions" : [ /* android打包配置 */
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>", "android": {},
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>", /* ios打包配置 */
"<uses-permission android:name=\"android.permission.VIBRATE\"/>", "ios": {
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>", "dSYMs": false
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>", },
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>", /* SDK配置 */
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>", "sdkConfigs": {
"<uses-permission android:name=\"android.permission.CAMERA\"/>", "ad": {}
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>", }
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>", }
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>", },
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>", /* 快应用特有相关 */
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>", "quickapp": {},
"<uses-feature android:name=\"android.hardware.camera\"/>", /* 小程序特有相关 */
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>" "mp-weixin": {
] "appid": "",
}, "setting": {
/* ios打包配置 */ "urlCheck": false
"ios" : {}, },
/* SDK配置 */ "usingComponents": true
"sdkConfigs" : {} },
} "mp-alipay": {
}, "usingComponents": true
/* 快应用特有相关 */ },
"quickapp" : {}, "mp-baidu": {
/* 小程序特有相关 */ "usingComponents": true
"mp-weixin" : { },
"appid" : "", "mp-toutiao": {
"setting" : { "usingComponents": true
"urlCheck" : false },
}, "uniStatistics": {
"usingComponents" : true "enable": false
}, },
"mp-alipay" : { "vueVersion": "3"
"usingComponents" : true }
}, \ No newline at end of file
"mp-baidu" : {
"usingComponents" : true
},
"mp-toutiao" : {
"usingComponents" : true
},
"uniStatistics" : {
"enable" : false
},
"vueVersion" : "3"
}
{ {
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{ {
"path": "pages/index/index", "path": "pages/index/index",
"style": { "style": {
"navigationBarTitleText": "uni-app" "navigationBarTitleText": "uni-app"
} }
} },
], {
"globalStyle": { "path": "pages/animation-view/animation-view",
"navigationBarTextStyle": "black", "style": {
"navigationBarTitleText": "uni-app", "navigationBarTitleText": "animation-view",
"navigationBarBackgroundColor": "#F8F8F8", "enablePullDownRefresh": false
"backgroundColor": "#F8F8F8" }
}, },
"uniIdRouter": {} {
"path": "pages/video-view/video-view",
"style": {
"navigationBarTitleText": "video-view",
"enablePullDownRefresh": false
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"uniIdRouter": {}
} }
<template>
<view class="content">
<animation-view class="animation" :path="path" :loop="loop" :autoplay="autoplay" :action="action" :hidden="hidden"
@bindended="lottieEnd">
</animation-view>
<button class="button" @click="playLottie" type="primary">{{status}}lottie动画</button>
<button class="button" @click="changeLottie" type="primary">切换{{location}}动画</button>
<text class="tips">注意:uts组件插件animation-view需要使用自定义基座才能生效!</text>
</view>
</template>
<script>
export default {
data() {
return {
path: '/uni_modules/uni-animation-view/static/lottie.json',
loop: false,
autoplay: false,
action: 'stop',
hidden: false,
status: '播放',
location: '网络'
}
},
methods: {
playLottie() {
this.action = ('play' !== this.action) ? 'play' : 'pause';
this.status = ('pause' === this.action) ? '播放' : '暂停';
},
changeLottie() {
this.action = 'stop';
this.status = '播放';
this.path = ('网络' === this.location) ? 'https://native-res.dcloud.net.cn/uni-app/static/lottie.json' :
'/uni_modules/uni-animation-view/static/lottie.json';
this.location = ('网络' === this.location) ? '本地' : '网络';
console.log('path=' + this.path);
},
lottieEnd() {
this.status = '播放';
this.action = 'stop';
console.log('动画播放结束');
}
}
}
</script>
<style>
.content {
display: flex;
flex: 1;
align-items: center;
}
.animation {
width: 750rpx;
height: 300rpx;
background-color: #CCCCCC;
margin-bottom: 20px;
}
.button {
width: 640rpx;
margin: 10px;
}
.tips {
margin: 20px;
color: darkred;
}
</style>
<template>
<view class="content">
<animation-view class="animation" :path="path" :loop="loop" :autoplay="autoplay" :action="action" :hidden="hidden"
@bindended="lottieEnd">
</animation-view>
<button class="button" @click="playLottie" type="primary">{{status}}lottie动画</button>
<button class="button" @click="changeLottie" type="primary">切换{{location}}动画</button>
<text class="tips">注意:uts组件插件animation-view需要使用自定义基座才能生效!</text>
</view>
</template>
<script>
export default {
data() {
return {
path: '/uni_modules/uni-animation-view/static/lottie.json',
loop: false,
autoplay: false,
action: 'stop',
hidden: false,
status: '播放',
location: '网络'
}
},
methods: {
playLottie() {
this.action = ('play' !== this.action) ? 'play' : 'pause';
this.status = ('pause' === this.action) ? '播放' : '暂停';
},
changeLottie() {
this.action = 'stop';
this.status = '播放';
this.path = ('网络' === this.location) ? 'https://native-res.dcloud.net.cn/uni-app/static/lottie.json' :
'/uni_modules/uni-animation-view/static/lottie.json';
this.location = ('网络' === this.location) ? '本地' : '网络';
console.log('path=' + this.path);
},
lottieEnd() {
this.status = '播放';
this.action = 'stop';
console.log('动画播放结束');
}
}
}
</script>
<style>
.content {
display: flex;
flex: 1;
align-items: center;
}
.animation {
width: 750rpx;
height: 300rpx;
background-color: #CCCCCC;
margin-bottom: 20px;
}
.button {
width: 640rpx;
margin: 10px;
}
.tips {
margin: 20px;
color: darkred;
}
</style>
<template> <template>
<div> <!-- #ifdef APP -->
<animation-view class="animation" :path="path" :loop="loop" :autoplay="autoplay" :action="action" <scroll-view class="content">
:hidden="hidden" @bindended="lottieEnd"> <!-- #endif -->
</animation-view> <image class="logo" src="/static/logo.png"></image>
<button @click="playLottie" type="primary">{{status}}lottie动画</button> <view class="text-area">
<button @click="changeLottie" type="primary">切换{{location}}动画</button> <text class="title">{{title}}</text>
</div> </view>
</template> <view class="buttons">
<button class="button" @tap="openAnimationView" type="primary">animation-view示例</button>
<script> <button class="button" @tap="openVideoView" type="primary">video-view示例</button>
export default { </view>
data() { <!-- #ifdef APP -->
return { </scroll-view>
path: '/uni_modules/uni-animation-view/static/lottie.json', <!-- #endif -->
loop: false, </template>
autoplay: false,
action: 'stop', <script>
hidden: false, export default {
status: '播放', data() {
location: '网络' return {
} title: 'Hello'
}, }
methods: { },
playLottie() { methods: {
this.action = ('play' !== this.action) ? 'play' : 'pause'; openAnimationView() {
this.status = ('pause' === this.action) ? '播放' : '暂停'; uni.navigateTo({
}, url: '/pages/animation-view/animation-view'
changeLottie() { })
this.action = 'stop'; },
this.status = '播放'; openVideoView() {
this.path = ('网络' === this.location) ? 'https://native-res.dcloud.net.cn/uni-app/static/lottie.json' : '/uni_modules/uni-animation-view/static/lottie.json'; uni.navigateTo({
this.location = ('网络' === this.location) ? '本地' : '网络'; url: '/pages/video-view/video-view'
console.log('path='+this.path); })
}, }
lottieEnd() { }
this.status = '播放'; }
this.action = 'stop'; </script>
console.log('动画播放结束');
} <style>
} .content {
} display: flex;
</script> flex: 1;
align-items: center;
<style> }
.animation {
width: 750rpx; .logo {
height: 300rpx; height: 200rpx;
background-color: #CCCCCC; width: 200rpx;
margin-bottom: 20px; margin-top: 200rpx;
} margin-bottom: 50rpx;
</style> }
.title {
font-size: 36rpx;
color: #8f8f94;
}
.buttons {
margin-top: 50px;
margin-bottom: 50px;
}
.button {
width: 640rpx;
margin: 10px;
}
</style>
\ No newline at end of file
<template>
<!-- #ifdef APP -->
<scroll-view class="content">
<!-- #endif -->
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
<view class="buttons">
<button class="button" @tap="openAnimationView" type="primary">animation-view示例</button>
<button class="button" @tap="openVideoView" type="primary">video-view示例</button>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script>
export default {
data() {
return {
title: 'Hello'
}
},
methods: {
openAnimationView() {
uni.navigateTo({
url: '/pages/animation-view/animation-view'
})
},
openVideoView() {
uni.navigateTo({
url: '/pages/video-view/video-view'
})
}
}
}
</script>
<style>
.content {
display: flex;
flex: 1;
align-items: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-bottom: 50rpx;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
.buttons {
margin-top: 50px;
margin-bottom: 50px;
}
.button {
width: 640rpx;
margin: 10px;
}
</style>
<template>
<view class="content">
<video-view id="video" ref="video" class="video" :src="src">
</video-view>
<button class="button" @click="play" type="primary">播放</button>
<text class="tiptitle">注意:</text>
<view class="tips">
<text class="tip">uts组件插件video-view需要使用自定义基座才能生效!</text>
<text class="tip">暂时仅支持uni-app x项目!</text>
<text class="tip">暂时仅支持Android平台!</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
src: 'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v'
}
},
methods: {
play() {
//uni-app 项目 nvue 页面中的调用方式
this.$refs['video'].play();
//uni-app x 项目 uvue 页面中的调用方式(以下方式二选一)
// (this.$refs['video'] as VideoViewElement).play();
// (uni.getElementById('video') as VideoViewElement).play();
}
}
}
</script>
<style>
.content {
display: flex;
flex: 1;
align-items: center;
}
.video {
width: 750rpx;
height: 400rpx;
}
.button {
width: 640rpx;
margin: 10px;
}
.tiptitle {
margin-top: 20px;
font-size: 18px;
color: darkred;
}
.tips {
justify-content: flex-start;
margin: 0px 20px;
}
.tip {
color: darkred;
}
</style>
<template>
<view class="content">
<video-view id="video" ref="video" class="video" :src="src">
</video-view>
<button class="button" @click="play" type="primary">播放</button>
<text class="tiptitle">注意:</text>
<view class="tips">
<text class="tip">uts组件插件video-view需要使用自定义基座才能生效!</text>
<text class="tip">暂时仅支持uni-app x项目!</text>
<text class="tip">暂时仅支持Android平台!</text>
</view>
</view>
</template>
<script>
/**
* VideoViewElement 是uts组件对象类型名称
* 命名规则:组件名称以upper camel case方式命名 + Element,如这里的组件名称为 video-view,对应的uts组件对象类型名称为VideoViewElement
*/
//Todo: 临时解决方案,新版本将无需import
import { VideoViewElement } from "uts.sdk.modules.uniVideo"
export default {
data() {
return {
src: 'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v'
}
},
methods: {
play() {
//uni-app 项目 nvue 页面中的调用方式
// this.$refs['video'].play();
//uni-app x 项目 uvue 页面中的调用方式(以下方式二选一)
// (this.$refs['video'] as VideoViewElement).play();
(uni.getElementById('video') as VideoViewElement).play();
}
}
}
</script>
<style>
.content {
display: flex;
flex: 1;
align-items: center;
}
.video {
width: 750rpx;
height: 400rpx;
}
.button {
width: 640rpx;
margin: 10px;
}
.tiptitle {
margin-top: 20px;
font-size: 18px;
color: darkred;
}
.tips {
justify-content: flex-start;
margin: 0px 20px;
}
.tip {
color: darkred;
}
</style>
此项目为开源uts组件插件。
## 注意事项
uts组件插件基本都会依赖三方SDK,需要使用自定义基座才能正常运行。
此项目默认为uni-app项目,如果要切换为uni-app x项目,需打开manifest.json,去掉uni-app-x节点的注释:
```
/* uni-app x 特有相关 */
// "uni-app-x": {},
```
关闭manifest.json后重新打开即可。
## uni-animation-view
动画组件 animation-view
## uni-video
视频播放组件 video-view,暂时仅支持Android平台的 uni-app x 项目
## 1.0.0(2023-01-16) ## 1.0.0(2023-01-16)
实现android/ios平台animation-view组件,仅支持nvue页面 实现android/ios平台 animation-view 组件,仅支持 nvue 页面
## 1.0.1(2023-10-23)
android平台适配 uni-app x 项目,支持 uvue 页面,需使用 HBuilderX3.94+ 版本
{ {
"id": "uni-animation-view", "id": "uni-animation-view",
"displayName": "animation-view", "displayName": "animation-view",
"version": "1.0.0", "version": "1.0.1",
"description": "使用uts组件开发,实现animation-view组件", "description": "使用uts组件开发,实现animation-view组件",
"keywords": [ "keywords": [
"animation-view", "animation-view",
......
# animation-view ## uts插件开发文档
[UTS 语法](https://uniapp.dcloud.net.cn/tutorial/syntax-uts.html)
> animation-view组件是[uts插件](https://uniapp.dcloud.net.cn/plugin/uts-component.html),需 HBuilderX 3.7.0+ [UTS API插件](https://uniapp.dcloud.net.cn/plugin/uts-plugin.html)
[UTS 组件插件](https://uniapp.dcloud.net.cn/plugin/uts-component.html)
> 使用文档:[https://uniapp.dcloud.net.cn/component/animation-view.html](https://uniapp.dcloud.net.cn/component/animation-view.html) [Hello UTS](https://gitcode.net/dcloud/hello-uts)
### 属性说明 ## animation-view
|属性名|类型|默认值|说明| > animation-view组件是[uts插件](https://uniapp.dcloud.net.cn/plugin/uts-component.html),需 HBuilderX 3.7.0+
|:-|:-|:-|:-|
| path | String | | 动画资源地址,支持本地路径和网络路径 | > 使用文档:[https://uniapp.dcloud.net.cn/component/animation-view.html](https://uniapp.dcloud.net.cn/component/animation-view.html)
| loop | Boolean | false | 动画是否循环播放 |
| autoplay | Boolean | true | 动画是否自动播放 |
| action | String | play | 动画操作,可取值 play、pause、stop | ### 属性说明
| hidden | Boolean | true | 是否隐藏动画 |
| @bindended | EventHandle | | 当播放到末尾时触发 ended 事件(自然播放结束会触发回调,循环播放结束及手动停止动画不会触发) | |属性名|类型|默认值|说明|
|:-|:-|:-|:-|
| path | String | | 动画资源地址,支持本地路径和网络路径 |
**注意** | loop | Boolean | false | 动画是否循环播放 |
* animation-view 仅App端nvue页面支持 | autoplay | Boolean | true | 动画是否自动播放 |
* App端实现使用了Lottie三方SDK,参考开源项目:[Lottie for Android](https://github.com/airbnb/lottie-android)[Lottie for iOS](https://github.com/airbnb/lottie-ios) | action | String | play | 动画操作,可取值 play、pause、stop |
* App-Android平台要求Android5(API Leavel 21)及以上系统 | hidden | Boolean | true | 是否隐藏动画 |
* App-iOS平台要求iOS11及以上版本系统 | @bindended | EventHandle | | 当播放到末尾时触发 ended 事件(自然播放结束会触发回调,循环播放结束及手动停止动画不会触发) |
### 代码示例 **注意**
* animation-view 仅App端nvue页面支持
```html * App端实现使用了Lottie三方SDK,参考开源项目:[Lottie for Android](https://github.com/airbnb/lottie-android)[Lottie for iOS](https://github.com/airbnb/lottie-ios)
<template> * App-Android平台要求Android5(API Leavel 21)及以上系统
<div> * App-iOS平台要求iOS11及以上版本系统
<animation-view class="animation" :path="path" :loop="loop" :autoplay="autoplay" :action="action"
:hidden="hidden" @bindended="lottieEnd">
</animation-view> ### 代码示例
<button @click="playLottie" type="primary">{{status}}lottie动画</button>
</div> ```html
</template> <template>
<div>
<script> <animation-view class="animation" :path="path" :loop="loop" :autoplay="autoplay" :action="action"
export default { :hidden="hidden" @bindended="lottieEnd">
data() { </animation-view>
return { <button @click="playLottie" type="primary">{{status}}lottie动画</button>
path: 'https://b.bdstatic.com/miniapp/images/lottie_example_one.json', </div>
loop: false, </template>
autoplay: false,
action: 'play', <script>
hidden: false, export default {
status: '暂停' data() {
} return {
}, path: 'https://b.bdstatic.com/miniapp/images/lottie_example_one.json',
methods: { loop: false,
playLottie() { autoplay: false,
this.action = ('play' !== this.action) ? 'play' : 'pause'; action: 'play',
this.status = ('pause' === this.action) ? '播放' : '暂停'; hidden: false,
}, status: '暂停'
lottieEnd() { }
this.status = '播放'; },
this.action = 'stop'; methods: {
console.log('动画播放结束'); playLottie() {
} this.action = ('play' !== this.action) ? 'play' : 'pause';
} this.status = ('pause' === this.action) ? '播放' : '暂停';
} },
</script> lottieEnd() {
this.status = '播放';
<style> this.action = 'stop';
.animation { console.log('动画播放结束');
width: 750rpx; }
height: 300rpx; }
background-color: #FF0000; }
margin-bottom: 20px; </script>
}
</style> <style>
``` .animation {
width: 750rpx;
height: 300rpx;
background-color: #FF0000;
margin-bottom: 20px;
}
</style>
```
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
//原生提供以下属性或方法的实现 //原生提供以下属性或方法的实现
export default { export default {
name: "uts-animation-view", name: "animation-view",
/** /**
* 当播放到末尾时触发 ended 事件(自然播放结束会触发回调,循环播放结束及手动停止动画不会触发) * 当播放到末尾时触发 ended 事件(自然播放结束会触发回调,循环播放结束及手动停止动画不会触发)
*/ */
......
<template>
<view>
</view>
</template>
<script >
export default {
name: "uni-animation-view",
data() {
return {}
}
}
</script>
## 1.0.0(2023-10-26)
实现android平台 video-view 组件,仅支持 uni-app x项目的 uvue 页面
{ {
"id": "uni-video", "id": "uni-video",
"displayName": "uni-video", "displayName": "uni-video",
"version": "1.0.0", "version": "1.0.0",
"description": "uni-video", "description": "uni-video",
"keywords": [ "keywords": [
"uni-video" "uni-video"
], ],
"repository": "", "repository": "",
"engines": { "engines": {
"HBuilderX": "^3.7.0" "HBuilderX": "^3.7.0"
}, },
"dcloudext": { "dcloudext": {
"type": "component-uts", "type": "component-uts",
"sale": { "sale": {
"regular": { "regular": {
"price": "0.00" "price": "0.00"
}, },
"sourcecode": { "sourcecode": {
"price": "0.00" "price": "0.00"
} }
}, },
"contact": { "contact": {
"qq": "" "qq": ""
}, },
"declaration": { "declaration": {
"ads": "", "ads": "",
"data": "", "data": "",
"permissions": "" "permissions": ""
}, },
"npmurl": "" "npmurl": ""
}, },
"uni_modules": { "uni_modules": {
"dependencies": [ "dependencies": [
"uni-framework" "uni-framework"
], ],
"uni-ext-api": { "encrypt": [],
"uni": { "platforms": {
"createVideoContext": { "cloud": {
"name": "createVideoContext", "tcb": "u",
"app": { "aliyun": "u"
"js": false, },
"kotlin": true, "client": {
"swift": false "Vue": {
} "vue2": "u",
} "vue3": "u"
} },
}, "App": {
"encrypt": [], "app-android": "y",
"platforms": { "app-ios": "u"
"cloud": { },
"tcb": "u", "H5-mobile": {
"aliyun": "u" "Safari": "u",
}, "Android Browser": "u",
"client": { "微信浏览器(Android)": "u",
"Vue": { "QQ浏览器(Android)": "u"
"vue2": "u", },
"vue3": "u" "H5-pc": {
}, "Chrome": "u",
"App": { "IE": "u",
"app-android": "u", "Edge": "u",
"app-ios": "u" "Firefox": "u",
}, "Safari": "u"
"H5-mobile": { },
"Safari": "u", "小程序": {
"Android Browser": "u", "微信": "u",
"微信浏览器(Android)": "u", "阿里": "u",
"QQ浏览器(Android)": "u" "百度": "u",
}, "字节跳动": "u",
"H5-pc": { "QQ": "u",
"Chrome": "u", "钉钉": "u",
"IE": "u", "快手": "u",
"Edge": "u", "飞书": "u",
"Firefox": "u", "京东": "u"
"Safari": "u" },
}, "快应用": {
"小程序": { "华为": "u",
"微信": "u", "联盟": "u"
"阿里": "u", }
"百度": "u", }
"字节跳动": "u", }
"QQ": "u", }
"钉钉": "u",
"快手": "u",
"飞书": "u",
"京东": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
} }
\ No newline at end of file
# uni-video ## uts插件开发文档
### 开发文档
[UTS 语法](https://uniapp.dcloud.net.cn/tutorial/syntax-uts.html) [UTS 语法](https://uniapp.dcloud.net.cn/tutorial/syntax-uts.html)
[UTS API插件](https://uniapp.dcloud.net.cn/plugin/uts-plugin.html) [UTS API插件](https://uniapp.dcloud.net.cn/plugin/uts-plugin.html)
[UTS 组件插件](https://uniapp.dcloud.net.cn/plugin/uts-component.html) [UTS 组件插件](https://uniapp.dcloud.net.cn/plugin/uts-component.html)
[Hello UTS](https://gitcode.net/dcloud/hello-uts) [Hello UTS](https://gitcode.net/dcloud/hello-uts)
\ No newline at end of file
## video-view
此插件为uni-app x项目中内置 video 组件的开源uts组件插件,为了避免与内置 video 组件冲突,开源uts组件插件注册为 video-view 组件。
**注意**
- video-view组件不支持[uni.createVideoContext](https://uniapp.dcloud.net.cn/uni-app-x/api/create-video-context.html)
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
import { Danmu, RequestFullScreenOptions } from '../interface.uts'; import { Danmu, RequestFullScreenOptions } from '../interface.uts';
export default { export default {
name: "video", name: "video-view",
data() { data() {
return { return {
rootView: null as FrameLayout | null, rootView: null as FrameLayout | null,
...@@ -580,8 +580,8 @@ ...@@ -580,8 +580,8 @@
override onInfo(iMediaPlayer : IMediaPlayer | null, status : Int, extra : Int) : boolean { override onInfo(iMediaPlayer : IMediaPlayer | null, status : Int, extra : Int) : boolean {
switch (status) { switch (status) {
case MediaPlayerParams.STATE_COMPLETED: case MediaPlayerParams.STATE_COMPLETED:
if ((this.comp as VideoComponent).loop) { if ((this.comp as VideoViewComponent).loop) {
let initialTime = (this.comp as VideoComponent).initialTime as Int; let initialTime = (this.comp as VideoViewComponent).initialTime as Int;
if (initialTime > 0) this.playerView.seekTo(initialTime * 1000); if (initialTime > 0) this.playerView.seekTo(initialTime * 1000);
this.playerView.start(); this.playerView.start();
} }
......
<template>
<view>
</view>
</template>
<script lang="uts">
import {
UIView
} from "UIKit"
export default {
name: "video",
data() {
return {}
},
// 创建组件对应的原生 View,返回值类型需要修改为实际 View 类型
NVLoad(): UIView {
return new UIView()
}
}
</script>
import { ComponentPublicInstance } from 'vue'
import { CreateVideoContext, VideoContext, RequestFullScreenOptions, Danmu } from './interface'
import { UniVideoElement } from './app-android/index.vue'
export const createVideoContext : CreateVideoContext = function (videoId : VideoIdString, component : ComponentPublicInstance | null) : VideoContext | null {
let videoElement : Element | null = null;
if (component == null) {
const pages = getCurrentPages();
if (pages.length > 0) {
videoElement = pages[pages.length - 1].$querySelector('#' + videoId);
}
} else {
videoElement = component.$querySelector('#' + videoId);
}
if (videoElement == null) return null;
return new VideoContextImpl(videoElement as UniVideoElement);
}
class VideoContextImpl implements VideoContext {
private videoElement : UniVideoElement;
constructor(videoElement : UniVideoElement) {
this.videoElement = videoElement;
}
play() {
this.videoElement.play();
}
pause() {
this.videoElement.pause();
}
seek(position : number) {
this.videoElement.seek(position);
}
stop() {
this.videoElement.stop();
}
sendDanmu(danmu : Danmu) {
this.videoElement.sendDanmu(danmu);
}
playbackRate(rate : number) {
this.videoElement.playbackRate(rate);
}
requestFullScreen(direction : RequestFullScreenOptions | null) {
this.videoElement.requestFullScreen(direction);
}
exitFullScreen() {
this.videoElement.exitFullScreen();
}
}
\ No newline at end of file
import { ComponentPublicInstance } from 'vue'
export type CreateVideoContext = (videoId: VideoIdString, component?: ComponentPublicInstance | null) => VideoContext | null;
export type Danmu = { export type Danmu = {
/** /**
...@@ -147,25 +144,3 @@ export interface VideoContext { ...@@ -147,25 +144,3 @@ export interface VideoContext {
*/ */
exitFullScreen(): void; exitFullScreen(): void;
} }
export interface Uni {
/**
* 创建并返回 video 上下文 videoContext 对象
* @description 创建并返回 video 上下文 videoContext 对象
* @uniPlatform {
* "app": {
* "android": {
* "osVer": "4.4",
* "uniVer": "√",
* "unixVer": "√"
* }
* }
* }
* @uniVueVersion 2,3
* @return {VideoContext} 视频对象
*
* @tutorial http://uniapp.dcloud.io/api/media/video-context?id=createVideoContext
*
*/
createVideoContext(videoId : string | HBuilderX.VideoIdString, component?: ComponentPublicInstance | null) : VideoContext | null
}
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册