uniappオリジナルプラグインはjsメソッドを実行します

はじめに

uniapp は、マルチターミナルの迅速な開発をサポートする非常に優れたクロスプラットフォーム開発フレームワークです。実際のプロジェクト開発では必然的にネイティブプラグインを使用する必要があり、場合によってはネイティブプラグインが公開するメソッドをJSで実行する必要があるのですが、これをどのように実現するのでしょうか。以下は私の実際の経験ですので、皆様のお役に立てれば幸いです。

Text

まず、プラグインの 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 の 2 つのパラメータを受け取ります。

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 ライフ サイクル関数では、次のようにします。 passthis.$plugin.then メソッドはプラグイン インスタンスを同期的に取得し、それによってプラグイン メソッドを呼び出します。 then では、まず plugin.runCustomFun メソッドを呼び出して、プラグイン内の runCustomFun メソッドを実行します。完了後、callbackContext を渡します。 success このメソッドは結果値を返し、message を使用して戻り値を vue コンポーネントに表示します。同時に、開発中のデバッグを容易にするために、戻り値がコンソールに出力されます。

概要

uniapp 開発においてネイティブ プラグインの使用は非常に重要な機能です。この記事では主に uniapp# でネイティブ プラグインを呼び出す方法を紹介します。 ## メソッド。上記の紹介により、この関数の実装方法と詳細をより明確に理解できるようになります。同時に、実際のニーズに基づいてコードをさらに改善できることを願っています。

以上がuniappオリジナルプラグインはjsメソッドを実行しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。