前言

據(jù)廣大用戶的需求，需要把我們anyRTC的SDK，封裝到uni-App來使用，并且實(shí)現(xiàn)音視頻通話。這邊文章圖文講解一下怎么封裝原生插件，并且在下一章uni-app實(shí)現(xiàn)音視頻通話。

1.uni-app是什么？

一個(gè)使用Vue.js開發(fā)所有前端應(yīng)用框架,開發(fā)者編寫一套代碼,可發(fā)布到IOS、Android、H5、以及各種小程序（微信/支付寶/百度/頭條/QQ/釘釘）等多個(gè)平臺。

2.uni-app的特點(diǎn)

跨平臺更多

真正做到“一套代碼、多端發(fā)行”！

條件編譯：優(yōu)雅的在一個(gè)項(xiàng)目里調(diào)用不同平臺的特色功能！

運(yùn)行體驗(yàn)好

組件、api與微信小程序一致

兼容weex原生渲染

通過技術(shù)棧，學(xué)習(xí)成本低vue的語法、微信小程序的api內(nèi)嵌mpvue
開放生態(tài)，組件更豐富
支持通過npm安裝第三方包
支持微信小程序自定義組件及SDK
兼容mpvue組件及項(xiàng)目
App端支持和原生混合編碼
DCloud將發(fā)布插件市場

3.uni-app封裝原生插件

3.1 Android離線SDK下載：

點(diǎn)擊下載，兩個(gè)SDK均可。

下載完成，解壓備用：

3.2 新建Android項(xiàng)目

打開Android Studio，建立一個(gè)No Activity項(xiàng)目。在菜單欄選擇File>New>New Project

然后Next：填寫項(xiàng)目名，包名，已經(jīng)API Level。

然后Finish，為了更好的使用，我們把它轉(zhuǎn)到Project視圖。接下來創(chuàng)建開發(fā)的模塊（Module）

點(diǎn)擊File>New>New Module.

然后選擇Android Library，點(diǎn)擊Next：

自定義Library名和包名，點(diǎn)擊Finish

創(chuàng)建完畢視圖如下：

接下來打開testplugin項(xiàng)目里的build.gradle，將原生的dependencies下默認(rèn)生成的依賴注釋掉，添加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'

添加完成如下圖所示：

另外把導(dǎo)入的uniapp-release.aar插件，它是擴(kuò)展module主要依賴庫

回到剛剛創(chuàng)建的testplugin的build.gradle中，接下來進(jìn)行導(dǎo)入aar需要的配置操作：

添加：放在android{}外

repositories {
    flatDir {
        dirs 'libs'
    }
}

然后在dependencies內(nèi)添加：

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

添加完畢，如下圖：

然后 同步 Sync Now!

3.3 原生插件的開發(fā)

以擴(kuò)展Module為例，如圖創(chuàng)建類TestModule：

Module擴(kuò)展注意事項(xiàng)：

寫一個(gè)小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", "成功調(diào)用!" );
        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目錄下創(chuàng)建assets文件夾

在app>src>main>assets目錄下創(chuàng)建 dcloud_uniplugins.json 文件，然后添加：

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

方法（二）：

對創(chuàng)建的Module擴(kuò)展testplugin進(jìn)行操作，在 src>main>JAVA>插件包名(這里是com.test.testplugin)目錄下創(chuàng)建類TestModule_AppProxy

TestModule_AppProxy類要實(shí)現(xiàn)AppHookProxy接口，在onCreate（）方法中添加weex注冊相關(guān)參數(shù)或填寫插件需要在啟動時(shí)初始化的邏輯。

在hooksClass節(jié)點(diǎn)填入你創(chuàng)建的實(shí)現(xiàn)AppHookProxy接口的實(shí)體類的完整名稱 (注：有些需要初始化操作的需求可以在此處添加邏輯，無特殊操作僅使用第一種方式注冊即可無需集成AppHookProxy接口)

注冊完畢，開始打包插件

3.3.2 打包插件：

在Gradle>testplugin>Tasks>other目錄下找到assembleRelease，雙擊等待系統(tǒng)編譯出擴(kuò)展module的aar文件

注意：官方文檔中是

選擇

Gradle--->插件module--->Tasks--->build--->assembleRelease編譯module的aar文件

，在新版本的AndroidStudio中,assembleRelease和assembleDebug被轉(zhuǎn)移到other目錄下。

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

4.HBuilderX導(dǎo)入和使用本地插件

創(chuàng)建uni-app默認(rèn)項(xiàng)目TestModule

