Android uni-app 封裝原生插件-有解無憂

前言

據廣大用戶的需求，需要把我們anyRTC的SDK，封裝到uni-app來使用，并且實作音視頻通話，這邊文章圖文講解一下怎么封裝原生插件，并且在下一章uni-app實作音視頻通話，

anyRTC開發者中心

1.uni-app是什么？

在這里插入圖片描述
一個使用Vue.js開發所有前端應用框架,開發者撰寫一套代碼,可發布到ios、Android、H5、以及各種小程式（微信/支付寶/百度/頭條/QQ/釘釘）等多個平臺，
如果你還沒有了解uni-app是什么：點擊這里：這篇文章舉例說明，

2.uni-app的特點

1、跨平臺更多

真正做到“一套代碼、多端發行”！
條件編譯：優雅的在一個專案里呼叫不同平臺的特色功能！

2、運行體驗好

組件、api與微信小程式一致
兼容weex原生渲染

3、通過技術堆疊，學習成本低

vue的語法、微信小程式的api
內嵌mpvue

4、開放生態，組件更豐富

5、支持通過npm安裝第三方包

6、支持微信小程式自定義組件及SDK

7、兼容mpvue組件及專案

8、App端支持和原生混合編碼

9、DCloud將發布插件市場

3.uni-app封裝原生插件

3.1 Android離線SDK下載：

點擊下載，兩個SDK均可，

下載完成，解壓備用：

3.2 新建Android專案

打開Android Studio，建立一個No Activity專案，在選單欄選擇File>New>New Project

然后Next：填寫專案名，包名，已經API Level，

然后Finish，為了更好的使用，我們把它轉到Project視圖，接下來創建開發的模塊（Module）

點擊File>New>New Module.

然后選擇Android Library，點擊Next：

自定義Library名和包名，點擊Finish

創建完畢視圖如下：

接下來打開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'
復制代碼

添加完成如下圖所示：

另外把匯入的uniapp-release.aar插件，它是擴展module主要依賴庫

回到剛剛創建的testplugin的build.gradle中，接下來進行匯入aar需要的配置操作：

添加：放在android{}外

repositories {
    flatDir {
        dirs 'libs'
    }
}
復制代碼

然后在dependencies內添加：

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

添加完畢，如下圖：

然后 同步 Sync Now!

3.3 原生插件的開發

以擴展Module為例，如圖創建類TestModule：

Module擴展注意事項：

寫一個小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檔案夾

在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

TestModule_AppProxy類要實作AppHookProxy介面，在onCreate（）方法中添加weex注冊相關引數或填寫插件需要在啟動時初始化的邏輯，

在hooksClass節點填入你創建的實作AppHookProxy介面的物體類的完整名稱 (注：有些需要初始化操作的需求可以在此處添加邏輯，無特殊操作僅使用第一種方式注冊即可無需集成AppHookProxy介面)

注冊完畢，開始打包插件

3.3.2 打包插件：

在Gradle>testplugin>Tasks>other目錄下找到assembleRelease，雙擊等待系統編譯出擴展module的aar檔案

注意：官方檔案中是

選擇

Gradle—>插件module—>Tasks—>build—>assembleRelease編譯module的aar檔案

，在新版本的AndroidStudio中,assembleRelease和assembleDebug被轉移到other目錄下，

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

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

創建uni-app默認專案TestModule

參照官方檔案中的目錄規范，將剛才打包的插件放到nativeplugins>插件檔案夾名稱（我的是Test-Module）>android目錄下，沒有相關目錄就一步步創建，

創建package.json——uni原生插件描述檔案，放到插件檔案夾名稱目錄下，與android檔案夾并列

注意：插件標識id必須在對應android和ios節點下plugins中進行注冊，與name欄位值一致，name下的class是注冊插件的類名，也要填對，

這里因為只有android插件，就把ios節點全部刪掉，在這里直接注釋的話是無效的，

