uni-app之android原生插件开发

官网 uni小程序SDK

一 插件简介

1.1 当HBuilderX中提供的能力无法满足App功能需求,需要通过使用Andorid/iOS原生开发实现时,可使用App离线SDK开发原生插件来扩展原生能力。

1.2 插件类型有两种,Module模式和Component模式

  • Module模式:能力扩展,无嵌入窗体的UI控件。大部分插件都是属于此类,比如调用计步器API。代码写法为通过js进行require,然后调用该插件对象的方法。如涉及一些弹出框、全屏ui,也仍然属于Module模式。类似于前端里的js sdk。
  • Component模式:在窗体中内嵌显示某个原生ui组件。比如窗体局部内嵌某个地图厂商的map组件,上下混排其他前端内容,就需要把这个原生地图sdk封装为Component模式。代码写法与vue组件相同,在template里写组件标签。类似于前端里的vue组件。

1.3 插件的使用:原生插件开发后,可以上插件市场,也可以不上。如内部使用,则无需上架插件市场。 如需上插件市场,则必须按指定格式压缩为zip包 

二 插件的开发

2.1 插件必须在uni-sdk的基础上进行开发,可以快速的下载离线uni-sdk,导入UniPlugin-Hello-AS示例工程,也可以自己新建一个原生android项目,拷贝不要的包和资源进行开发。

2.2 离线uni-sdk下载地址: Android 离线SDK - 正式版 | uni小程序SDK,里面包含必要资源和示例工程。

2.3 上一篇已经新建了一个android项目,并离线打包成功了uni资源项目,下面就在这基础上开发插件

2.4 androidStudio项目右击新建一个插件Module

 2.5 选择library,填写module名字,点击finish

2.6 然后在app的build.gradle里面依赖该module

implementation project(':mylibrary') 

2.6 module里面build.gradle配置相关依赖库

uniapp-v8-release.aar是扩展module主要依赖库,必须导入此依赖库

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

com.alibaba:fastjson 也是必须的也依赖上,后面json通信会用到

implementation 'com.alibaba:fastjson:1.2.83'

同时为了避免和主app冲突,将全部依赖类型换为compileOnly,意思只本module有效

