您当前的位置:首页 > 电脑百科 > 程序开发 > 移动端 > APP

Android uni-app 封装原生插件

时间:2020-12-18 11:10:47  来源:  作者:

前言

据广大用户的需求,需要把我们anyRTC的SDK,封装到uni-App来使用,并且实现音视频通话。这边文章图文讲解一下怎么封装原生插件,并且在下一章uni-app实现音视频通话。

1.uni-app是什么?

Android uni-app 封装原生插件

 

一个使用Vue.js开发所有前端应用框架,开发者编写一套代码,可发布到IOSAndroid、H5、以及各种小程序微信/支付宝/百度/头条/QQ/钉钉)等多个平台。

2.uni-app的特点

  • 跨平台更多

真正做到“一套代码、多端发行”!

条件编译:优雅的在一个项目里调用不同平台的特色功能!

  • 运行体验好

组件、api与微信小程序一致

兼容weex原生渲染

  • 通过技术栈,学习成本低vue的语法、微信小程序的api内嵌mpvue
  • 开放生态,组件更丰富
  • 支持通过npm安装第三方包
  • 支持微信小程序自定义组件及SDK
  • 兼容mpvue组件及项目
  • App端支持和原生混合编码
  • DCloud将发布插件市场

3.uni-app封装原生插件

3.1 Android离线SDK下载:

点击下载,两个SDK均可。

Android uni-app 封装原生插件

 

下载完成,解压备用:

Android uni-app 封装原生插件

 

3.2 新建Android项目

打开Android Studio,建立一个No Activity项目。在菜单栏选择File>New>New Project

Android uni-app 封装原生插件

 

然后Next:填写项目名,包名,已经API Level。

Android uni-app 封装原生插件

 

然后Finish,为了更好的使用,我们把它转到Project视图。接下来创建开发的模块(Module)

点击File>New>New Module.

Android uni-app 封装原生插件

 

然后选择Android Library,点击Next:

Android uni-app 封装原生插件

 

自定义Library名 和包名,点击Finish

Android uni-app 封装原生插件

 

创建完毕视图如下:

Android uni-app 封装原生插件

 

接下来打开testplugin项目里的build.gradle,将原生的dependencies下默认生成的依赖注释掉,添加uni-app所需库的依赖:

compileOnly "com.android.support:recyclerview-v7:28.0.0"
compileOnly "com.android.support:support-v4:28.0.0"
compileOnly "com.android.support:appcompat-v7:28.0.0"
implementation 'com.alibaba:fastjson:1.1.46.android'
implementation 'com.facebook.fresco:fresco:1.13.0'

添加完成如下图所示:

Android uni-app 封装原生插件

 

另外把导入的uniapp-release.aar插件,它是扩展module主要依赖库

Android uni-app 封装原生插件

 

回到刚刚创建的testplugin的build.gradle中,接下来进行导入aar需要的配置操作:

添加: 放在android{}外

repositories {
    flatDir {
        dirs 'libs'
    }
}

然后在dependencies内添加:

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

添加完毕,如下图:

Android uni-app 封装原生插件

 

然后 同步 Sync Now!

3.3 原生插件的开发

以扩展Module为例,如图创建类TestModule:

Android uni-app 封装原生插件

 

Module扩展注意事项:

Android uni-app 封装原生插件

 

写一个小demo:

import android.util.Log;
import com.alibaba.fastjson.JSONObject;
import com.taobao.weex.annotation.JSMethod;
import com.taobao.weex.bridge.JSCallback;
import com.taobao.weex.common.WXModule;

public class TestModule extends WXModule{
    String NAME="name";
    String AGE ="age";

    @JSMethod(uiThread = true)
    public void testText(JSONObject options, JSCallback callBack){
        Log.e("TestModule", "成功调用!" );
        String name =options.getString(NAME);
        String age =options.getString(AGE);
        JSONObject data =new JSONObject();
        if (name !=null && !name.isEmpty() && age !=null && !age.isEmpty()){
            int _age =Integer.parseInt(age);
            if (_age<0 || _age>30){
                data.put("code","不合格!");
            }else {
                age=(_age>0 && _age<10) ? "0"+age:age;
                data.put("code","合格:"+"姓名_"+name+",年龄_"+age);
            }
        }else {
            data.put("code","输入无效!");
        }
        callBack.invoke(data);
    }
}

3.3.1 注册插件:

方法(一)

