景观小品设计网站推荐,标准营销型网站定做价格,如何做付款网站,深圳东门解封了吗前言#xff1a; 在集成某些特定 原生SDK的时候#xff0c;它本身是带UI控件的。当我们使用 uniapp 开发app的时候实是 可以使使用 nvue 页面#xff0c;以 weex 的方式嵌入原生的UI控件。 我这边的场景是 接入连连app的支付#xff0c;它有个自己的密码键盘 控件是原生的页… 前言 在集成某些特定 原生SDK的时候它本身是带UI控件的。当我们使用 uniapp 开发app的时候实是 可以使使用 nvue 页面以 weex 的方式嵌入原生的UI控件。 我这边的场景是 接入连连app的支付它有个自己的密码键盘 控件是原生的页面。这里就需要用到 nvue 以 weex 的方式接入 图中 蓝色部分为 sdk 密码控件输入框下面弹出的软键盘为 SDK 自带密码键盘 函数为密码键盘SDK提供的函数 官方文档解析 查看官方文档 开发者须知 | uni小程序SDK public class TestText extends UniComponentTextView只要继承 UniComponent 的控件 就可以了但是这里有个插曲。 代码自动生成的 构造函数多了一个参数。造成框架初始化 weex 组件原始组件不成功 “ com.taobao.weex.common.xRuntimeException: cant 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 UniComponentPassGuardEdit {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;
}UniJSMethodpublic 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 直接使用方法调用以及参数传值。 templatediv classmiandiv!-- 直接传入 aesKey rasKey 初始化控件 --inputLianLian refinputLianLian :aesKeyaesKey :rasKeyrasKeystylewidth:690rpx;height:120rpx;background-color: aqua;/inputLianLiandiv clickgetMD5() stylewidth: 200;height: 80rpx; background-color: azure;getMD5/divdiv clickgetLength() stylewidth: 200;height: 80rpx;background-color:bisque;getLength/divdiv clickgetLInputAESCode() stylewidth: 200;height: 80rpx;background-color:coral;getLInputAESCode/divdiv clickinitLianLian() stylewidth: 200;height: 80rpx;background-color:darkgray;initLianLian/div/div/div
/templatescriptimport 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();}});}}}
/scriptstyle.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 有点像 配置没有错误这里就能展示出来了
