查看附件示例项目
- 发布:2024-10-24 14:06
- 更新:2024-10-24 15:43
- 阅读:126
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: 10
HBuilderX类型: 正式
HBuilderX版本号: 4.28
手机系统: Android
手机系统版本号: Android 14
手机厂商: 小米
手机机型: 红米K60
页面类型: nvue
vue版本: vue3
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
将附件的测试项目uni_modules下的插件上传到插件市场,再下载试用,在项目中新建一个nvue文件引入这个插件,运行项目即可
将附件的测试项目uni_modules下的插件上传到插件市场,再下载试用,在项目中新建一个nvue文件引入这个插件,运行项目即可
预期结果:
正常运行
正常运行
实际结果:
运行报错
运行报错
靐齉齾麤龖龗 - 解决不了问题,那就解决提出问题的人
能提供用户使用你的插件时的页面吗?看报错是在组件上使用了( ',",<)来作为属性名
-
叶柳垂杨 (作者)
页面代码很简单,源码本地运行是没有问题的,代码如下》》
<template>
<view class="video-page">
<view :style="{width:${wWidth}px
,height:${boxStyle.height}px
}">
<text>测试</text>
</view>
</view>
</template>
<script setup lang="ts">
import { ref, ComponentInternalInstance, getCurrentInstance, watch, onMounted, PropType } from 'vue';
import {
onLoad,
onShow,
onHide,
onReady
} from "@dcloudio/uni-app";
const wWidth = ref(0);
const wHeight = ref(0);
const boxStyle = ref({//视频,图片封面样式
height: 0,
width: 0,
});
onMounted(() => {
let sysInfo = uni.getSystemInfoSync();
wWidth.value = sysInfo.screenWidth//获取屏幕宽度
wHeight.value = sysInfo.screenHeight//获取屏幕宽度
boxStyle.value.width = wWidth.value
boxStyle.value.height = wHeight.value;
});
</script>
<style>
.video-page {
color: #000000;
}
.item {
justify-content: center;
align-items: center;
}
.content {
font-size: 36px;
}
.container {
background-color: #000000;
}
.item {
background-color: #000000;
position: relative;
}
.videoHover {
position: absolute;
top: 0;
left: 0;
flex: 1;
background-color: rgba(0, 0, 0, 0.1);
justify-content: center;
align-items: center;
}
.vd-info {
position: absolute;
bottom: 0;
left: 0;
width: 250px;
height: 120px;
padding: 10px;
}
.vd-info .title {
color: #fff;
font-size: 14px;
}
.vd-info .user-name {
color: #fff;
font-size: 16px;
margin-bottom: 10px;
}
.playState {
width: 160rpx;
height: 160rpx;
opacity: 0.2;
}
.userInfo {
position: absolute;
bottom: 80px;
right: 10px;
flex-direction: column;
}
.userAvatar {
border-radius: 500%;
margin-bottom: 15px;
border-style: solid;
border-width: 2px;
border-color: #ffffff;
}
.userAvatar {
width: 100rpx;
height: 100rpx;
}
.likeIco,
.shareIco,
.commentIco {
width: 60rpx;
height: 60rpx;
margin-top: 15px;
}
.likeNum,
.commentNum,
.shareTex {
color: #ffffff;
font-size: 30rpx;
text-align: center;
margin: 5px;
}
.likeNumActive {
color: red;
}
.content {
width: 610rpx;
z-index: 99;
position: absolute;
bottom: 30px;
padding: 15rpx;
flex-direction: column;
justify-content: flex-start;
color: #ffffff;
}
.userName {
font-size: 30rpx;
color: #ffffff;
margin-top: 80upx;
}
.words {
margin-top: 10rpx;
font-size: 30rpx;
color: #ffffff;
}
.root {
/* background-color: #000000; */
background-color: #00ffff;
}
.video-tools {
position: absolute;
bottom: 25px;
right: 10px;
flex-direction: column;
justify-content: center;
align-items: center;
}
.control-item {
border-color: transparent;
padding: 0;
margin: 0;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
.control-text {
font-size: 32rpx;
color: #fff;
font-weight: 700;
}
.icon-style {
width: 80rpx;
height: 80rpx;
}
.v-user-avart {
width: 100rpx;
height: 100rpx;
border-radius: 100rpx;
}
.v-user-avart-wrap {
width: 110rpx;
height: 110rpx;
border: 2px solid #fff;
border-radius: 110rpx;
justify-content: center;
align-items: center;
background-color: #fff;
margin-bottom: 20px;
position: relative;
/* overflow: visible; */
}
.v-user-follow {
width: 20px;
height: 20px;
position: absolute;
left: 30%;
top: 50px;
transform: translateX(-50%);
}
/* 以下为光盘的样式 */
.video-disk {
/* // position: relative; */
/* // background-color: #ff0000; */
}
.music-cover {
position: relative;
width: 80rpx;
height: 80rpx;
box-shadow: 0 2rpx 4rpx 0 rgba(0, 0, 0, 0.2);
z-index: 2;
/* box-sizing: border-box; */
transform: rotate(0deg);
transition-property: transform;
transition-duration: 5000s;
transition-timing-function: linear;
}
.music-disk {
width: 80rpx;
height: 80rpx;
border-radius: 80rpx;
}
.music-disk-user-avart {
position: absolute;
width: 40rpx;
height: 40rpx;
border-radius: 40rpx;
margin-left: 20rpx;
margin-top: 20rpx;
}
.music-logo {
width: 20px;
height: 20px;
position: absolute;
opacity: 0.8;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
2024-10-24 16:17
叶柳垂杨 (作者)
要将uni_modules那个组件设置价格再上传插件市场,然后其他用户从市场点试用下载加密组件到本地项目,在本地项目新建一个nvue页面引入这个加密后的组件运行,这样就有问题,你是这样测的吗?
2024-10-24 16:16
叶柳垂杨 (作者)
要运行加密文件才会发现问题,源码运行肯定是可以的
2024-10-24 16:19
叶柳垂杨 (作者)
大佬,验证得怎么样了?
2024-10-25 09:24
叶柳垂杨 (作者)
大佬,有结果了吗?
2024-10-27 22:54