app>src>main目录下创建assets文件夹

Android uni-app 封装原生插件

 


Android uni-app 封装原生插件

 


Android uni-app 封装原生插件

 

app>src>main>assets目录下创建 dcloud_uniplugins.json 文件,然后添加:

{
  "nativePlugins": [
    {
      "plugins": [
        {
          "type": "module",
          "name": "Test-Module",
          "class": "com.test.testplugin.TestModule"
        }
      ]
    }
  ]
}

方法(二)

对创建的Module扩展testplugin进行操作,在 src>main>JAVA>插件包名(这里是com.test.testplugin)目录下创建类TestModule_AppProxy

Android uni-app 封装原生插件

 


Android uni-app 封装原生插件

 

TestModule_AppProxy类要实现AppHookProxy接口,在onCreate()方法中添加weex注册相关参数或填写插件需要在启动时初始化的逻辑。

Android uni-app 封装原生插件

 

hooksClass节点填入你创建的实现AppHookProxy接口的实体类的完整名称 (注:有些需要初始化操作的需求可以在此处添加逻辑,无特殊操作仅使用第一种方式注册即可无需集成AppHookProxy接口)

Android uni-app 封装原生插件

 

注册完毕,开始打包插件

3.3.2 打包插件:

在Gradle>testplugin>Tasks>other目录下找到assembleRelease,双击等待系统编译出扩展module的aar文件

注意:官方文档中是

选择

Gradle--->插件module--->Tasks--->build--->assembleRelease编译module的aar文件

,在新版本的AndroidStudio中,assembleReleaseassembleDebug被转移到other目录下。

Android uni-app 封装原生插件

 


Android uni-app 封装原生插件

 


Android uni-app 封装原生插件

 


Android uni-app 封装原生插件

 

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

Android uni-app 封装原生插件

 

4.HBuilderX导入和使用本地插件

创建uni-app默认项目TestModule

Android uni-app 封装原生插件

 

参照官方文档中的目录规范,将刚才打包的插件放到nativeplugins>插件文件夹名称(我的是Test-Module)>android目录下,没有相关目录就一步步创建。

Android uni-app 封装原生插件

 

创建package.json——uni原生插件描述文件,放到插件文件夹名称目录下,与android文件夹并列

Android uni-app 封装原生插件

 

注意:插件标识id必须在对应android和ios节点下plugins中进行注册,与name字段值一致。name下的class是注册插件的类名,也要填对。

这里因为只有android插件,就把ios节点全部删掉,在这里直接注释的话是无效的。

Android uni-app 封装原生插件

 

还有要注意的一点:插件标识id一定要与插件文件夹名称一致,不然在云打包时会提示 插件不合法:该插件在nativePlugins目录下不存在。

在manifest.json下配置App原生插件

Android uni-app 封装原生插件

 

勾选并确认

Android uni-app 封装原生插件

 

parameters信息根据需求配置

Android uni-app 封装原生插件

 

接下来在HBuilderX内对项目中的index.vue文件(在pages>index目录下)做出一定更改,以便后续测试开发的原生插件。

<template>
    <view class="container">
        姓名<input v-model="name" placeholder="点此编辑姓名" >
        <br>
        年龄<input v-model="age" placeholder="点此编辑年龄" >
        <br>
        <button type="default" @click="test">提交</button>
        <view>{{name}}</view>
        <view>{{age}}</view>
        <view>{{ result }}</view>
    </view>
</template>

<script>
    var testModule = uni.requireNativePlugin("Test-Module");
    export default {
        data() {
            return {
                name:"",
                age:"",
                result:"暂未提交"
            }
        },
        methods: {
            test(){
                testModule.testText({
                    'name':this.name,
                    'age':this.age,
                },
                (ret) =>{
                    this.result="[提交反馈]"+ret.code;
                })
            }
        }
    }
</script>
Android uni-app 封装原生插件

 

5.运行项目

打包自定义基座:

运行(R)>运行到手机或模拟器(N)>制作自定义调试基座(P)

Android uni-app 封装原生插件

 

配置App云端打包信息:

Android uni-app 封装原生插件

 

云端打包:

Android uni-app 封装原生插件

 

提交到云端服务器:

Android uni-app 封装原生插件

 

打包成功:

Android uni-app 封装原生插件

 

打包成功后需要在下图位置确保开启自定义调试基座功能:

Android uni-app 封装原生插件

 


