uniapp原生插件开发调用第三方SDK

用户2095388867882024-03-15 18:06

第一步，开发环境的准备

  1. 下载uniapp安卓官方SDK待后面使用，解压完成如下图所示。
  2. JAVA环境 jdk，打开cmd输入java -version查看自己的jdk版本，官方文档中提示jdk版本应在1.7及以上，如果达不到标准，自行下载相关版本配置好环境变量即可。
  3. Android Studio 下载，下载地址下载 Android Studio 和应用工具 - Android 开发者 | Android Developers

第二步，创建自己的项目

打开AndroidStudio，在菜单栏选择File>New>New Project，新建自定义项目。

填写项目名称点击完成创建完成后为了方便使用我们转为Project视图，我这里是汉化后的

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

选择Android Library，填写Module name点击完成创建完毕后如图所示

配置刚创建的Module（testPlugin）的build.gradle信息

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

arduino 复制代码 
//必须添加的依赖
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

回到刚刚创建的testPlugin的build.gradle中，进行导入aar需要的配置操作，在dependencies内添加

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

然后点击Sync Now进行同步处理第三步，原生插件的开发

在我们所创建的module(testPlugin)>src>main>java>com.test.testPlugin创建类TestModule

  • Module 扩展必须继承 UniModule 类
  • 扩展方法必须加上@UniJSMethod (uiThread = false or true) 注解。UniApp 会根据注解来判断当前方法是否要运行在 UI 线程，和当前方法是否是扩展方法。

我只做了最简单的返回插件调用成功的语句，可根据自己的业务逻辑自行编写

scala 复制代码 
package com.test.testplugin;
import com.alibaba.fastjson.JSONObject;
import io.dcloud.feature.uniapp.annotation.UniJSMethod;
import io.dcloud.feature.uniapp.bridge.UniJSCallback;
import io.dcloud.feature.uniapp.common.UniModule;

public class TestModule extends UniModule {
    @UniJSMethod(uiThread = false)
    public void open(UniJSCallback callback) {
        JSONObject data = new JSONObject();
        data.put("code","插件调用成功");
        callback.invoke(data);
    }
}

第四步，注册插件

在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":[ { "hooksClass":"uni.dcloud.io.uniplugin_richalert.apphooks", "plugins":[ { "type":"module", "name":"DCloud-RichAlert", "class":"uni.dcloud.io.uniplugin_richalert.RichAlertModule" } ] } ]}

第五步，打包插件

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

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

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

第六步，HBuilderX导入和使用本地插件

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

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

注意：插件标识id必须和name一致，plugins下的class是注册插件的类名要填对（同dcloud_uniplugins.json文件中的class一致）。配置文件为 json 格式，不能有注释，否则会解析失败。

最后在manifest.json下选择我们开发的插件点击确认

在uniapp项目中获取插件，通过使用uni.requireNativePlugin获取插件对象。

第五步，运行项目

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

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

我这里使用自用证书（证书没有的可自行申请，参考：ask.dcloud.net.cn/article/357...

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

然后运行到Android App基座

运行后点击按钮调用插件方法获取到了插件返回值，调用插件成功，接下来可以进行自己的业务开发

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

2.通过AndroidStudio来运行

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

添加内容到application节点,复制官方文档中的配置。

ini 复制代码 
<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)中添加引用资源

php 复制代码 
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中添加aaptOptions配置，在android中配置

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

然后点击右上角的Sync Now。然后回到uniapp项目中，如图在发行选项>原生APP-本地打包（L）中选择生成本地打包App资源（R）

成功后找到如下所示文件

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

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

将下载的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>testaline，将demoKeys.keystore放在此目录下如下图所示

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

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

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

在Android studio项目中app>src>main>AndroidManifest.xml文件中添加代码，android:value的值是我们创建的appkey，将第二张图红色框中的appkey复制进去就行。

在build.gradle(app)文件中添加如下代码，红线框为需要添加部分

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

插件开发成功接下来可以进行自己的业务开发，调用第三方SDK。我涉及的是调用SDK获取称重数据，将SDK导入module下的libs目录下

在build.gradle(:testPlugin)中引入jar文件

然后编写自己的业务逻辑，原本怎么调用SDK的就怎么调用。

关于获取上下文

在module下新建MyApplication类，输入下列代码。然后将lib5+导入到libs下

typescript 复制代码 
import android.content.Context;
import io.dcloud.application.DCloudApplication;
public class MyApplication extends DCloudApplication{
    public static Context context;
    public static Context getContext() {
        return  context;
    }
    @Override
    public void onCreate() {
        super.onCreate();
        context = this;

    }
}

在AndroidMainfest.xml中配置

参考文章：

小白分享自己的开发过程，如有错误请各位大佬指出。

相关推荐
bin91531 小时前
DeepSeek 助力 Vue 开发：打造丝滑的复制到剪贴板（Copy to Clipboard）
前端·javascript·vue.js·ecmascript·deepseek
晴空万里藏片云2 小时前
elment Table多级表头固定列后，合计行错位显示问题解决
前端·javascript·vue.js
曦月合一2 小时前
html中iframe标签 隐藏滚动条
前端·html·iframe
奶球不是球2 小时前
el-button按钮的loading状态设置
前端·javascript
kidding7233 小时前
前端VUE3的面试题
前端·typescript·compositionapi·fragment·teleport·suspense
Σίσυφος19005 小时前
halcon 条形码、二维码识别、opencv识别
前端·数据库
学代码的小前端5 小时前
0基础学前端-----CSS DAY13
前端·css
css趣多多6 小时前
案例自定义tabBar
前端
姑苏洛言7 小时前
DeepSeek写微信转盘小程序需求文档，这不比产品经理强？
前端
林的快手7 小时前
CSS列表属性
前端·javascript·css·ajax·firefox·html5·safari
热门推荐
01DeepSeek各版本说明与优缺点分析02如何在WPS和Word/Excel中直接使用DeepSeek功能03DeepSeek本地部署详细指南04太炸裂了！清华大学deepseek从入门到精通使用手册又出第三版了，《普通人如何抓住DeepSeek红利》（无套路，直接下载）05本地部署DeepSeek教程（Mac版本）06DeepSeek r1本地安装全指南07DeepSeek RAGFlow构建本地知识库系统08本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程09DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具10【docker】Windows10安装Docker Desktop - WSL update failed