提交 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",
"appid" : "__UNI__0094991",
"description" : "uts组件示例",
"versionName" : "1.0.0",
"versionCode" : "100",
"transformPx" : false,
/* 5+App特有相关 */
"app-plus" : {
"usingComponents" : true,
"nvueStyleCompiler" : "uni-app",
"compilerVersion" : 3,
"splashscreen" : {
"alwaysShowBeforeRender" : true,
"waiting" : true,
"autoclose" : true,
"delay" : 0
"name": "uni-component",
"appid": "__UNI__0094991",
"description": "uts组件示例",
"versionName": "1.0.0",
"versionCode": "100",
"transformPx": false,
/* uni-app x 特有相关 */
// "uni-app-x": {},
/* uni-app特有相关 */
"app-plus": {
"usingComponents": true,
"nvueStyleCompiler": "uni-app",
"compilerVersion": 3,
"splashscreen": {
"alwaysShowBeforeRender": true,
"waiting": true,
"autoclose": true,
"delay": 0
},
/* 模块配置 */
"modules" : {},
"modules": {},
/* 应用发布信息 */
"distribute" : {
"distribute": {
/* android打包配置 */
"android" : {
"permissions" : [
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
"<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\"/>",
"<uses-feature android:name=\"android.hardware.camera\"/>",
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
]
},
"android": {},
/* ios打包配置 */
"ios" : {},
"ios": {
"dSYMs": false
},
/* SDK配置 */
"sdkConfigs" : {}
"sdkConfigs": {
"ad": {}
}
}
},
/* 快应用特有相关 */
"quickapp" : {},
"quickapp": {},
/* 小程序特有相关 */
"mp-weixin" : {
"appid" : "",
"setting" : {
"urlCheck" : false
"mp-weixin": {
"appid": "",
"setting": {
"urlCheck": false
},
"usingComponents" : true
"usingComponents": true
},
"mp-alipay" : {
"usingComponents" : true
"mp-alipay": {
"usingComponents": true
},
"mp-baidu" : {
"usingComponents" : true
"mp-baidu": {
"usingComponents": true
},
"mp-toutiao" : {
"usingComponents" : true
"mp-toutiao": {
"usingComponents": true
},
"uniStatistics" : {
"enable" : false
"uniStatistics": {
"enable": false
},
"vueVersion" : "3"
"vueVersion": "3"
}
\ No newline at end of file
......@@ -5,6 +5,20 @@
"style": {
"navigationBarTitleText": "uni-app"
}
},
{
"path": "pages/animation-view/animation-view",
"style": {
"navigationBarTitleText": "animation-view",
"enablePullDownRefresh": false
}
},
{
"path": "pages/video-view/video-view",
"style": {
"navigationBarTitleText": "video-view",
"enablePullDownRefresh": false
}
}
],
"globalStyle": {
......
<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>
<div>
<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>
<button @click="changeLottie" type="primary">切换{{location}}动画</button>
</div>
<!-- #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 {
path: '/uni_modules/uni-animation-view/static/lottie.json',
loop: false,
autoplay: false,
action: 'stop',
hidden: false,
status: '播放',
location: '网络'
title: 'Hello'
}
},
methods: {
playLottie() {
this.action = ('play' !== this.action) ? 'play' : 'pause';
this.status = ('pause' === this.action) ? '播放' : '暂停';
openAnimationView() {
uni.navigateTo({
url: '/pages/animation-view/animation-view'
})
},
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('动画播放结束');
openVideoView() {
uni.navigateTo({
url: '/pages/video-view/video-view'
})
}
}
}
</script>
<style>
.animation {
width: 750rpx;
height: 300rpx;
background-color: #CCCCCC;
margin-bottom: 20px;
.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>
\ 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)
实现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",
"displayName": "animation-view",
"version": "1.0.0",
"version": "1.0.1",
"description": "使用uts组件开发,实现animation-view组件",
"keywords": [
"animation-view",
......
# animation-view
## uts插件开发文档
[UTS 语法](https://uniapp.dcloud.net.cn/tutorial/syntax-uts.html)
[UTS API插件](https://uniapp.dcloud.net.cn/plugin/uts-plugin.html)
[UTS 组件插件](https://uniapp.dcloud.net.cn/plugin/uts-component.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+
......
......@@ -35,7 +35,7 @@
//原生提供以下属性或方法的实现
export default {
name: "uts-animation-view",
name: "animation-view",
/**
* 当播放到末尾时触发 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 页面
......@@ -5,7 +5,7 @@
"description": "uni-video",
"keywords": [
"uni-video"
],
],
"repository": "",
"engines": {
"HBuilderX": "^3.7.0"
......@@ -34,18 +34,6 @@
"dependencies": [
"uni-framework"
],
"uni-ext-api": {
"uni": {
"createVideoContext": {
"name": "createVideoContext",
"app": {
"js": false,
"kotlin": true,
"swift": false
}
}
}
},
"encrypt": [],
"platforms": {
"cloud": {
......@@ -58,7 +46,7 @@
"vue3": "u"
},
"App": {
"app-android": "u",
"app-android": "y",
"app-ios": "u"
},
"H5-mobile": {
......
# uni-video
### 开发文档
## uts插件开发文档
[UTS 语法](https://uniapp.dcloud.net.cn/tutorial/syntax-uts.html)
[UTS API插件](https://uniapp.dcloud.net.cn/plugin/uts-plugin.html)
[UTS 组件插件](https://uniapp.dcloud.net.cn/plugin/uts-component.html)
[Hello UTS](https://gitcode.net/dcloud/hello-uts)
## 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 @@
import { Danmu, RequestFullScreenOptions } from '../interface.uts';
export default {
name: "video",
name: "video-view",
data() {
return {
rootView: null as FrameLayout | null,
......@@ -580,8 +580,8 @@
override onInfo(iMediaPlayer : IMediaPlayer | null, status : Int, extra : Int) : boolean {
switch (status) {
case MediaPlayerParams.STATE_COMPLETED:
if ((this.comp as VideoComponent).loop) {
let initialTime = (this.comp as VideoComponent).initialTime as Int;
if ((this.comp as VideoViewComponent).loop) {
let initialTime = (this.comp as VideoViewComponent).initialTime as Int;
if (initialTime > 0) this.playerView.seekTo(initialTime * 1000);
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 = {
/**
......@@ -147,25 +144,3 @@ export interface VideoContext {
*/
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.
先完成此消息的编辑!
想要评论请 注册