Android uni-app 封装原生插件

 

启动模拟器,或者真机运行:

Android uni-app 封装原生插件

 

进入测试项目:

Android uni-app 封装原生插件

 

输入姓名tom和年龄9(大于0小于10前面自动补0)测试插件,点击提交

Android uni-app 封装原生插件

 

反馈提交结果

Android uni-app 封装原生插件

 

把年龄改为31(插件设置年龄范围为0~30),反馈如下

Android uni-app 封装原生插件

 

至此,测试成功!

6.离线打包测试

6.1 配置AndroidManifest.xml

app**>src>main下配置AndroidManifest.xml文件

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.test.nativeplugin">
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.REORDER_TASKS" />

    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <application
        android:name="io.dcloud.application.DCloudApplication"
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:hardwareAccelerated="true"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme" >

    <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" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    <activity
            android:name="io.dcloud.PandoraEntryActivity"
            android:launchMode="singleTask"
            android:configChanges="orientation|keyboardHidden|screenSize|mcc|mnc|fontScale|keyboard"
            android:hardwareAccelerated="true"
            android:permission="com.miui.securitycenter.permission.AppPermissionsEditor"
            android:screenOrientation="user"
            android:theme="@style/DCloudTheme"
            android:windowSoftInputMode="adjustResize">
            <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="h56131bcf" />
            </intent-filter>
        </activity>
        <!--provider节点必须添加-->
    <provider
            android:name="io.dcloud.common.util.DCloud_FileProvider"
            android:authorities="com.test.nativeplugin.dc.fileprovider"// 前面换成你的包名            android:exported="false"
            android:grantUriPermissions="true">
        <meta-data
            android:name="android.support.FILE_PROVIDER_PATHS"
            android:resource="@xml/dcloud_file_provider" />
    </provider>

</application>
</manifest>

6.2 引入打包资源

进入下载好后的安卓离线SDK文件夹,在目录

latest2.9.8Android-SDK@2.9.8.80513_20201111SDKlibs下找到:

  • lib.5plus.base-release.aar
  • android-gif-drawable-release@1.2.17.aar
  • msa_mdid_1.0.13.aar
  • uniapp-release.aar

四个文件,复制到自定义的新文件夹方便使用

在目录 latest2.9.8Android-SDK@2.9.8.80513_20201111SDKassets

下找到data文件夹,打开可以发现下图几个文件。

Android uni-app 封装原生插件

 

和上面的aar包放在同一个文件里,方便取用!

6.3 离线打包

如图,在发行(P)选项>原生APP-本地打包(L)中选择生成本地打包App资源(R)

Android uni-app 封装原生插件

 

显示导出成功,顺着路径将自己项目id名的文件夹拷贝,放到上一步自定义的文件夹下,方便使用。

Android uni-app 封装原生插件

 

将离线打包出来的文件和上面的文件一样放在一个目录,方便取用!我的是__UNI__179390F

6.4 配置Android Studio

打开AndroidStudio,如下图将

  • lib.5plus.base-release.aar
  • android-gif-drawable-release@1.2.17.aar
  • msa_mdid_1.0.13.aar

三个文件复制粘贴到libs目录下

(上面添加依赖时已经导入uniapp-release.aar了)

Android uni-app 封装原生插件

 

接下来在android{}内添加:

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

 

Android uni-app 封装原生插件

 

在dependencies添加:

implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation fileTree(dir: 'libs', include: ['*.aar'])

implementation "com.android.support:support-v4:28.0.0"
implementation "com.android.support:appcompat-v7:28.0.0"

/*uniapp所需库-----------------------开始*/
implementation 'com.android.support:recyclerview-v7:28.0.0'
implementation 'com.facebook.fresco:fresco:1.13.0'
implementation "com.facebook.fresco:animated-gif:1.13.0"
/*uniapp所需库-----------------------结束*/
// 基座需要,必须添加
implementation 'com.github.bumptech.glide:glide:4.9.0'
implementation 'com.alibaba:fastjson:1.1.46.android'
implementation project(path: ':testplugin')  //引用原始插件module

添加:

repositories {  flatDir {   dirs 'libs'  }}
Android uni-app 封装原生插件

 

回到build.gradle(app)页面最上边,配置app版本号。

Android uni-app 封装原生插件

 

