uniapp 原生插件开发 UI

nicepainkiller2024-09-11 12:46

前言：

在集成某些特定 原生SDK的时候，它本身是带UI控件的。当我们使用 uniapp 开发app的时候实是 可以使使用 nvue 页面，以 weex 的方式嵌入原生的UI控件。

我这边的场景是 接入连连app的支付，它有个自己的密码键盘 控件是原生的页面。这里就需要用到 nvue 以 weex 的方式接入：

图中

蓝色部分为 sdk 密码控件输入框，下面弹出的软键盘为 SDK 自带密码键盘； 函数为密码键盘SDK提供的函数

官方文档解析：

查看官方文档：

开发者须知 | uni小程序SDK

public class TestText extends UniComponent<TextView>

只要继承 UniComponent 的控件 就可以了，但是这里有个插曲。 代码自动生成的 构造函数多了一个参数。造成框架初始化 weex 组件（原始组件）不成功 " com.taobao.weex.common.xRuntimeException: can't find constructor of component"

///错误的 四个参数
public InputLianLian(UniSDKInstance instance, AbsVContainer parent, int type, AbsComponentData componentData) {
    super(instance, parent, type, componentData);
}

///正确的 三个参数
public InputLianLian(UniSDKInstance instance, AbsVContainer parent, AbsComponentData componentData) {
    super(instance, parent, componentData);
    AbsAttr attr = componentData.getAttrs();
    aesKey = (String) attr.get("aesKey");
    rasKey = (String) attr.get("rsaPublic");
}

在 initComponentHostView 中返回你的控件就可以了

@Override
protected PassGuardEdit initComponentHostView(@NonNull Context context) {
    inputEditText = new PassGuardEdit(context, null);
    inputEditText.setButtonPress(true);
    if ((aesKey != null && aesKey.length() > 0) && (rasKey != null && rasKey.length() > 0)) {
        inputEditText.setCipherKey(aesKey);
        inputEditText.setPublicKey(rasKey);
    }
    inputEditText.needScrollView(false);
    inputEditText.setButtonPressAnim(true);
    //6-12位的字母、数字，不可以是连续或者重复的数字和字母
    inputEditText.setInputRegex("[a-zA-Z0-9]{1,12}");
    //inputEditText.setInputRegex("[0-9]{1,6}");
    inputEditText.setClip(false);
    inputEditText.setMaxLength(12);//12位
    //inputEditText.useNumberPad(true);//纯数字
    inputEditText.setWatchOutside(true);
    inputEditText.initPassGuardKeyBoard();
    return inputEditText;
}

上手实操：

如果你是云打包，那么就需要把插件写成 模块库 的方式开发。方便导出 .aar库 给其他程序使用 。如果你是本地打包 那么直接写就好了。我这边是云打包，开发的时候 是本地跑的方式。

脚本依赖：

因为我们 是以 库的方式开发的，本身工程文件最好不好防止三方依赖库。我们都依赖 主应用的三方库；

. InputLianLian.java 完整控件脚本

package com.john.bridge.component;
import android.content.Context;
import androidx.annotation.NonNull;
import cn.passguard.PassGuardEdit;
import io.dcloud.feature.uniapp.UniSDKInstance;
import io.dcloud.feature.uniapp.annotation.UniJSMethod;
import io.dcloud.feature.uniapp.bridge.UniJSCallback;
import io.dcloud.feature.uniapp.dom.AbsAttr;
import io.dcloud.feature.uniapp.ui.action.AbsComponentData;
import io.dcloud.feature.uniapp.ui.component.AbsVContainer;
import io.dcloud.feature.uniapp.ui.component.UniComponent;

