uniapp原生插件開發(fā)之調(diào)用原生方法(android)

由于uniapp官方更新，最新版的插件開發(fā)請(qǐng)?zhí)D(zhuǎn)http://www.itdecent.cn/p/89afba199d69

系列文章

uniapp插件開發(fā)與發(fā)布

需要實(shí)現(xiàn)的功能：

點(diǎn)擊uniapp頁面view，傳遞參數(shù)，調(diào)用android原生代碼，然后原生代碼處理數(shù)據(jù)，返回到uniapp頁面

步驟

1.編寫uniapp的視圖頁面

<template>
    <view class="content">
        <image class="logo" src="/static/logo.png" ></image>
        <view class="text-area">
            <text class="title">{{title}}</text>
        </view>
        
        <view @click="androidNative">點(diǎn)擊調(diào)用android原生方法</view>
        
    </view>
</template>

<script>
    // 導(dǎo)入自己定義的插件js
    // var elitetyc = require('../../common/plugin.js');
    export default {
        data() {
            return {
                title: 'Hello',
                // plugins: elitetyc
            }
        },
        onLoad() {

        },
        methods: {
            // androidNative(){
            //  this.plugins.CalcNameAddNumFunction(
            //      "這段文字是uniapp傳過來的",
            //      function(result) {
            //          uni.showToast({title:JSON.stringify(result),icon:'none',duration:5000});
            //      },
            //      function(result) {
            //          uni.showToast({title:result,icon:"none",duration:5000});
            //      }
            //  );
            // }
        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .logo {
        height: 200upx;
        width: 200upx;
        margin-top: 200upx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50upx;
    }

    .text-area {
        display: flex;
        justify-content: center;
    }

    .title {
        font-size: 36upx;
        color: #8f8f94;
    }
</style>

代碼中的注釋是后面會(huì)用到的，咱們按步驟來，寫好后的界面是這樣，其實(shí)也就是創(chuàng)建一個(gè)項(xiàng)目后，加了一個(gè)view節(jié)點(diǎn)，并且增加了一個(gè)點(diǎn)擊事件


B04D6E22-4DCF-4059-862E-3A576F91F14F.png

2.在當(dāng)前uniapp目錄下新建common目錄，在目錄下新建一個(gè)js文件，我這里叫plugin.js


8C1A31BB-EDC1-4675-B77D-489523687706.png

文件的內(nèi)容如下 
! function(root, factory) {  
if (typeof exports == 'object' && typeof module != 'undefined') {  
    module.exports = factory()  
} else if (typeof define == 'function' && define.amd) {  
    define(factory)  
} else {  
    document.addEventListener('plusready', function(){  
    // 修改此處為插件命名  注釋---1
    var moduleName = 'elitetyc';   
    
    root.plus[moduleName] = factory()  
    },false);  
}  
}(this, function() {  
//在此處定義自己的方法  注釋---2
var _BARCODE = 'elitetyc';  
var plugintest = {  
    // 這里定義了一個(gè)名叫CalcNameAddNumFunction的方法，傳遞三個(gè)參數(shù)，后面兩個(gè)是回調(diào)函數(shù)
    CalcNameAddNumFunction: function(num, successCallback, errorCallback) {
        var success = typeof successCallback !== 'function' ? null : function(args) {
                successCallback(args);
            },
            fail = typeof errorCallback !== 'function' ? null : function(code) {
                errorCallback(code);
            };
      // 注釋---3
        var callbackID = plus.bridge.callbackId(success, fail);
    // 注釋---4
        return plus.bridge.exec(_BARCODE, "calcMyNameAddNum", [callbackID, num]);
    }
};  
return plugintest;  
});

注釋講解:

  • 注釋1：這里是定義插件的名稱
  • 注釋2：這里也是插件的名稱，可以看到在后面的
plus.bridge.exec(_BARCODE, "calcMyNameAddNum", [callbackID, num]);

// 官方講解有同步與異步，我這里只用了異步
void plus.bridge.execSync( String service, String action, Array<String> args );  
service: 插件類別名，對(duì)應(yīng)dcloud_properties.xml的feature name。  
action: 調(diào)用android端插件方法名稱。對(duì)應(yīng)java文件的方法名。  
args： 參數(shù)列表。  

void plus.bridge.exec( String service, String action, Array<String> args );  
service: 插件類別名，對(duì)應(yīng)dcloud_properties.xml的feature name。  
action: 調(diào)用android端插件方法名稱。對(duì)應(yīng)java文件的方法名。  
args： 參數(shù)列表。
  • 注釋3:回調(diào)ID，后面原生代碼中會(huì)用到，就好像你調(diào)用我，我有結(jié)果了，我該知道我把數(shù)據(jù)返回給誰把？這個(gè)id就是這個(gè)作用

  • 注釋4：在上面有講到過，這里需要注意的是前兩個(gè)參數(shù)，第一個(gè)參數(shù)是插件類別名，后面再原生代碼中的dcloud_properties.xml文件中會(huì)用到
    第二個(gè)參數(shù)，是android原生代碼中的方法名要一致
    3.到這里uniapp頁面差不多都編寫完成了，我們使用android studio導(dǎo)入sdk中的插件項(xiàng)目示例HBuilder-Integrate-AS


    AB229329-5534-487D-8534-D3C08566840C.png

    導(dǎo)入完成后，我們需要在項(xiàng)目中新建一個(gè)java文件，并且繼承自：StandardFeature ，我寫好的代碼如下，功能很簡(jiǎn)單，主要就是為了完成uniapp調(diào)用原生

public class ElitetycPluginTest extends StandardFeature {

    /**
     * 定義一個(gè)方法 將自己的名字加上數(shù)字進(jìn)行返回
     * @param pWebview
     * @param array
     */
    public void calcMyNameAddNum(IWebview pWebview, JSONArray array){
//        獲取回調(diào)ID
        String CallBackID = array.optString(0);
//        獲取參數(shù)并計(jì)算（這里模擬原生處理）
        String newstring = "你好，這個(gè)字符串來自android原生代碼，您傳過來的參數(shù)是:"+array.optString(1);
//        構(gòu)建回傳參數(shù)
        JSONArray newArray = new JSONArray();
        newArray.put(newstring);
//        JSUtil.execCallback(IWebview pWebViewImpl,String pCallbackId,String pMessage,int pStatus,boolean pKeepCallback)
//        參數(shù):
//        pWebViewImpl - webview對(duì)象
//        pCallbackId - 回調(diào)方法ID
//        pMessage - 回調(diào)信息
//        pStatus - 回調(diào)code值 如：OK、ERROR
//        pKeepCallback - js層回調(diào)function是否要保存

    // 第一個(gè)參數(shù)是當(dāng)前函數(shù)的入?yún)?，直接傳入?第二個(gè)是根據(jù)入?yún)@取的回調(diào)id，第三個(gè)是回調(diào)的數(shù)據(jù)，是一個(gè)json數(shù)組
        JSUtil.execCallback(pWebview,CallBackID,newstring,JSUtil.OK,false);
    }
}

這里的方法名calcMyNameAddNum需要和plugin.js中的plus.bridge.exec( String service, String action, Array<String> args ); 方法的action參數(shù)一致，必須一模一樣
4.將第一步中的注釋代碼打開，都是很簡(jiǎn)單的，就是js文件的引入，點(diǎn)擊事件的編寫

<script>
    // 導(dǎo)入自己定義的插件js
    var elitetyc = require('../../common/plugin.js');
    export default {
        data() {
            return {
                title: 'Hello',
                plugins: elitetyc
            }
        },
        onLoad() {

        },
        methods: {
// 這里是點(diǎn)擊事件的響應(yīng)
            androidNative(){
        // 點(diǎn)擊事件內(nèi)部調(diào)用了plugin.js中暴露的方法     this.plugins.CalcNameAddNumFunction(
                    "這段文字是uniapp傳過來的",
                    function(result) {
                        uni.showToast({title:JSON.stringify(result),icon:'none',duration:5000});
                    },
                    function(result) {
                        uni.showToast({title:result,icon:"none",duration:5000});
                    }
                );
            }
        }
    }
</script>

5.打開uniAPP剛才寫的plugintest這個(gè)項(xiàng)目，點(diǎn)擊發(fā)行，然后本地生成app資源


2BB96F0D-954D-4E6C-B3B7-2340C3A64B1A.png

等待完成后，在當(dāng)前項(xiàng)目的unpackage里面會(huì)生成對(duì)應(yīng)的資源包，然后拷貝到androidstudio項(xiàng)目的assets的apps目錄下，一定要從帶appid那一層拷貝，拷貝后的目錄


854D2E66-3BE1-4A6E-B5C7-8966761F1FE2.png

6.修改配置文件
  • 修改assets目錄下的data目錄下的dclould_control.xml文件appid修改為，剛才自己uniapp的appid
  • 修改dclould_properties.xml ，在里面新建
<feature name="elitetyc" value="com.example.H5PlusPlugin.ElitetycPluginTest"/>

然后再androidstudio運(yùn)行當(dāng)前項(xiàng)目，然后點(diǎn)擊視圖，就可以看到toast彈窗


D9A6598D-BE68-449E-8CA1-39D952D48EAB.png
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 原文：http://gold.xitu.io/entry/57e34d6bd2030900691e9ad7/pro...
    AiPuff閱讀 2,548評(píng)論 0贊 3
  • 微信應(yīng)用號(hào)（小程序，「應(yīng)用號(hào)」的新稱呼）終于來了！ 目前還處于內(nèi)測(cè)階段，微信只邀請(qǐng)了部分企業(yè)參與封測(cè)。想必大家都關(guān)...
    四光年閱讀 8,636評(píng)論 3贊 30
  • 忍于行。在我的墓前悲泣葬于完美世界中不完美的那部分被彎曲的意志指引到終點(diǎn)那里也還是未被真火焚滅的起點(diǎn)預(yù)言還藏在所羅...
    鱷冰魚閱讀 2,538評(píng)論 56贊 99
  • 6.9，晚。 明天是個(gè)特別的日子。 陳先生明天休假，明天剛好是我的生日。 自從認(rèn)識(shí)陳先生，每年我的生日都是在他家過...
    瑤瑤媽_bb6b閱讀 261評(píng)論 2贊 2
  • 原來我很小人 這學(xué)期思想上過的安逸了，思維放松了，反思也少之又少，以至于自己走歪了都不自知。 ...
    魏杰_a179閱讀 275評(píng)論 0贊 6

友情鏈接更多精彩內(nèi)容