compileSdkVersion为编译版本,buildToolsVersion为构建工具版本,applicationId为创建时的包名,minSdkVersion为兼容最小的版本号,targetSdkVersion为目标版本,有兴趣的可以百度一下三者之间的区别和联系。

versionCode需要设定一个数值,一般初始为1,更新版本时versionCode的值需要做出更改,每次都要比前一个设置的值大,否则无法正常安装。

versionName一般填写主版本号次版本号和修正号,如图中的“1.0.0”为最初版本号,其余的可以自行查阅。

然后同步处理

Android uni-app 封装原生插件

 

同步完成

Android uni-app 封装原生插件

 

把刚刚转移到自定义文件夹下的data文件夹拷贝到app>src>main>assets目录文件夹下。

Android uni-app 封装原生插件

 


Android uni-app 封装原生插件

 

继续在刚刚创建的assets文件夹下创建apps文件夹,把刚刚进行本地打包资源处理后的文件(我的是__UNI__179390F)拷贝到apps文件夹下。

Android uni-app 封装原生插件

 


Android uni-app 封装原生插件

 


Android uni-app 封装原生插件

 

6.5 自定义基座的配置

在app目录下,将assets下apps文件夹中的manifest.json文件和data文件夹中的dcloud_control.xml文件打开,确保manifest.json中的id和dcloud_control.xml中的appid一致(不一致会出现白屏等状况)。

并设置根节点的debugsyncDebugtrue

Android uni-app 封装原生插件

 

条件配置完毕

6.6 名称配置

app>src>main>res>values配置strings.xml文件,打开xml文件,与刚刚引入本地打包资源的里的manifest.json文件比较,发现名字不一致,遂把strings.xml里的name改为“TestModule”。

(注:manifest.json文件在

assets>apps>__UNI__179390F>www目录下)

Android uni-app 封装原生插件

 

至此点击运行就可以啦,真机和模拟器都可以!

Android uni-app 封装原生插件

 

完结!

作者:anyRTC-东慕雨

链接:https://juejin.cn/post/6904902110505402376