還有要注意的一點：插件標識id一定要與插件檔案夾名稱一致，不然在云打包時會提示 插件不合法：該插件在nativePlugins目錄下不存在，

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

勾選并確認

parameters資訊根據需求配置

接下來在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>

5.運行專案

打包自定義基座：

運行?>運行到手機或模擬器(N)>制作自定義除錯基座§

配置App云端打包資訊：

云端打包：

提交到云端服務器：

打包成功：

打包成功后需要在下圖位置確保開啟自定義除錯基座功能：

啟動模擬器，或者真機運行：

進入測驗專案：

輸入姓名tom和年齡9（大于0小于10前面自動補0）測驗插件，點擊提交

反饋提交結果

把年齡改為31（插件設定年齡范圍為0~30），反饋如下

至此，測驗成功！

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檔案夾，在目錄
**

latest\2.9.8\Android-SDK@2.9.8.80513_20201111\SDK\libs下找到：

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

四個檔案，復制到自定義的新檔案夾方便使用

在目錄 latest\2.9.8\Android-SDK@2.9.8.80513_20201111\SDK\assets

下找到data檔案夾，打開可以發現下圖幾個檔案，

和上面的aar包放在同一個檔案里，方便取用！

6.3 離線打包

如圖，在發行§選項>原生APP-本地打包（L）**中選擇**生成本地打包App資源（R），

在這里插入圖片描述

顯示匯出成功，順著路徑將自己專案id名的檔案夾拷貝，放到上一步自定義的檔案夾下，方便使用，

在這里插入圖片描述

將離線打包出來的檔案和上面的檔案一樣放在一個目錄，方便取用！我的是__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{}內添加：

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

在這里插入圖片描述

在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'  }}

在這里插入圖片描述

回到build.gradle(app)頁面最上邊，配置app版本號，

在這里插入圖片描述

compileSdkVersion為編譯版本，buildToolsVersion為構建工具版本，applicationId為創建時的包名，minSdkVersion為兼容最小的版本號，targetSdkVersion為目標版本，有興趣的可以百度一下三者之間的區別和聯系，

versionCode需要設定一個數值，一般初始為1，更新版本時versionCode的值需要做出更改，每次都要比前一個設定的值大，否則無法正常安裝，

versionName一般填寫主版本號次版本號和修正號，如圖中的“1.0.0”為最初版本號，其余的可以自行查閱，

然后同步處理

在這里插入圖片描述

同步完成

在這里插入圖片描述
?

把剛剛轉移到自定義檔案夾下的data檔案夾拷貝到app>src>main>assets目錄檔案夾下，

在這里插入圖片描述

繼續在剛剛創建的assets檔案夾下創建apps檔案夾，把剛剛進行本地打包資源處理后的檔案（我的是__UNI__179390F）拷貝到apps檔案夾下，

在這里插入圖片描述

6.5 自定義基座的配置

在app目錄下，將assets下apps檔案夾中的manifest.json檔案和data檔案夾中的dcloud_control.xml檔案打開，確保manifest.json中的id和dcloud_control.xml中的appid一致（不一致會出現白屏等狀況），

并設定根節點的debug和syncDebug為true

在這里插入圖片描述

條件配置完畢

6.6 名稱配置

在app>src>main>res>values配置strings.xml檔案，打開xml檔案，與剛剛引入本地打包資源的里的manifest.json檔案比較，發現名字不一致，遂把strings.xml里的name改為“TestModule”，

（注：manifest.json檔案在

assets>apps>__UNI__179390F>www目錄下）

在這里插入圖片描述

至此點擊運行就可以啦，真機和模擬器都可以！

完結！

作者：anyRTC-東慕雨
anyRTC官網：https://www.anyrtc.io/
鏈接：https://juejin.cn/post/6904902110505402376

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/237103.html

標籤：其他

上一篇：Android 雙屏異顯實作的三種方式

下一篇：vue路由嵌套