Android uni-app封裝原生插件

本文轉載自查看原文 2020-07-31 16:41 6281 Android

Android uni-app封裝原生插件

uni-app是什么?

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

如果你還沒有了解uni-app是什么：點擊這里：這篇文章舉例說明。。。

uni-app的特點

跨平台更多
- 真正做到“一套代碼、多端發行”！
- 條件編譯：優雅的在一個項目里調用不同平台的特色功能！
運行體驗好
- 組件、api與微信小程序一致
- 兼容weex原生渲染
通過技術棧，學習成本低
- vue的語法、微信小程序的api
- 內嵌mpvue
開放生態，組件更豐富
- 支持通過npm安裝第三方包
- 支持微信小程序自定義組件及SDK
- 兼容mpvue組件及項目
- App端支持和原生混合編碼
- DCloud將發布插件市場

uni-app封裝原生插件

1.Android離線SDK下載：

點擊下載，兩個SDK均可。

下載完成，解壓備用：

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:25.3.1"
 compileOnly "com.android.support:support-v4:25.3.1"
 compileOnly "com.android.support:appcompat-v7:25.3.1"
 implementation 'com.alibaba:fastjson:1.1.46.android'   //一會會用到fastjson

添加完成如下圖所示：

另外把導入的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!

官網文檔提醒：

工程gradle配置的為gradle-4.6-all版本，使用的是新版本的依賴方式。如果您使用的是老版本的gradle，可點擊鏈接進行修改依賴方式。

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);
    }
}

接下來在本地注冊插件（一）：

在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接口)

注冊完畢，開始打包插件

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