web前端开发在HBuilderX中自定义组件新方法 - “当前组件仅支持 uni_modules 目录结构 ，请升级 HBuilderX 到 3.1.0 版本以上 at App.vue:4”

Posted 2022-02-25 Rudon滨海渔村

效果

要求

HBuilderX 3.1.0 版本以上，需要使用uni_modules开发自定义组件。

（旧版本的easycom用不了了，会和项目uni_modules下的组件冲突）

（旧版本的自定义组件方法：）uni-app注册全局组件 - 符合easycom_Rudon滨海渔村的博客-CSDN博客效果图环境要求HBuilderX 2.5.5起支持easycom组件模式。uni-app官网uni-app：一个使用 Vue.js 开发跨平台应用的前端框架https://uniapp.dcloud.io/collocation/pages?id=easycom官方手册 （对新手不友好，菜鸟本尊看得迷糊，照着抄都无法使用全局自定义组件...）实现步骤图+文（ 1 / 7）准备好HBuilderX（ 2/ 7）新建/components/文件夹（名字不能改）...https://rudon.blog.csdn.net/article/details/122839095

步骤

1. 先简单阅读官网新的相关说明
   uni-app官网 - uni_modulesuni-app：一个使用 Vue.js 开发跨平台应用的前端框架https://uniapp.dcloud.net.cn/uni_modules
2. 在HBuilderX打开项目
3. 对着目录uni_modules右键，“新建uni_modules插件”
   
   
    
4. 填写插件的名称
   
5. 创建成功，开始装饰
   原来：
   
   装饰后：
   \\uni_modules\\rm-slider\\components\\rm-slider\\rm-slider.vue

   <template>
   	<view>
   		<!-- 说明 -->
   		<!-- iconType （主标题左边的图标） 字符串，可选：空、circle、line，默认是line -->
   		<!-- morePadding （是否加大内部空隙） 布尔类型，可选：true、false -->
   		
   		<view class="rm-slider" @click="clickBox(id)">
   			<view class="rm-slider-header">
   				<!-- 标题栏 -->
   				<view class="rm-slider-header-titles-wrapper">
   					<view class="flexStart">
   						<!-- 左上角图标 -->
   						<view v-if="iconType" class="rm-slider-header-icon-wrapper">
   							<view :class="iconType"/>
   						</view>
   						<text :class="'moreWide':!subTitle" :style="color:titleColorMain" class="rm-slider-header-titles-main"> title </text>
   					</view>
   					
   					<view>
   						<text class="idShower"> id </text>
   					</view>
   					
   					<view>
   						<text v-if="subTitle" :style="color:titleColorSub" class="rm-slider-header-titles-sub"> subTitle </text>
   					</view>
   					
   				</view>
   			</view>
   			
   			<view class="rm-slider-body" :style="padding: morePadding ? '40rpx' : ''" :class="'fatBoy': morePadding">
   				<slot/>
   			</view>
   			
   		</view>
   	</view>
   </template>
   <script>
   	export default 
   		name: "rm-slider",
   		props: 
   			id: 
   				type: Number,
   				default: 0
   			,
   			title: 
   				type: String,
   				default: ''
   			,
   			subTitle: 
   				type: String,
   				default: ''
   			,
   			iconType: 
   				type: String,
   				default: 'line'
   			,
   			titleColorMain:
   				type: String,
   				default: '#111'
   			,
   			titleColorSub:
   				type: String,
   				default: '#BBB'
   			,
   			morePadding: 
   				type: Boolean,
   				default: false
   			
   		,
   		data() 
   			return 
   		,
   		methods: 
   			clickBox(varId) 
   				uni.showToast(
   					title: '你点击了#'+varId+'行',
   					duration: 2000
   				);
   				// this.$emit('click')
   			
   		
   	
   </script>
   <style>
   	.rm-slider-header-titles-wrapper 
   		display: flex;
   		flex-direction: row;
   		justify-content: space-between;
   	
   	
   	.flexStart 
   		display: flex;
   		flex-direction: row;
   		justify-content: flex-start;
   	
   	
   	.line 
   		height: 12rpx;
   		background-color: green;
   		border-radius: 10rpx;
   		width: 8rpx;
   		margin-top: 8rpx;
   	
   	
   	.circle 
   		width: 16rpx;
   		height: 16rpx;
   		border-top-right-radius: 50rpx;
   		border-top-left-radius: 50rpx;
   		border-bottom-left-radius: 50rpx;
   		border-bottom-right-radius: 50rpx;
   		background-color: green;
   		margin-top: 20rpx;
   	
   	
   	
   	.rm-slider 
   		background-color: white;
   		padding: 10rpx;
   		border: 1rpx #A5A5A5 solid;
   		border-radius: 14rpx;
   		margin: 30rpx 20rpx;
   	
   	
   	.rm-slider-header-icon-wrapper 
   		width: 30rpx;
   	
   	
   	.rm-slider-header-titles-main 
   		font-size: 36rpx;
   	
   	
   	.rm-slider-header-titles-sub 
   		font-size: 6rpx;
   	
   	
   	.idShower 
   		font-size: 12rpx;
   		color: #cbefd8;
   	
   	
   	.fatBoy 
   		font-weight: bold;
   	
   	
   </style>
   

   
   
   \\pages\\home\\home.vue 

   <template>
   	<view>
   		
   		<rm-slider title="标题1st" subTitle="副标题" iconType="circle" titleColorMain="red" :id="ids.id1st" morePadding>
   			<view>
   				内部预留自定义内容，包括view - Slot部分
   			</view>
   		</rm-slider>
   		
   		<rm-slider title="标题2nd" :morePadding="false" titleColorSub="gray"></rm-slider>
   		
   		<rm-slider title="标题3rd" iconType="" :id="888">
   			<text>Container</text>
   		</rm-slider>
   		
   	</view>
   </template>
   
   <script>
   	export default 
   		data() 
   			return 
   				ids: 
   					id1st: 10086,
   					id2nd: 10010,
   					id3rd: 10000
   				
   			
   		,
   		methods: 
   			
   		
   	
   </script>
   
   <style>
   
   </style>
   

   
    
6. 效果