public class InputLianLian extends UniComponent<PassGuardEdit> {
    private PassGuardEdit inputEditText;
    private String aesKey;
    private String rasKey;

public InputLianLian(UniSDKInstance instance, AbsVContainer parent, AbsComponentData componentData) {
    super(instance, parent, componentData);
    AbsAttr attr = componentData.getAttrs();
    aesKey = (String) attr.get("aesKey");
    rasKey = (String) attr.get("rsaPublic");
}

@Override
protected PassGuardEdit initComponentHostView(@NonNull Context context) {
    inputEditText = new PassGuardEdit(context, null);
    inputEditText.setButtonPress(true);
    if ((aesKey != null && aesKey.length() > 0) && (rasKey != null && rasKey.length() > 0)) {
        inputEditText.setCipherKey(aesKey);
        inputEditText.setPublicKey(rasKey);
    }
    inputEditText.needScrollView(false);
    inputEditText.setButtonPressAnim(true);
    //6-12位的字母、数字，不可以是连续或者重复的数字和字母
    inputEditText.setInputRegex("[a-zA-Z0-9]{1,12}");
    //inputEditText.setInputRegex("[0-9]{1,6}");
    inputEditText.setClip(false);
    inputEditText.setMaxLength(12);//12位
    //inputEditText.useNumberPad(true);//纯数字
    inputEditText.setWatchOutside(true);
    inputEditText.initPassGuardKeyBoard();
    return inputEditText;
}

    @UniJSMethod
    public void initEditText(String aesKey, String rasKey) {
        if ((aesKey != null && aesKey.length() > 0) && (rasKey != null && rasKey.length() > 0)) {
            inputEditText.setCipherKey(aesKey);
            inputEditText.setPublicKey(rasKey);
            inputEditText.initPassGuardKeyBoard();
        }
    }

    @UniJSMethod(uiThread = true)
    public void getInputMD5(UniJSCallback callback) {
        if (callback != null && inputEditText != null) {
            callback.invoke(inputEditText.getMD5());
        }
    }

    @UniJSMethod(uiThread = true)
    public void getInputLength(UniJSCallback callback) {
        if (callback != null && inputEditText != null) {
            callback.invoke(inputEditText.getLength());
        }
    }

    @UniJSMethod(uiThread = true)
    public void getInputRSAAES(UniJSCallback callback) {
        if (callback != null && inputEditText != null) {
            callback.invoke(inputEditText.getRSAAESCiphertext ());
        }
    }
}
配置 weex 控件 dcloud_uniplugins.json

因为 uniapp 是通过我们这个配置表 来加载 weex 控件的；要么通过代码的方式也是可以的，这里两张都介绍下。应为你要告诉你的 主APP 你都有哪些 自定义的 weex 控件：

配置文件：
代码的方式：

基本上差不多了，已经跑起来了

我们再来看 .nvue 的页面

组件 inputLianLian 直接使用，方法调用，以及参数传值。

<template>
	<div class="mian">
		<div>
			<!-- 直接传入 aesKey rasKey 初始化控件 -->
			<inputLianLian ref='inputLianLian' :aesKey="aesKey" :rasKey="rasKey"
				style="width:690rpx;height:120rpx;background-color: aqua;">
			</inputLianLian>

			<div @click="getMD5()" style="width: 200;height: 80rpx; background-color: azure;">getMD5</div>
			<div @click="getLength()" style="width: 200;height: 80rpx;background-color:bisque;">getLength</div>
			<div @click="getLInputAESCode()" style="width: 200;height: 80rpx;background-color:coral;">getLInputAESCode
			</div>
			<div @click="initLianLian()" style="width: 200;height: 80rpx;background-color:darkgray;">initLianLian</div>
		</div>
	</div>
</template>

