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\[email protected]_20201111\SDK\libs下找到：

lib.5plus.base-release.aar
**[email protected]
**
*****msa_mdid_1.0.13.aar***
**********uniapp-release.aar

四個文件，複製到自定義的新文件夾方便使用

在目錄 latest\2.9.8\[email protected]_20201111\SDK\assets

下找到data文件夾，打開可以發現下圖幾個文件。

和上面的aar包放在同一個文件裏，方便取用！

6.3 離線打包

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

顯示導出成功，順着路徑將自己項目id名的文件夾拷貝，放到上一步自定義的文件夾下，方便使用。

將離線打包出來的文件和上面的文件一樣放在一個目錄，方便取用！我的是__UNI__179390F

6.4 配置Android Studio

打開AndroidStudio，如下圖將

lib.5plus.base-release.aar
**[email protected]
**
****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

Android uni-app 封裝原生插件

前言

1.uni-app是什麼？

2.uni-app的特點

3.uni-app封裝原生插件

3.1 Android離線SDK下載：

3.2 新建Android項目

3.3 原生插件的開發

3.3.1 註冊插件：

3.3.2 打包插件：

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

5.運行項目

6.離線打包測試

6.1 配置AndroidManifest.xml

6.2 引入打包資源

6.3 離線打包

6.4 配置Android Studio

6.5 自定義基座的配置

6.6 名稱配置

.Net 8.0 下的新RPC，IceRPC之試試的新玩法"打洞"

完美替代postman的軟件

Vue mockjs mock.js

關於遊戲付費的一點想法

我通過CKA和CKS啦！

安裝chromadb注意事項

《最新出爐》系列入門篇-Python+Playwright自動化測試-42-強大的可視化追蹤利器Trace Viewer

大數據怎麼學？對大數據開發領域及崗位的詳細解讀，完整理解大數據開發領域技術體系

centos 如何退出vim

【SpringSecurity-01】httpBasic模式登陸認證

Access和Trunk收發報文規則總結及實驗測試

深度學習入門！三種方式實現minist分類！詳細代碼實現！cnn(卷積神經網絡)，感知機，邏輯迴歸！

應該在JavaScript中使用Class嗎？

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結