前言
uniapp 是一個非常優秀的跨平台開發框架,支援多端快速開發。實際專案開發中我們難免需要使用原生插件,而有時候我們需要在 JS 中執行原生插件暴露出來的方法,那麼該如何實現呢?以下是我的實踐心得,希望對大家有幫助。
正文
首先,我們需要在插件的HBuilderX
專案中將需要暴露給uniapp
的方法寫入components/customPlugin /src/android_trunk/uniPluginJava/UniPluginJava.java
中,如下所示:
1 2 3 4 5 6 7 8 9 10 11 12 |
|
上述程式碼中和外掛程式中其他方法類似,在UniPluginJava
中新增一個名為runCustomFun
的方法,該方法接收兩個參數:args
和callbackContext
。
args
是外掛程式方法的入參,這裡使用來自於 JS
的 JSON
類型參數。在 runCustomFun
中我們只取得了第一個物件中的 param
字段,用於後續處理。
callbackContext
是我們在外掛程式中呼叫 JS
回呼方法時使用的。這裡我們使用 callbackContext.success
方法回呼一個字串類型的值,在 JS
中可以透過 success
回呼方法取得。
外掛程式中的 java
程式碼我們已經實現,那麼我們需要在 uniapp
中呼叫該方法。
我們首先需要將插件方法對應成uniapp
中可用的方法,這裡我們使用uni.requireNativePlugin
方法建立一個promise
對象,並使用回呼參數promiseCallback
暴露plugin
方法。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
|
上述程式碼中,我們首先使用uni.requireNativePlugin
方法來對應原生插件,並將其傳回的promise
物件和promiseCallback
中的resolve
方法關聯起來。在映射成功後,我們將外掛程式暴露到了 promiseCallback
中,以便於之後的呼叫。
我們透過Vue.prototype.$plugin.install
的方式實現插件的註冊和暴露,最終暴露到Vue
物件中,即this. $plugin
,以便於在後續的程式碼中使用。
接下來,我們可以在vue
檔案中如下方式呼叫外掛方法:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
|
在mounted
生命週期函數中,我們透過this.$plugin.then
方法同步取得插件實例,從而呼叫插件方法。在then
中,我們先呼叫plugin.runCustomFun
方法來執行外掛程式中的runCustomFun
方法,在完成後,我們透過callbackContext.success
方法傳回結果值,並在vue
元件中以message
顯示傳回值。同時,在控制台列印出傳回的值以方便在開發中除錯。
總結
使用原生外掛程式是uniapp
開發中非常重要的功能,本文主要介紹如何在uniapp
中呼叫原生外掛程式中的方法。透過以上的介紹,你應該對如何實現該功能以及一些細節問題會有了更清晰的認識。同時,也希望你能根據實際需求,進一步的完善自己的程式碼。
以上是uniapp原始外掛執行js方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!