组件化开发，module和app的注意点

Posted 2023-03-22

参考技术A 1，app compile project加入module后，module的权限，资源文件，权限，依赖引入，application属性权限，注意冲突，

application属性权限主包没引入的，module不能引入，超权限控制无法编译，

依赖引入，要是module已经引入所需依赖，主包不需引入，避免冲突

多module开发，其中的一个为入口module，其他module为独立的“应用”（library）

1.在原有的项目导入另外个项目的module为主项目的次module，即在A项目中添加一个启动B项目的入口

　　1）右击B项目的module，选择copy path；

　　2）右击A项目，New—Module—Import Gradle Project，把上一步拷贝的路径粘贴，一直到完成；

2.build.gradle文件

　　1）主module配置为 apply plugin: 'com.android.application'，次module为 apply plugin: 'com.android.library'；

　　2）次module不需要applicationId

　　3）dependencies依赖需放入到次module

　　4）都加上 multiDexEnabled true

　　5）主module导入次module ：compile project(path: ':module2')

　　6）.build.gradle中设置的compileSdkVersion buildToolsVersion minSdkVersion targetSdkVersion统一

3.AndroidManifest.xml文件

　　1）主module 在application上加上tools:replace="android:name,allowBackup,icon,theme,label"

　　　  同时在顶端加上xmlns:tools="http://schemas.android.com/tools"；主要是避免多module的name,icon,theme等冲突

　　2）次module把application下的android:name，android:icon，android:label删除，否则安装后，在桌面上会有多个图标；

　　3）次module去掉activity的主过滤器  <intent-filter>

4.资源文件的冲突

jar包的冲突，检查是否重复，在module中都存在了；

类名、文件名等，重复可去修改其中一个，避免重复，资源索引出问题。

基本上就是这些，主要是rebuild后看报的什么错，具体的问题具体去分析处理。

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

效果

要求

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. 效果