作为一名web开发者，我是如何一步一步实现uniapp接入原生SDK，实现单点登录的

web_bee
2,094 阅读5分钟

需求及解决思路：

使用uniapp开发了一个安卓app应用，需要使用别人开发的原生app做单点登录；对方提供了单点登录的SDK包（aar包），由于他们的SDK只针对原生安卓app，不提供uniapp版本的SDK；

注意：uniapp使用的aar插件包和原生使用的aar插件包是不一样的

所以需要我们自己开发一个aar中间层插件包中转他们的SDK给我们自己的uniapp使用；

实现方案：

  • 开发一个自己的原生插件 aar 包
  • 自己的原生插件aar包调用第三方的aar包中的方法，做一个中间层
  • uniapp调用自己的aar包中的方法

一、原生插件开发（aar包开发）

官网教程，有一说一官网教程对前端同学来说，太过粗糙，可能本就是针对安卓开发同学编写的，网上也有很多详细教程，本人也是参考了网上诸多教程才完成了这个功能，接下来详细记录一下我实现功能的心路历程；

1. 首先下载官方demo

sdk_1.png

下载之后，解压，目录结构如下，选择红框中的项目

sdk_2.png

UniPlugin-Hello-AS 这个一个专门用于插件开发的demo；

2. 使用Android studio 打开UniPlugin-Hello-AS工程

sdk_3.png

查看uniapp官网可以看到，插件大致可以分为两种：扩展Module、扩展组件Component;

图中从名字可以看出来，demo项目中包含了一个 module、component，但是这两个我们都不用，自己新建一个；

3. 创建 Module

sdk_4.png

sdk_5.png

这里填写的 Module name、Package name 在后面都会用到；

sdk_6.png

按照上面步骤，现在在你的项目中就已经创建好了一个名为 mbslibrary 的模块；

4. 调整Module中的结构

sdk_7.png

对比mbslibrary 和 uniplugin_module 中的结构：

  • 把标红的文件夹全部删掉
  • 将 uniplugin_module - src - main - res 文件夹 拷贝到 mbslibrary 中相同的位置；

sdk_8.png

将AndroidMainfest.xml 中 标红的内容全部删掉；

下一步：

将 uniplugin_module - build.gradle文件中的内容拷贝到 mbslibrary - build.gradle 中去，点击同步（Sync Now）;

因为前者中的配置已经引入了uniapp需要的依赖 uniapp-v8-release.aar 并且它是确定可以运行的配置；

5. 配置混淆文件

打开Module mbslibrary 根目录下的proguard-rules.pro文件，在最后一行末尾加入以下代码

-keep public class * extends io.dcloud.feature.uniapp.common.UniModule{*;}

到目前我们已经得到了一个比较干净的模块，接下来就开始我们插件的开发；

6. 插件开发

接下来在 mbslibrary - src - main - java - com.example.mbslibrary 目录下新建一个java文件；以上目录都是我们在创建模块时自动生成的，如果你本地没有可以自行创建；

sdk_9.png

搞了半天，现在终于可以开始愉快的编码了...

拷贝uniplugin_module 中的代码到你创建的Java Class 文件中，稍作修改如下：

package com.example.mbslibrary;
​
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 mbslibrary extends UniModule {
    String TAG = "TestModule";
​
    //run ui thread
    @UniJSMethod(uiThread = true)
    public void testAsyncFunc(UniJSCallback callback) {
        if(callback != null) {
            JSONObject data = new JSONObject();
            data.put("code", "success");
            callback.invoke(data);
        }
    }
}

接下来就可以测试代码是否能运行了，先尝试一下打包；

7. 插件打包

鼠标选中你创建的模块 mbslibrary，顶部点击 build，如图点击打包模块：

sdk_10.png

我这边打包成功，如果你是按照我上面的步骤应该也能成功，如果失败就具体问题具体搜索...

打包成功后，可以在模块目录mbslibrary - build - outputs - arr 下看到你的包，我这里是 mbslibrary-debug.aar

8. 在uniapp中使用

这里我就不赘述，参考官网文档配置就行了；

需要注意的是：在引用时的包名就是我们创建模块时的 Module Name

<script setup>
  const mbslibrary = uni.requireNativePlugin('mbslibrary');
  mbslibrary.testAsyncFunc((res) => {
    console.log(res)
  })
</script>

自定义基座的生成在这里也不赘述，对前端同学来说问题不大；

插件包只能在自定义基座中才能看到效果；

HBuilder，在自定义基座中启动项目，就可以看到相应的输出，至此我们的 测试版插件 算是基本完成了；

需要注意的是以上代码只能在安卓环境下运行，所以最好做一个兼容处理；

二、集成第三方SDK（aar包）

以上步骤已经实现了一个简单的原生插件，但是、但是、但是还没有达到我们的目的，接下来开始集成：

这里假设我有一个第三方arr包，名叫 third_sdk.aar

1. 添加第三方arr到模块中

将第三方aar包（third_sdk.aar）放入app文件夹下的libs中去，有的教程讲的是放到自己模块的libs中去，我试了不好使，大家也可以都试试；

然后在 mbslibrary - build.gradle 中添加如下配置并同步：

dependencies {
  compileOnly fileTree(dir: '../app/libs', include: ['third_sdk.aar'])
}

sdk_11.png

2. 使用第三方arr包

接下里就是到我们自己的类里面去使用；

sdk_12.png

import com.xxx.xx.http.HttpResponse;

这里的引入路径，主要看你第三方aar包的路径是什么，可以在Android Status 中点开arr包查看内部路径；

至此只要你引入没有爆红或者找不到包名路径，说明你已经成功引入了第三方SDK；

接下来就是在你的类里面编写你的业务代码；

最后就是打包使用了，打包方式上面已经介绍过了；

3. 第三方aar在uniapp项目的存放位置

sdk_13.png

第三方aar包，需要和你自己的arr包 都放在android 文件夹下面，和mbslirary在同一目录下；

4. 完成

到这里就已经基本完成了所有配置和开发；

本文主要针对前端同学，并且是我完成开发后写，可能会有遗漏没有记录到的地方，如果照着配置还是有问题，可以多参考类似文章；

文中还有一些没有提到的，比如 HBuilder 云打包离线打包key申请、证书申请等，这些大家自行搜索；

文中很多地方配置我也不太清楚原理，大家照着搞就行了，有问题解决问题😄；

avatar
文章
阅读
粉丝