首頁 > web前端 > uni-app > uniapp原始外掛執行js方法

uniapp原始外掛執行js方法

王林
發布: 2023-05-22 10:13:37
原創
1487 人瀏覽過

前言

uniapp 是一個非常優秀的跨平台開發框架,支援多端快速開發。實際專案開發中我們難免需要使用原生插件,而有時候我們需要在 JS 中執行原生插件暴露出來的方法,那麼該如何實現呢?以下是我的實踐心得,希望對大家有幫助。

正文

首先,我們需要在插件的HBuilderX 專案中將需要暴露給uniapp 的方法寫入components/customPlugin /src/android_trunk/uniPluginJava/UniPluginJava.java 中,如下所示:

1

2

3

4

5

6

7

8

9

10

11

12

public class UniPluginJava extends AbsPlgt {

    public void runCustomFun(JSONArray args, CallbackContext callbackContext) {

        try {

            JSONObject arg_object = args.getJSONObject(0);

            String param = arg_object.optString("param");

            // 利用 callbackContext 调用 JS 回调方法

            callbackContext.success("我是回调参数: " + param);

        } catch (Exception e) {

            e.toString();

        }

    }

}

登入後複製

上述程式碼中和外掛程式中其他方法類似,在UniPluginJava 中新增一個名為runCustomFun 的方法,該方法接收兩個參數:argscallbackContext

args 是外掛程式方法的入參,這裡使用來自於 JSJSON 類型參數。在 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

/**

 * uniapp plugin 安装

 * @param {*} Vue

 * @param {*} options

 */

function install(Vue, options) {

    // 创建 `promise` 对象,等待映射(`Promise` 是 ES6 中新增的语法,用于异步编程)

    const { promise, resolve } = createPromiseCallback()

     

    // 映射插件中的方法

    uni.requireNativePlugin('uniPlugin').then(plugin => {

      const cb = (err, res) => {

        if (err) {

          console.error(err)

          return

        }

        console.log('js调用native,返回结果:', res)

      }

      plugin.runCustomFun({param: '参数1'}, cb)

       

      // 暴露 `plugin` 方法,方便调用

      resolve(plugin)

    }).catch(err => {

      console.error(err)

    })

     

    Vue.prototype.$plugin = {}

    Vue.prototype.$plugin.install = function (Vue, options) {

      Object.defineProperty(Vue.prototype, '$plugin', {

        get: function () {

          console.log('等待 Native Plugin 安装...')

          return promise

        }

      })

    }

}

 

export default {

  version: '0.0.1',

  install

}

登入後複製

上述程式碼中,我們首先使用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

<template>

  <div class="container">

    <view class="content">

      <text class="text">{{ message }}</text>

      <text @tap="onButtonClick" class="button">Click me</text>

    </view>

  </div>

</template>

 

<script>

  export default {

    name: 'Demo',

 

    data() {

      return {

        message: ''

      }

    },

 

    mounted() {

      const self = this

 

      this.$plugin.then(plugin => {

        // 调用插件方法并执行回调函数

        return new Promise((resolve, reject) => {

          plugin.runCustomFun({param: 'uniapp 调用 Native Plugin'}).then(res => {

            // 此处回调方法中的 `res` 是由 Native Plugin 中的 `callbackContext.success` 返回的

            self.message = res

            console.log(`使用 uniapp 调用 Native Plugin,返回参数:${res}`)

            resolve()

          }).catch(err => {

            console.error(err)

            reject()

          })

        })

      })

    }

 

    methods: {

      onButtonClick() {

        console.log('button clicked')

      }

    }

  }

</script>

登入後複製

mounted 生命週期函數中,我們透過this.$plugin.then 方法同步取得插件實例,從而呼叫插件方法。在then 中,我們先呼叫plugin.runCustomFun 方法來執行外掛程式中的runCustomFun 方法,在完成後,我們透過callbackContext.success 方法傳回結果值,並在vue 元件中以message 顯示傳回值。同時,在控制台列印出傳回的值以方便在開發中除錯。

總結

使用原生外掛程式是uniapp 開發中非常重要的功能,本文主要介紹如何在uniapp 中呼叫原生外掛程式中的方法。透過以上的介紹,你應該對如何實現該功能以及一些細節問題會有了更清晰的認識。同時,也希望你能根據實際需求,進一步的完善自己的程式碼。

以上是uniapp原始外掛執行js方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板