Tags:Android   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
Android logcat日志封装logcat痛点在Android开发中使用logcat非常频繁,logcat能帮我们定位问题,但是在日常使用中发现每次使用都需要传递tag,并且会遇到输出频率很高的log,在多...【详细内容】
2021-12-22  Tags: Android  点击:(7)  评论:(0)  加入收藏
一、 准备工作1、安装JDK,下载地址(可能需要一个oracle账号,大家百度一下或者自行注册一个就行。尽可能选择8或者11,这两个是长期版本)Java SE | Oracle Technology Network | Or...【详细内容】
2021-11-23  Tags: Android  点击:(26)  评论:(0)  加入收藏
如果你是一名忠实的Android玩家,那么可能会知道,今年的Android 12系统在版本规划上与“往届”相比可以说是很有些特殊。具体来说,除了前段时间刚刚推出正式版的Android 12外,谷...【详细内容】
2021-11-10  Tags: Android  点击:(23)  评论:(0)  加入收藏
使用Maven Publish Plugin插件。(官方支持)一、在Library的build.gradle中配置plugins { id &#39;com.android.library&#39; id &#39;kotlin-android&#39; id &#39;k...【详细内容】
2021-11-05  Tags: Android  点击:(36)  评论:(0)  加入收藏
今年5月,谷歌推出了Android 12,这是原生安卓系统史上最大的设计变化,10月4日,谷歌推出全新的Android12正式版本,并且宣布会在今年晚些时候应用于安卓设备,对比Android11的挤牙膏式...【详细内容】
2021-10-29  Tags: Android  点击:(125)  评论:(0)  加入收藏
今天凌晨,谷歌正式发布了全新一代安卓Android 12系统,拥有全新的UI,同时带来了六大新功能,除此以外还有10月的安全补丁,下面就给大家介绍这六大新功能以及安卓Android 12系统配置...【详细内容】
2021-10-22  Tags: Android  点击:(53)  评论:(0)  加入收藏
用户通过系统返回按钮导航回去的一组页面,在开发中被称为返回栈 (back stack)。多返回栈即一堆 "返回栈",对多返回栈的支持是在 Navigation 2.4.0-alpha01 和 Fragment 1.4.0...【详细内容】
2021-08-17  Tags: Android  点击:(75)  评论:(0)  加入收藏
前言耗电量指标 待机时间成关注目标 提升用户体验 通过不同的测试场景,找出app高耗电的场景并解决01需要的环境准备1、python2.7(必须是2.7,3.X版本是不支持的) 2、golang语言...【详细内容】
2021-08-04  Tags: Android  点击:(93)  评论:(0)  加入收藏
6 月 29 日,微软向 Windows 预览体验计划的 Dev 通道推送了 Windows 11 的第一个预览版本,我们也在第一时间升级到了最新系统,可以点击这里查看 APPSO 的抢先体验。 关于 Windo...【详细内容】
2021-07-14  Tags: Android  点击:(90)  评论:(0)  加入收藏
玩过王者荣耀的朋友,几乎无人不晓「鲁班七号」这个英雄。作为 Android 的应用程序包,「APK」对于资深 Android 用户来说,知名度并不亚于前者。 也正因如此,日前 Google 的一份声...【详细内容】
2021-07-08  Tags: Android  点击:(44)  评论:(0)  加入收藏
▌简易百科推荐
  1、明确产品的需求分析+功能  这是最基本的也是第一步,我们要明确自己或者客户真的想要开发一款app应用,其次就要了解到底要开发什么功能什么类别和种类的app应用。所...【详细内容】
2021-12-27  木子科技    Tags:App   点击:(1)  评论:(0)  加入收藏
前言目前,即时通讯在app中逐渐成了不可或缺的功能,尤其是在疫情期间,音视频会议功能更是火了一把,但是想自己开发即时通讯功能,却一点都不简单,如果用原生开发的话,那么Android、iO...【详细内容】
2021-07-29  中控易动    Tags:APP   点击:(104)  评论:(0)  加入收藏
本篇博文将会提供一个关于如何使用WebRTC建立一个视频会议App的教程。我们不会将其设计的太复杂,它将会是一个简单的一对一视频会议App,并且仅仅使用了WebRTC APIs和一些其他...【详细内容】
2021-07-29  易简视源云会议    Tags:视频会议App   点击:(113)  评论:(0)  加入收藏
开发一款app需要多少钱?这是一个比较笼统的问题,没有确切的需求,拥有不同技术经验的团队往往报价都各不相同,因为不知道开发需求,所以无法给出一个准确的价格。因此,想知道app开发...【详细内容】
2021-07-13  hey衡道    Tags:app   点击:(79)  评论:(0)  加入收藏
Hybrid APP指的是半原生半Web的混合类App。需要下载安装,看上去类似Native App,但只有很少的UI Web View,访问的内容是 Web 。 原生是Native APP,H5就是Web App在Hybrid 当中,如...【详细内容】
2021-04-28  扣丁学堂  今日头条  Tags:APP页面   点击:(289)  评论:(0)  加入收藏
介绍MIP(Mobile Instant Pages - 移动网页加速器),是一套应用于移动网页的开放性技术标准。通过提供 MIP-HTML 规范、MIP-JS 运行环境以及 MIP-Cache 页面缓存系统,实现移动网页...【详细内容】
2021-04-12  爱分享Coder  今日头条  Tags:WebApp   点击:(309)  评论:(0)  加入收藏
在开发直播APP时,核心要素和基本要素是稳定性,一般各大服务商都有提供demo,并且可以免费测试的,测试可以初步评估下稳定性,看看视频流畅度如何,卡顿是不是很频繁,延时效果怎么样,视...【详细内容】
2021-03-19      Tags:直播APP   点击:(292)  评论:(0)  加入收藏
TOKEN作为用户身份凭证并不能保证数据安全,别人通过抓包等方式很容易拿到TOKEN,带上TOKEN请求我们的API接口就能获取数据;其实换一个角度想:我们只需保证即使TOKEN被别人冒用,也...【详细内容】
2021-02-18      Tags:APP,API   点击:(229)  评论:(0)  加入收藏
在当今移动互联网盛行的时代,网络的形态除了有线连接,还有2G/3G/4G/5G/WiFi等多种手机网络连接方式。不同的协议、不同的制式、不同的速率,使移动应用运行的场景更加丰富。目前...【详细内容】
2021-02-05      Tags:APP   点击:(201)  评论:(0)  加入收藏
虽然目前许多企业都进行了长沙APP开发,开始了移动互联网转型之路,但由于其中绝大部分企业都属于传统行业,对APP应用了解并不多,故而对开发工作也不是很清楚。为了大家能更好的了...【详细内容】
2021-02-01      Tags:APP应用   点击:(214)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条