<script>
	import md5 from 'uview-ui/libs/function/md5';
	export default {
		data() {
			return {
				aesKey: '26999721009008604284404453805522',
				rasKey: '3081890281810092D9D8D04FB5F8EF9B8374F21690FD46FDBF49B40EECCDF416B4E2AC2044B0CFE3BD67EB4416B26FD18C9D3833770A526FD1AB66A83ED969AF74238D6C900403FC498154EC74EAF420E7338675CAD7F19332B4A56BE4FF946B662A3C2D217EFBE4DC646FB742B8C62BFE8E25FD5DC59E7540695FA8B9CD5BFD9F92DFAD009D230203010001'
			}
		},
		methods: {
			///二次初始化，刚进来拿不到初始化参数 参数情况下 ，
			///如果输入框不能二次初始化，等待拿到数据再展示
			initLianLian() {
				this.$refs.inputLianLian.initEditText('aesKey', 'rasKey');
			},
			async getMD5() {
				this.$refs.inputLianLian.getInputMD5((md5) => {
					uni.showToast({
						title: `md5:${md5}`,
						duration: 3000
					});
				});

				const md5 = await getInputMD5();
				uni.showModal({
					content: `md5:${md5}`,
				})
			},
			getLength() {
				this.$refs.inputLianLian.getInputLength((length) => {
					uni.showToast({
						title: `length:${length}`,
						duration: 3000
					});
				});
			},
			getLInputAESCode() {
				this.$refs.inputLianLian.getInputRSAAES((code) => {
					uni.showToast({
						title: `code:${code}`,
						duration: 3000
					});
				});
			},
			getInputMD5() {
				return new Promise((resolve, reject) => {
					try {
						this.$refs.inputLianLian.getInputMD5((md5) => {
							console.log('onMD5:', md5)
							resolve(md5);
						})
					} catch (ex) {
						console.log('onMD5 error:', ex)
						//reject('')
						resolve('');
					}
				});
			}
		}
	}
</script>

<style>
	.mian {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>
设置weex脚本 不混淆

因为 weex 加载是通过，反射的方式加载的。如果脚本混淆了，脚本的配置文件就对应不上了

导出 .aar 给云打包使用：

这里我们需要工程 导出为 .aar

在uniapp中设置 原生插件： 主要两个目录：

---android 放置 .aar

--- libs 放置 .jar 和 对应的 .so ; .so 文件按照 CPU 目录放置

插件描述文件 ： 和 上面的 dcloud_uniplugins.json 有点像

配置没有错误：这里就能展示出来了

相关推荐
咸虾米_2 天前
咸虾米壁纸微信小程序下载图片到相册saveImageToPhotosAlbum功能修改
微信小程序·小程序·uniapp·notepad++
~牧马~3 天前
【记录50】uniapp安装uview插件，样式引入失败分析及解决
uniapp·uview插件
流氓也是种气质 _Cookie4 天前
uniapp 将base64字符串保存为图片、Word、Excel、音频、视频等文件
uniapp·base64tofile
！win ！7 天前
WebP图片使用踩坑
小程序·uniapp·webp
顽疲7 天前
从零用java实现 小红书 springboot vue uniapp （3）详情页优化
java·vue.js·spring boot·uniapp
程序猿看视界9 天前
uniapp小程序的锚点定位（将页面滚动到目标位置）
uniapp·锚点定位
oil欧哟13 天前
给我的小程序加了个丝滑的搜索功能，踩坑表情包长度问题
前端·vue.js·微信小程序·uniapp
一殊酒22 天前
【前端开发】小程序无感登录验证
前端·小程序·uniapp
竣子好逑1 个月前
uniapp 自定义popup 弹窗 简单封装(微信小程序)
前端·微信小程序·小程序·uni-app·uniapp
h185385922441 个月前
志愿者小程序源码社区网格志愿者服务小程序php
微信小程序·小程序·php·uniapp·源码软件
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02YOLOv8训练好模型后，追加轮数继续训练、或者提前终止训练，缩减训练轮数03玄机平台应急响应—webshell查杀04DisplayPort AltMode On Type-c协议_Ver2.0(学习笔记)05HCIA-datacom数通题库和录播视频资料06Docker 夺命连环 15 问076个主流的工业3D管道设计软件08校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10树莓派 5 AI 套件（Hailo-8L）使用教程