Le plug-in original uniapp exécute la méthode js

Preface

uniapp est un très excellent framework de développement multiplateforme qui prend en charge le développement rapide multi-terminal. Dans le développement réel d'un projet, nous devons inévitablement utiliser des plug-ins natifs, et parfois nous devons exécuter les méthodes exposées par les plug-ins natifs dans JS, alors comment y parvenir ? Ce qui suit est mon expérience pratique, j'espère qu'elle sera utile à tout le monde.

Text

Tout d'abord, nous devons écrire les méthodes qui doivent être exposées à uniapp dans le HBuilderX du plug-in projet components/customPlugin/src/android_trunk/uniPluginJava/UniPluginJava.java, comme indiqué ci-dessous : 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

Le code ci-dessus est similaire aux autres méthodes du plug -in, dans UniPluginJava Ajoutez une méthode nommée runCustomFun, qui reçoit deux paramètres : args et callbackContext. #🎜🎜##🎜🎜#args est le paramètre d'entrée de la méthode du plug-in. Ici, le paramètre de type JSON de JS est. utilisé. Dans runCustomFun nous obtenons uniquement le champ param dans le premier objet pour un traitement ultérieur. #🎜🎜##🎜🎜#callbackContext est utilisé lorsque nous appelons la méthode de rappel JS dans le plug-in. Ici, nous utilisons la méthode callbackContext.success pour rappeler une valeur de type chaîne, qui peut être obtenue via la méthode de rappel success dans JS. #🎜🎜##🎜🎜#Nous avons implémenté le code java dans le plug-in, nous devons donc appeler cette méthode dans uniapp. #🎜🎜##🎜🎜#Nous devons d'abord mapper la méthode du plug-in à la méthode disponible dans uniapp. Ici, nous utilisons la méthode uni.requireNativePlugin pour créer un. promise et exposez la méthode <code>plugin à l'aide du paramètre de rappel promiseCallback. #🎜🎜#rrreee#🎜🎜#Dans le code ci-dessus, nous utilisons d'abord la méthode uni.requireNativePlugin pour mapper le plug-in natif, et renvoyons l'objet promise et promiseCallback est associé à la méthode resolve. Une fois le mappage réussi, nous exposons le plug-in à promiseCallback pour les appels suivants. #🎜🎜##🎜🎜#Nous implémentons l'enregistrement et l'exposition du plug-in via Vue.prototype.$plugin.install, et enfin l'exposons à Vue objet, c'est-à-dire this.$plugin pour une utilisation facile dans le code ultérieur. #🎜🎜##🎜🎜#Ensuite, nous pouvons appeler la méthode du plug-in dans le fichier vue comme suit : #🎜🎜#rrreee#🎜🎜#Dans le monté cycle de vie Dans la fonction, nous obtenons l'instance du plug-in de manière synchrone via la méthode this.$plugin.then pour appeler la méthode du plug-in. Dans then, nous appelons d'abord la méthode plugin.runCustomFun pour exécuter la méthode runCustomFun dans le plug-in. Une fois terminée, nous transmettons. La méthode callbackContext.success renvoie la valeur du résultat et utilise message pour afficher la valeur de retour dans le composant vue. Dans le même temps, la valeur renvoyée est imprimée sur la console pour faciliter le débogage pendant le développement. #🎜🎜##🎜🎜#Summary#🎜🎜##🎜🎜#L'utilisation de plug-ins natifs est une fonctionnalité très importante dans le développement de uniapp. Cet article présente principalement comment utiliser les plug-ins natifs. ins dans uniapp > Appelez la méthode dans le plug-in natif. Grâce à l'introduction ci-dessus, vous devriez avoir une compréhension plus claire de la façon de mettre en œuvre cette fonction et de certains détails. Dans le même temps, j'espère également que vous pourrez améliorer davantage votre code en fonction des besoins réels. #🎜🎜#

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!