uniapp原始外掛執行js方法

前言

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

正文

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

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 的方法，該方法接收兩個參數：args 和callbackContext。

args 是外掛程式方法的入參，這裡使用來自於 JS 的 JSON 類型參數。在 runCustomFun 中我們只取得了第一個物件中的 param 字段，用於後續處理。

callbackContext 是我們在外掛程式中呼叫 JS 回呼方法時使用的。這裡我們使用 callbackContext.success 方法回呼一個字串類型的值，在 JS 中可以透過 success 回呼方法取得。

外掛程式中的 java 程式碼我們已經實現，那麼我們需要在 uniapp 中呼叫該方法。

我們首先需要將插件方法對應成uniapp 中可用的方法，這裡我們使用uni.requireNativePlugin 方法建立一個promise 對象，並使用回呼參數promiseCallback 暴露plugin 方法。

/**
 * 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 檔案中如下方式呼叫外掛方法：

<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中文網其他相關文章！