dependencies {
    compileOnly 'androidx.appcompat:appcompat:1.5.0'
    compileOnly 'com.google.android.material:material:1.6.1'

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

2.7 创建TestModule类,必须继承 UniModule 类

  • 扩展方法必须加上@UniJSMethod (uiThread = false or true) 注解。UniApp 会根据注解来判断当前方法是否要运行在 UI 线程,和当前方法是否是扩展方法。
  • UniApp是根据反射来进行调用 Module 扩展方法,所以Module中的扩展方法必须是 public 类型。

示例:创建两个方法

 
  1. public class TestModule extends UniModule {

  2. private static final String TAG = "TestModule";

  3. //run ui thread

  4. @UniJSMethod(uiThread = true)

  5. public void testAsyncFunc(JSONObject options, UniJSCallback callback) {

  6. Log.e(TAG, "testAsyncFunc--"+options);

  7. if(callback != null) {

  8. JSONObject data = new JSONObject();

  9. data.put("code", "success");

  10. callback.invoke(data);

  11. }

  12. }

  13. //run JS thread

  14. @UniJSMethod (uiThread = false)

  15. public JSONObject testSyncFunc(){

  16. JSONObject data = new JSONObject();

  17. data.put("code", "success");

  18. return data;

  19. }

  20. }

2.8  注册插件,在androidStudio的assets里面新建dcloud_uniplugins.json,并注册插件信息

 
  1. {

  2. "nativePlugins": [

  3. {

  4. "plugins": [

  5. {

  6. "type": "module",

  7. "name": "TestModule",

  8. "class": "com.juai.plugin_module.TestModule"

  9. }

  10. ]

  11. }

  12. ]

  13. }

2.9 回调事件UniJSCallback:JS调用时,有的场景需要返回一些数据,比如以下例子,返回x、y坐标。

  • invoke调用javascript回调方法,此方法将在调用后被销毁。
  • invokeAndKeepAlive 调用javascript回调方法并保持回调活动以备以后使用。

三 上面简单的插件module就写好了,下面做一个简单的测试

3.1 在uni-app项目页面里面写一个按钮,调用该插件。首先加一个按钮,并设置点击事件。

<button type="primary" @click="testAsyncFunc">testAsyncFunc</button>

3.2 获取刚写好的TestModule插件 

var testModule = uni.requireNativePlugin("TestModule")

 3.3 methon里面,注册点击事件,并调用原生插件方法

 
  1. testAsyncFunc() {

  2. // 获取 module

  3. var testModule = uni.requireNativePlugin("TestModule")

  4. // 调用异步方法

  5. testModule.testAsyncFunc({

  6. 'name': 'unimp',

  7. 'age': 1

  8. },

  9. e => {

  10. uni.showToast({

  11. title: JSON.stringify(e),

  12. icon:'none'

  13. });

  14. }

  15. )

  16. }

3.4 完整vue示例

 
  1. <template>

  2. <view class="content">

  3. <image class="logo" src="/static/logo.png"></image>

  4. <view class="text-area">

  5. <text class="title">{{title}}</text>

  6. </view>

  7. <button type="primary" @click="testAsyncFunc">testAsyncFunc</button>

  8. </view>

  9. </template>

  10. <script>

  11. export default {

  12. data() {

  13. return {

  14. title: 'Hello'

  15. }

  16. },

  17. onLoad() {

  18. },

  19. methods: {

  20. testAsyncFunc() {

  21. // 获取 module

  22. var testModule = uni.requireNativePlugin("TestModule")

  23. // 调用异步方法

  24. testModule.testAsyncFunc({

  25. 'name': 'unimp',

  26. 'age': 1

  27. },

  28. e => {

  29. uni.showToast({

  30. title: JSON.stringify(e),

  31. icon:'none'

  32. });

  33. }

  34. )

  35. }

  36. }

  37. }

  38. </script>

  39. <style>

  40. .content {

  41. display: flex;

  42. flex-direction: column;

  43. align-items: center;

  44. justify-content: center;

  45. }

  46. .logo {

  47. height: 200rpx;

  48. width: 200rpx;

  49. margin-top: 200rpx;

  50. margin-left: auto;

  51. margin-right: auto;

  52. margin-bottom: 50rpx;

  53. }

  54. .text-area {

  55. display: flex;

  56. justify-content: center;

  57. }

  58. .title {

  59. font-size: 36rpx;

  60. color: #8f8f94;

  61. }

  62. </style>

3.5 打包app资源

3.7 替换androidStudio项目中的资源包

3.8 运行项目看到刚的按钮已经有了,点击android会获取uni的json数据,说明插件调用成功

3.9 同时也可以看到androidStudio控制台已经有日志打出,插件调用成功

四 插件打包

4.1  上面只是android原生离线调试可以,那怎样在uni中来使用这个原生插件呢。首先要生成插件的aar包,在androidStudio侧边栏找到Gradle工具 -> 再找到项目的Task目录 -> other目录 -> 点击assembleRelease,等待编译结束

4.2 可以看到再插件module的build下面生成了一个aar

4.3 在uni的项目根目录下创建 nativeplugins 文件夹 -> 再创建插件名目录TestModule -> 再创建android目录,把刚才的aar拷贝到android目录下面

 4.4 在插件目录下面创建一个pakage.json来配置插件信息

 
  1. {

  2. "name": "TestModule",

  3. "id": "TestModule", // 插件标识

  4. "version": "1.0.0",

  5. "description": "插件描述信息",

  6. "_dp_type":"nativeplugin",

  7. "_dp_nativeplugin":{

  8. "android": {

  9. "integrateType":"aar",

  10. "plugins": [

  11. {

  12. "type": "module",

  13. "name": "TestModule", //id为前缀

  14. "class": "com.juai.plugin_module.TestModule"

  15. }

  16. ]

  17. }

  18. }

  19. }

4.5 这个示例比较简单,如果有so库,和jar包,还需要配置这些信息,完成目录结构如下

 4.6 在manifest.json中识别本地插件

4.7 可以看到有这个插件

4.8 直接标准基座运行是不行的,找不到插件。需要云打包后进行测试

4.9 选择发行 -> 云打包

配置密钥信息

4.10 打包出错,说package.json里面不能包含注释,那我们去掉再试试

4.11  重新云打包出现新错误,大概是说最小androidSDk版本太高了,让最小19

4.12 那就把minSDK调整为19,重新生成aar,替换原来的aar

或者在插件module清单文件AndroidManifest.xml里面添加库的冲突配置

 
  1. <?xml version="1.0" encoding="utf-8"?>

  2. <manifest xmlns:android="http://schemas.android.com/apk/res/android"

  3. xmlns:tools="http://schemas.android.com/tools">

  4. <uses-sdk tools:overrideLibrary="com.bun.miitmdid,com.juai.plugin_module" />

  5. ..............

  6. </manifest>

4.13 可以看到打包成功

4.14 我们将该apk运行手机看下,可以正常运行

4.15 注意:云打包是有次数的,十来次今天就不能云打包了。所以为了节省次数可以选择自定义基座运行或者安心打包

五 组件Component开发

5.1 组件Component的介绍:

  • Component 扩展 实现特别功能的 Native 控件
  • Component 不支持代码中 new Component 创建对象。无法正常使用

5.2 androidStudio新建组件module 

5.3 添加必须的依赖

 
  1. compileOnly 'com.alibaba:fastjson:1.2.83'

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

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

public class TestText extends UniComponent<TextView>

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

 
  1. @Override

  2. protected TextView initComponentHostView(@NonNull Context context) {

  3. TextView textView = new TextView(context);

  4. textView.setTextSize(20);

  5. textView.setTextColor(Color.BLACK);

  6. return textView;

  7. }

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

 
  1. @UniComponentProp(name = "tel")

  2. public void setTel(String telNumber) {

  3. getHostView().setText("tel: " + telNumber);

  4. }

5.5 在app的build.gradle里面添加该组件依赖

implementation project(':ModuleComponent')

5.6 在app的assets的dcloud_uniplugins.json文件里面注册组件

 
  1. {

  2. "plugins": [

  3. {

  4. "type": "component",

  5. "name": "myText",

  6. "class": "com.juai.modulecomponent.TestText"

  7. }

  8. ]

  9. }

5.7 在uni项目里面添加TestText组件

 
  1. <template>

  2. <myText ref="telText" tel="12305" style="width:200;height:100" @onTel="onTel" @click="myTextClick"></myText>

  3. </template>

5.8 在uni项目的methods里面添加点击事件

 
  1. methods: {

  2. myTextClick(e) {

  3. this.$refs.telText.clearTel();

  4. }

  5. }

5.9 完整uni示例

 
  1. <template>

  2. <div>

  3. <myText ref="telText" tel="12305" style="width:200;height:100" @onTel="onTel" @click="myTextClick"></myText>

  4. </div>

  5. </template>

  6. <script>

  7. export default {

  8. methods: {

  9. myTextClick(e) {

  10. this.$refs.telText.clearTel();

  11. }

  12. }

  13. }

  14. </script>

5.10 uni打包app资源

5.11 复制资源包到androidStudio项目的assets里面

5.12  运行出现该组件说明成功,同样打包aar,复制到uni项目里面的nativeplugins目录,并配置pakage.json

5.13 云打包就可以安装真机上运行了 

六 发布插件到DCloud市场

6.1 上面说了怎样使用本地插件,我们也可以发布插件到市场,这样就能通过远程依赖使用该插件 。发布插件地址:DAccount Service

6.2 填写名字等基础信息

6.3  打包插件,生成zip压缩包

6.4 上传插件使用说明md文本

6.5 发布插件,可能会提示未包含插件内容,是因为上面填写的插件id,和压缩包的插件id不一致。我们改为一致

6.6 因为发布插件必须这样格式,我们就修改uni项目中的插件ID名字

6.7 重新发布,可以看到发布成功了

6.7 插件发布成功,就跟项目ID关联着,在HBuilder里面选择该插件就可以了

七 插件开发总流程

7.1  AndroidStudio增加插件module

7.2 AndroidStudio填写插件json清单

7.3  uni添加三方依赖和配置插件信息

7.4 uni本地生成资源包,供AndroidStudio调试

7.5 复制uni资源包到AndroidStudio里面调试

 7.6 调试通过可以打原生工程aar在uni里面调试

7.7 复制module里面编译好的aar到uni里面

7.8 然后uni离线打包,或者云打包,或者自定义基座调试

官网 简介 | uni小程序SDK

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/706690.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【PyTorch笔记 04】F.cross_entropy的使用

torch.nn.functional.cross_entropy是PyTorch中用于计算交叉熵损失的函数&#xff0c;非常适合用于多分类问题。这个函数结合了log_softmax操作和nll_loss&#xff08;负对数似然损失&#xff09;的计算&#xff0c;因此输入得分&#xff08;即模型输出&#xff09;不需要事先经…

【架构笔记1】剃刀思维-如无必要,勿增实体

欢迎来到文思源想的架构空间&#xff0c;前段时间博主做了一个工作经历复盘&#xff0c;10年开发路&#xff0c;走了不少弯路&#xff0c;也算积累了不少软件开发、架构设计的经验和心得&#xff0c;确实有必要好好盘一盘&#xff0c;作为个人的总结&#xff0c;同时也留给有缘…

对抗生成网络

作用 手底有一堆数据&#xff0c;告诉它要生成什么东西&#xff0c;它就这么去做。 超分辨率重构 告诉模型什么样的东西是一个低分辨率图像&#xff0c;什么样的东西是高分辨率图像&#xff0c;再设计一个损失函数。让计算机学习两者之间的关系&#xff0c;怎样由一个低分辨率…

2.6基本算法之动态规划1944:吃糖果

名名的妈妈从外地出差回来&#xff0c;带了一盒好吃又精美的巧克力给名名&#xff08;盒内共有 N 块巧克力&#xff0c;20 > N >0&#xff09;。妈妈告诉名名每天可以吃一块或者两块巧克力。假设名名每天都吃巧克力&#xff0c;问名名共有多少种不同的吃完巧克力的方案。…

Nginx一网打尽:动静分离、压缩、缓存、黑白名单、跨域、高可用、防盗链、SSL、性能优化

引言 一、性能怪兽-Nginx概念深入浅出 二、Nginx环境搭建 三、Nginx反向代理-负载均衡 四、Nginx动静分离 五、Nginx资源压缩 六、Nginx缓冲区 七、Nginx缓存机制 八、Nginx实现IP黑白名单 九、Nginx跨域配置 十、Nginx防盗链设计 十一、Nginx大文件传输配置 十二、Nginx配置SL…

redis真实使用

Spring Data Redis中提供了一个高度封装的类&#xff1a;RedisTemplate&#xff0c;对相关api进行了归类封装,将同一类型操作封装为operation接口&#xff0c;具体分类如下&#xff1a; ValueOperations&#xff1a;string数据操作 SetOperations&#xff1a;set类型数据操作 …

Flink SQL 中的流式概念:状态算子

博主历时三年精心创作的《大数据平台架构与原型实现&#xff1a;数据中台建设实战》一书现已由知名IT图书品牌电子工业出版社博文视点出版发行&#xff0c;点击《重磅推荐&#xff1a;建大数据平台太难了&#xff01;给我发个工程原型吧&#xff01;》了解图书详情&#xff0c;…

动态规划-01背包问题新解(c)

动态规划-01背包问题新解 概述动态规划01背包问题传统思路算法官方递推关系算法2种算法比较 概述 本文将从一个新的角度来描述和实现01背包问题&#xff0c;以协助对01背包问题以及教材上的算法的彻底理解。 新的角度为&#xff1a;传统思路算法&#xff0c;“新”是新在与绝…

【Python】Ubuntu创建虚拟环境运行Python

虚拟环境让项目之间的依赖关系更加清晰&#xff0c;同时也可以避免全局安装的包的版本冲突问题。 在Ubuntu系统上&#xff0c;可以使用Python的内置工具venv来创建虚拟环境。以下是在Ubuntu上创建Python虚拟环境的步骤&#xff1a; 安装Python虚拟环境工具&#xff1a;首先确保…

Maven配置文件忘记更新阿里云的Mavne镜像的最新地址

最近更新最新版的IDEA&#xff0c;打开旧的工作空间&#xff0c;发现以前Spring相关项目全部报错并无法运行。 单元测试发现无法识别XML配置文件路径&#xff0c;同时提示各种异常 异常一 org.springframework.beans.factory.BeanDefinitionStoreException: IOException par…

10W 音频功率放大电路芯片TDA2003,可用于汽车收音机及收录机中作音频功率放大器,内部具有短路保护和过热保护等功能

TDA2003 用于汽车收音机及收录机中作音频功率放大器。 采用 TO220B5 封装形式。 主要特点&#xff1a; ⚫ 内部具有短路保护和过热保护。内部具有地线开路、电源极性接 反和负载泄放电压反冲等保护电路。 ⚫ 输出电流大。 ⚫ 负载电阻可低至 1.6 。 …

[C++]C/C++ Socket设置非阻塞模式接收超时时间的多种方法

网络编程中经常需要处理的一个问题就是如何正确地处理Socket超时,对于C/C,有几种常用的技术可以用来设置Socket接收超时时间,在这篇文章中,我们将详细介绍如何在C/C中设置Socket的非阻塞模式以及如何配置接收超时时间,需要的朋友可以参考下 C/C Socket设置非阻塞模式接收超时时…

LeetCode 刷题 [C++] 第141题.环形链表

题目描述 给你一个链表的头节点 head &#xff0c;判断链表中是否有环。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链表中存在环。 为了表示给定链表中的环&#xff0c;评测系统内部使用整数 pos 来表示链表尾连接到链表中的位置&a…

STC-ISP原厂代码研究之 V3.7d汇编版本

最近在研究STC的ISP程序,用来做一个上位机烧录软件,逆向了上位机软件,有些地方始终没看明白,因此尝试读取它的ISP代码,但是没有读取成功。应该是目前的芯片架构已经将引导代码放入在了单独的存储块中,而这存储块有硬件级的使能线,在面包板社区-宏晶STC单片机的ISP的BIN文…

uniapp的动态表单实现

目录 1.说明 2.示例 3.总结 1.说明 ①在 formData 中定义个数组变量用来接受同一个字段的多个结果。 dynamicFormData: {email: ,// domains 字段下会有多个结果domains: [] }②使用 uni-forms-item 的 rules 属性定义单个表单域的校验规则。 <uni-forms-item :label&qu…

matlab绘制雷达图和二维FFT变换图

1、内容简介 略 49-可以交流、咨询、答疑 matlab绘制雷达图和二维FFT变换图 NMO组及NORMAL组 RNFL层、GCL层、IPL层、GCC层、ORL层做雷达图&#xff08;共10张&#xff09; 2、内容说明 略 NMO组及NORMAL组 RNFL层、GCL层、IPL层、GCC层、ORL层请分别做雷达图&#xff08…

每日OJ题_分治快排③_力扣215. 数组中的第K个最大元素

目录 力扣215. 数组中的第K个最大元素 解析代码 力扣215. 数组中的第K个最大元素 215. 数组中的第K个最大元素 难度 中等 给定整数数组 nums 和整数 k&#xff0c;请返回数组中第 k 个最大的元素。 请注意&#xff0c;你需要找的是数组排序后的第 k 个最大的元素&#xf…

【学习笔记】SOA服务设计原则(二)举例说明

以银行系统为例 背景 在线银行系统允许用户进行各种银行业务,如查看账户余额、转账、支付账单等。为了支持这些功能,系统需要与账户管理、交易处理、账单支付等多个不同的服务进行交互。 应用SOA设计基本原则 标准化服务合约(Standardized Service Contract) 例子:所有服…

VAST Data步步攀升,整合AI堆栈,打造一体化AI平台:从存储根基走向全方位数据处理与分析

VAST Data公司正逐步从其商品化存储基础出发&#xff0c;构建一套统一的AI堆栈系统&#xff0c;致力于提供一站式AI解决方案。最近&#xff0c;VAST公司的现场CTO安迪珀斯坦纳在一次简报中传达了这一战略方向。 VAST提供了分散式QLC单层闪存架构的并行、横向扩展文件型存储系统…

kotlin与java的相互转换

Kotlin转java 将kotlin代码反编译成java Tools -> Kotlin -> Show Kotlin Bytecode 然后点击 【Decompile】 生成java代码 java转kotlin Code -> Convert Java File To Kotlin File