Das ursprüngliche Uniapp-Plug-in führt die js-Methode aus

Vorwort

uniapp ist ein hervorragendes plattformübergreifendes Entwicklungsframework, das die schnelle Entwicklung mehrerer Terminals unterstützt. In der tatsächlichen Projektentwicklung müssen wir zwangsläufig native Plug-Ins verwenden, und manchmal müssen wir die von nativen Plug-Ins bereitgestellten Methoden in JS ausführen. Wie kann dies also erreicht werden? Das Folgende ist meine praktische Erfahrung, ich hoffe, dass sie für alle hilfreich sein wird.

Text

Zuerst müssen wir die Methoden, die für uniapp im HBuilderX-Projekt des Plug-Ins verfügbar gemacht werden müssen, in components/customPlugin/src schreiben /android_trunk/uniPluginJava /UniPluginJava.java, wie unten gezeigt: 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

Der obige Code ähnelt anderen Methoden im Plug-in. Fügen Sie in eine Methode mit dem Namen <code>runCustomFun hinzu UniPluginJava-Methode, die zwei Parameter empfängt: args und callbackContext. 🎜🎜args ist der Eingabeparameter der Plug-in-Methode. Hier wird der Typparameter JSON von JS verwendet. In runCustomFun erhalten wir nur das Feld param im ersten Objekt für die anschließende Verarbeitung. 🎜🎜callbackContext wird verwendet, wenn wir die Callback-Methode JS im Plug-in aufrufen. Hier verwenden wir die Methode callbackContext.success, um einen String-Typ-Wert zurückzurufen, der über die Rückrufmethode success in JS abgerufen werden kann. 🎜🎜Wir haben den java-Code im Plug-in implementiert, daher müssen wir diese Methode in uniapp aufrufen. 🎜🎜Wir müssen zuerst die Plug-in-Methode der in uniapp verfügbaren Methode zuordnen. Hier verwenden wir die Methode uni.requireNativePlugin, um ein promise zu erstellen. code>-Objekt und machen Sie die <code>plugin-Methode mithilfe des Rückrufparameters promiseCallback verfügbar. 🎜rrreee🎜Im obigen Code verwenden wir zunächst die Methode uni.requireNativePlugin, um das native Plug-in zuzuordnen, und geben das Objekt promise und den promiseCallback <code>resolve-Methode ist zugeordnet. Nachdem die Zuordnung erfolgreich war, machen wir das Plug-in für nachfolgende Aufrufe für promiseCallback verfügbar. 🎜🎜Wir implementieren die Registrierung und Offenlegung des Plug-Ins über Vue.prototype.$plugin.install und stellen es schließlich dem Vue-Objekt zur Verfügung, d. h. this.$plugin zur einfachen Verwendung in nachfolgendem Code. 🎜🎜Als nächstes können wir die Plug-in-Methode in der vue-Datei wie folgt aufrufen: 🎜rrreee🎜In der Lebenszyklusfunktion mount übergeben wir this. $plugin Die Methode .then ruft synchron die Plug-In-Instanz ab, um die Plug-In-Methode aufzurufen. In then rufen wir zunächst die Methode runCustomFun auf, um die Methode runCustomFun im Plug-in auszuführen Die callbackContext.success-Methode gibt den Ergebniswert zurück und verwendet message, um den Rückgabewert in der vue-Komponente anzuzeigen. Gleichzeitig wird der zurückgegebene Wert auf der Konsole ausgegeben, um das Debuggen während der Entwicklung zu erleichtern. 🎜🎜Zusammenfassung🎜🎜Die Verwendung nativer Plug-Ins ist eine sehr wichtige Funktion bei der Entwicklung von uniapp. In diesem Artikel wird hauptsächlich das Aufrufen von Methoden in nativen Plug-Ins in uniapp vorgestellt . Durch die obige Einführung sollten Sie ein klareres Verständnis für die Implementierung dieser Funktion und einiger Details erhalten. Gleichzeitig hoffe ich auch, dass Sie Ihren Code basierend auf den tatsächlichen Anforderungen weiter verbessern können. 🎜

Das obige ist der detaillierte Inhalt vonDas ursprüngliche Uniapp-Plug-in führt die js-Methode aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!