uniapp原生插件开发component扩展

廾匸22
493 阅读6分钟

一、创建项目及module

打开AndroidStudio，在菜单栏选择File>New>New Project，新建自定义项目，选择No Activity点击下一步

填写项目名称，选择路径后点击完成

创建完成后为了方便使用我们转为Project视图，我这里是汉化后的

接下来创建模板，点击菜单栏选择File>New>New Module

选择Android Library，填写module name点击完成

创建完毕后如图所示

配置刚创建的Module（mat-camera-plugin）的build.gradle信息

将dependencies下默认生成的依赖注释掉，添加uni-app所需库依赖

//必须添加的依赖
compileOnly 'androidx.recyclerview:recyclerview:1.0.0'
compileOnly 'androidx.legacy:legacy-support-v4:1.0.0'
compileOnly 'androidx.appcompat:appcompat:1.0.0'
compileOnly 'com.alibaba:fastjson:1.2.83'

导入官方提供的uni插件原生项目

将UniPlugin-Hello-AS下的app>libs下的文件复制到自己项目的app>libs

回到刚刚创建的module(mat-camera-plugin)的build.gradle中，进行导入aar需要的配置操作，在dependencies内添加

compileOnly fileTree(include: ['uniapp-v8-release.aar'], dir: '../app/libs')

 然后点击Sync Now进行同步处理

二、原生插件的开发

在我们所创建的module(mat-camera-plugin)>src>main>java>com.test.mat_camera_plugin创建类cameraModule

  • Component 扩展类必须继承 UniComponent, 父容器Component(例如ViewGroup组件)则需要继承UniVContainer

  • UniComponent的initComponentHostView回调函数。构建Component的view时会触发此回调函数

  • Component 对应的设置属性的方法必须添加注解@UniComponentProp(name=value(value is attr or style of dsl))

    package com.test.mat_camera_plugin;

    import android.content.Context; import android.graphics.Color; import android.widget.TextView;

    import androidx.annotation.NonNull;

    import io.dcloud.feature.uniapp.UniSDKInstance; import io.dcloud.feature.uniapp.annotation.UniJSMethod; import io.dcloud.feature.uniapp.ui.action.AbsComponentData; import io.dcloud.feature.uniapp.ui.component.AbsVContainer; import io.dcloud.feature.uniapp.ui.component.UniComponent; import io.dcloud.feature.uniapp.ui.component.UniComponentProp;

    public class cameraModule extends UniComponent { public cameraModule(UniSDKInstance instance, AbsVContainer parent, AbsComponentData componentData) { super(instance, parent, componentData); }

    @Override
protected TextView initComponentHostView(@NonNull Context context) {
    TextView textView = new TextView(context);
    textView.setTextSize(20);
    textView.setTextColor(Color.BLUE);
    return textView;
}

@UniComponentProp(name = "tel")
public void setTel(String telNumber) {
    getHostView().setText("tel: " + telNumber);
}

@UniJSMethod
public void clearTel() {
    getHostView().setText("");
}

    }

三、注册插件

在app>src>main目录下创建assets文件夹

在app>src>main>assets目录下创建dcloud_uniplugins.json文件

将官方dcloud_uniplugins.json复制过来进行修改，dcloud_uniplugins.json说明如下

  • nativePlugins： 插件跟节点 可存放多个插件

  • hooksClass： 生命周期代理（实现AppHookProxy接口类）格式(完整包名加类名)

  • plugins: 插件数组

  • name : 注册名称

  • class : module 或 component 实体类完整名称

  • type : module 或 component类型 

    { "nativePlugins": [ { "plugins": [ { "type": "component", "name": "mat-camera-plugin", "class": "com.test.mat_camera_plugin.cameraModule" } ] } ] }

四、打包插件

打包插件到uniapp中使用，选择右侧Gradle>testplugin>Tasks>other>assembleRelease,双击assembleRelease等待系统module的arr文件。 

 注意：官方文档中是选择Gradle--->插件module--->Tasks--->build--->assembleRelease编译module的aar文件 

成功后在mat-camera-plugin>build>outputs>aar目录下就可以找到相关插件了

五、HBuilderX导入和使用本地插件

新建uniapp项目如图所示

按照官方目录，创建目录nativeplugins>插件文件夹名称（最好和dcloud_uniplugins.json文件里填写的name一样）>android目录下，将刚才打包的插件放到android下，创建package.json文件，放入到插件文件夹目录下。

配置package.json，官方描述uni小程序SDK

{
	"name": "matCameraPlugin",
	"id": "mat-camera-plugin",
	"version": "1.0",
	"description": "component扩展插件",
	"_dp_type": "nativeplugin",
	"_dp_nativeplugin": {
		"android": {
			"plugins": [{
				"type": "component",
				"name": "mat-camera-plugin",
				"class": "com.test.mat_camera_plugin.cameraModule"
			}],
			"integrateType": "aar",
			"dependencies": [
 
			],
			"compileOptions": {
				"sourceCompatibility": "1.8",
				"targetCompatibility": "1.8"
			},
			"abis": [
				"armeabi-v7a",
				"x86"
			],
			"minSdkVersion": "22",
 
			"permissions": [
 
			]
		}
	}
}

注意：插件标识id必须和name一致，plugins下的class是注册插件的类名要填对（同dcloud_uniplugins.json文件中的class一致）。配置文件为 json 格式，不能有注释，否则会解析失败。最后在manifest.json下选择我们开发的插件点击确认。

新建nvue页面

在index.nvue中使用插件，如下所示：