參照官方文檔中的目錄規(guī)范，將剛才打包的插件放到nativeplugins>插件文件夾名稱（我的是Test-Module）>android目錄下，沒有相關(guān)目錄就一步步創(chuàng)建。

創(chuàng)建package.json——uni原生插件描述文件，放到插件文件夾名稱目錄下，與android文件夾并列

注意：插件標(biāo)識id必須在對應(yīng)android和ios節(jié)點(diǎn)下plugins中進(jìn)行注冊，與name字段值一致。name下的class是注冊插件的類名，也要填對。

這里因?yàn)橹挥衋ndroid插件，就把ios節(jié)點(diǎn)全部刪掉，在這里直接注釋的話是無效的。

還有要注意的一點(diǎn)：插件標(biāo)識id一定要與插件文件夾名稱一致，不然在云打包時(shí)會提示 插件不合法：該插件在nativePlugins目錄下不存在。

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

勾選并確認(rèn)

parameters信息根據(jù)需求配置

接下來在HBuilderX內(nèi)對項(xiàng)目中的index.vue文件（在pages>index目錄下）做出一定更改，以便后續(xù)測試開發(fā)的原生插件。

<template>
    <view class="container">
        姓名<input v-model="name" placeholder="點(diǎn)此編輯姓名" >
        <br>
        年齡<input v-model="age" placeholder="點(diǎn)此編輯年齡" >
        <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.運(yùn)行項(xiàng)目

打包自定義基座：

運(yùn)行(R)>運(yùn)行到手機(jī)或模擬器(N)>制作自定義調(diào)試基座(P)

配置App云端打包信息：

云端打包：

提交到云端服務(wù)器：

打包成功：

打包成功后需要在下圖位置確保開啟自定義調(diào)試基座功能：

啟動模擬器，或者真機(jī)運(yùn)行：

進(jìn)入測試項(xiàng)目：

輸入姓名tom和年齡9（大于0小于10前面自動補(bǔ)0）測試插件，點(diǎn)擊提交

反饋提交結(jié)果

把年齡改為31（插件設(shè)置年齡范圍為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節(jié)點(diǎn)必須添加-->
    <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 引入打包資源

進(jìn)入下載好后的安卓離線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

四個(gè)文件，復(fù)制到自定義的新文件夾方便使用

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

下找到data文件夾，打開可以發(fā)現(xiàn)下圖幾個(gè)文件。

和上面的aar包放在同一個(gè)文件里，方便取用！

6.3 離線打包

如圖，在發(fā)行(P)選項(xiàng)>原生APP-本地打包（L）中選擇生成本地打包App資源（R）。

顯示導(dǎo)出成功，順著路徑將自己項(xiàng)目id名的文件夾拷貝，放到上一步自定義的文件夾下，方便使用。

將離線打包出來的文件和上面的文件一樣放在一個(gè)目錄，方便取用！我的是__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

三個(gè)文件復(fù)制粘貼到libs目錄下

（上面添加依賴時(shí)已經(jīng)導(dǎo)入uniapp-release.aar了）

接下來在android{}內(nèi)添加：

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所需庫-----------------------結(jié)束*/
// 基座需要，必須添加
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為構(gòu)建工具版本，applicationId為創(chuàng)建時(shí)的包名，minSdkVersion為兼容最小的版本號，targetSdkVersion為目標(biāo)版本，有興趣的可以百度一下三者之間的區(qū)別和聯(lián)系。

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

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

然后同步處理

同步完成

把剛剛轉(zhuǎn)移到自定義文件夾下的data文件夾拷貝到app>src>main>assets目錄文件夾下。

繼續(xù)在剛剛創(chuàng)建的assets文件夾下創(chuàng)建apps文件夾，把剛剛進(jìn)行本地打包資源處理后的文件（我的是__UNI__179390F）拷貝到apps文件夾下。

6.5 自定義基座的配置

在app目錄下，將assets下apps文件夾中的manifest.json文件和data文件夾中的dcloud_control.xml文件打開，確保manifest.json中的id和dcloud_control.xml中的appid一致（不一致會出現(xiàn)白屏等狀況）。

并設(shè)置根節(jié)點(diǎn)的debug和syncDebug為true

條件配置完畢

6.6 名稱配置

在app>src>main>res>values配置strings.xml文件，打開xml文件，與剛剛引入本地打包資源的里的manifest.json文件比較，發(fā)現(xiàn)名字不一致，遂把strings.xml里的name改為“TestModule”。

（注：manifest.json文件在

assets>apps>__UNI__179390F>www目錄下）