uniapp 원래 플러그인은 js 메소드를 실행합니다.

머리말

uniapp은 멀티 터미널 신속한 개발을 지원하는 매우 뛰어난 크로스 플랫폼 개발 프레임워크입니다. 실제 프로젝트 개발에서는 필연적으로 네이티브 플러그인을 사용해야 하고, 때로는 JS에서 네이티브 플러그인에 의해 노출된 메소드를 실행해야 하는데 어떻게 해야 할까요? 다음은 나의 실제 경험입니다. 모든 사람에게 도움이 되기를 바랍니다.

Text

먼저 플러그인의 HBuilderX 프로젝트에서 uniapp에 노출되어야 하는 메소드를 comComponents/customPlugin/src에 작성해야 합니다. /android_trunk/uniPluginJava /UniPluginJava.java, 아래와 같이: 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 开发中非常重要的一个功能，本文主要介绍了如何在 uniapprrreee

위 코드는 플러그인의 다른 메소드와 유사합니다. 에 <code>runCustomFun이라는 메소드를 추가합니다. UniPluginJava 두 개의 매개변수인 args 및 callbackContext를 수신하는 메소드. 🎜🎜args는 플러그인 메소드의 입력 매개변수입니다. 여기서는 JS의 JSON 유형 매개변수가 사용됩니다. runCustomFun에서는 후속 처리를 위해 첫 번째 개체의 param 필드만 가져옵니다. 🎜🎜callbackContext는 플러그인에서 JS 콜백 메서드를 호출할 때 사용됩니다. 여기서는 callbackContext.success 메서드를 사용하여 JS의 success 콜백 메서드를 통해 얻을 수 있는 문자열 유형 값을 콜백합니다. 🎜🎜플러그인에 java 코드를 구현했으므로 uniapp에서 이 메소드를 호출해야 합니다. 🎜🎜먼저 플러그인 메소드를 uniapp에서 사용 가능한 메소드에 매핑해야 합니다. 여기서는 uni.requireNativePlugin 메소드를 사용하여 promise를 생성합니다. code> 객체, 콜백 매개변수 promiseCallback을 사용하여 plugin 메소드를 노출합니다. 🎜rrreee🎜위 코드에서는 먼저 uni.requireNativePlugin 메서드를 사용하여 네이티브 플러그인을 매핑하고 promise 개체와 promiseCallback <code>resolve 메소드가 연결되어 있습니다. 매핑이 성공한 후 후속 호출을 위해 플러그인을 promiseCallback에 노출합니다. 🎜🎜 Vue.prototype.$plugin.install을 통해 플러그인 등록 및 노출을 구현하고, 마지막으로 Vue 객체, 즉 this.$plugin을 사용하면 후속 코드에서 쉽게 사용할 수 있습니다. 🎜🎜다음으로 vue 파일에서 다음과 같이 플러그인 메소드를 호출할 수 있습니다. 🎜rrreee🎜 mounted 라이프 사이클 함수에서 this를 전달합니다. $plugin .then 메소드는 플러그인 메소드를 호출하기 위해 플러그인 인스턴스를 동기적으로 획득합니다. then에서는 먼저 plugin.runCustomFun 메서드를 호출하여 플러그인의 runCustomFun 메서드를 실행한 후 전달합니다. callbackContext.success 메서드는 결과 값을 반환하고 message를 사용하여 vue 구성 요소에 반환 값을 표시합니다. 동시에 반환된 값은 개발 중에 디버깅을 용이하게 하기 위해 콘솔에 인쇄됩니다. 🎜🎜요약🎜🎜네이티브 플러그인을 사용하는 것은 uniapp 개발에 있어 매우 중요한 기능입니다. 이번 글에서는 주로 uniapp에서 네이티브 플러그인의 메소드를 호출하는 방법을 소개합니다. . 위의 소개를 통해 이 기능을 구현하는 방법과 몇 가지 세부 사항을 보다 명확하게 이해해야 합니다. 동시에 실제 요구 사항에 따라 코드를 더욱 개선할 수 있기를 바랍니다. 🎜

위 내용은 uniapp 원래 플러그인은 js 메소드를 실행합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!