<template>
	<div>
		<mat-camera-plugin ref="camera" tel="12305" style="width:200;height:100"
			@click="myTextClick"></mat-camera-plugin>
	</div>
</template>
 
<script>
	export default {
		methods: {
			myTextClick(e) {
				this.$refs.camera.clearTel();
			}
		}
	}
</script>
 
<style>
 
</style>

六、运行项目

1.通过在线打包制作自定义基座来运行

选择项目>选择运行>运行到手机或模拟器>制作自定义调试基座

我这里使用自用证书（证书没有的可自行申请），填写完成后点击打包

 打自定义调试基座成功后，运行项目选择自定义调试基座

运行结果

上述运行是离线打包制作自定义基座来运行也可以通过AndroidStudio来运行条件基本一致，所以前期先把共同条件配置好

2.通过AndroidStudio来运行

配置AndroidManifest.xml，app>src>main>AndroidManifest.xml

添加下述代码到application节点内

<activity
            android:name="io.dcloud.PandoraEntry"
            android:configChanges="orientation|keyboardHidden|keyboard|navigation"
            android:label="@string/app_name"
            android:launchMode="singleTask"
            android:hardwareAccelerated="true"
            android:theme="@style/TranslucentTheme"
            android:screenOrientation="user"
            android:windowSoftInputMode="adjustResize"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
            <intent-filter>
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
                <action android:name="android.intent.action.VIEW" />
                <data android:scheme=" " />
            </intent-filter>
        </activity>
        <activity
            android:name="io.dcloud.PandoraEntryActivity"
            android:launchMode="singleTask"
            android:configChanges="orientation|keyboardHidden|screenSize|mcc|mnc|fontScale|keyboard|smallestScreenSize|screenLayout|screenSize|uiMode"
            android:hardwareAccelerated="true"
            android:permission="com.miui.securitycenter.permission.AppPermissionsEditor"
            android:screenOrientation="user"
            android:theme="@style/DCloudTheme"
            android:windowSoftInputMode="adjustResize">
        </activity>

如下图在build.gradle(app)中添加引用资源

implementation fileTree(include: ['*.jar'], dir: 'libs')
implementation fileTree(include: ['*.aar'], dir: 'libs')
implementation 'androidx.recyclerview:recyclerview:1.0.0'
implementation 'com.facebook.fresco:fresco:1.13.0'
implementation "com.facebook.fresco:animated-gif:1.13.0"
//基座需要必须添加
implementation 'com.github.bumptech.glide:glide:4.9.0'
implementation 'com.alibaba:fastjson:1.1.46.android'

uni-app配置时需要在build.gradle(app)中添加aaptOptions配置，然后点击右上角的Sync Now同步一下

aaptOptions {
    additionalParameters '--auto-add-overlay'
    ignoreAssetsPattern "!.svn:!.git:.*:!CVS:!thumbs.db:!picasa.ini:!*.scc:*~"
}

到uniapp项目中，如图在发行选项>原生APP-本地打包（L）中选择生成本地打包App资源（R）

打包成功后找到如下所示文件

回到Android studio中在assets文件夹下创建apps文件夹，将本地打包资源处理后的文件拷贝到apps文件夹下。

然后在build.gradle(app)下添加，implementation project(':mat-camera-plugin')用来引入本地插件

implementation project(':mat-camera-plugin')

将下载的SDK在目录Android-SDK@3.6.18.81676_20230117\SDK\assets中找到data文件夹，拷贝到app>src>main>assets下

自定义基座的配置

 在app目录下，将assets下apps文件夹中的manifest.json文件和data文件夹中的dcloud_control.xml文件打开，确保manifest.json中的id和dcloud_control.xml中的appid一致。并设置根节点的debug和syncDebug为true 

在app>src>main>res>values配置strings.xml文件，将manifest.json文件中的name配置到strings.xml文件中

登陆dcloud开发者中心找到我们创建的uniapp项目，打开项目点击安卓云端证书-创建证书，等待生成证书。

生成证书后点击下载证书，我们将下载好的证书重命名为demoKeys.keystore，将在Android studio中自己项目的app下创建文件夹key，将demoKeys.keystore放在此目录下如下图所示

然后在dcloud中点击各平台信息点击修改

包名为build.gradle(app)文件中android下的defaultConfig下的applicationId。SHA1、MD5、SHA256的值在刚申请的证书详情中查看，注意对应

修改后点击保存，创建离线打包Key

 在Android studio项目中app>src>main>AndroidManifest.xml文件中添加代码，android:value的值是我们创建的appkey，appkey是刚才我们创建的离线打包key。

<meta-data
            android:name="dcloud_appkey"
            android:value="离线打包key"/>

 在build.gradle(app)文件中添加如下代码，红线框为需要添加部分。添加完成后点击Sync Now同步一下

 sourceSets {
        main {
            jniLibs.srcDirs = ['libs']
        }
    }
    signingConfigs {
        config {
            keyAlias '别名'
            keyPassword '证书密码'
            storeFile file('你的证书路径') // 路劲为相对路径或绝对路径
            storePassword '证书密码'
            v1SigningEnabled true //兼容v1
            v2SigningEnabled true //兼容v2
        }
    }
    buildTypes {
        debug {
            signingConfig signingConfigs.config
        }
        release {
            signingConfig signingConfigs.config
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }

然后切换为app，点击运行到你连接的设备就行了，我这里是运行到雷电模拟器

报错提示

在project主目录下的gradle.properties中添加如下代码并点击Sync Now同步一下

android.enableJetifier=true

avatar
文章
阅读
粉丝