2023uniapp原始插件执行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方法的详细内容，更多请关注zzsucai.com其它相关文章！