uniapp original plug-in executes js method

Preface

uniapp is a very excellent cross-platform development framework that supports multi-terminal rapid development. In actual project development, we inevitably need to use native plug-ins, and sometimes we need to execute the methods exposed by native plug-ins in JS, so how to achieve this? The following is my practical experience, I hope it will be helpful to everyone.

Text

First, we need to write the methods that need to be exposed to uniapp in the HBuilderX project of the plug-in to components/customPlugin /src/android_trunk/uniPluginJava/UniPluginJava.java, as shown below:

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();
        }
    }
}

The above code is similar to other methods in the plug-in, add a file named# in UniPluginJava The method of ##runCustomFun, which receives two parameters: args and callbackContext.

args is the input parameter of the plug-in method. The JSON type parameter from JS is used here. In runCustomFun we only obtain the param field in the first object for subsequent processing.

callbackContext is used when we call the JS callback method in the plug-in. Here we use the callbackContext.success method to call back a string type value, which can be obtained through the success callback method in JS. We have implemented the java

code in the

plug-in, then we need to call this method in uniapp.

We first need to map the plug-in method to the method available in

uniapp. Here we use the uni.requireNativePlugin method to create a promise object, And use the callback parameter promiseCallback to expose the plugin method.

/**
 * 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
}

In the above code, we first use the

uni.requireNativePlugin method to map the native plug-in, and put the returned promise object and promiseCallback The resolve method is associated. After the mapping is successful, we expose the plug-in to promiseCallback to facilitate subsequent calls.

We implement the registration and exposure of the plug-in through

Vue.prototype.$plugin.install, and finally expose it to the Vue object, that is, this. $plugin for easy use in subsequent code.

Next, we can call the plug-in method in the

vue file as follows:

<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>

In the

mounted life cycle function, we passthis.$plugin.then method synchronously obtains the plug-in instance, thereby calling the plug-in method. In then, we first call the plugin.runCustomFun method to execute the runCustomFun method in the plugin. After it is completed, we pass callbackContext.success The method returns the result value, and uses message to display the return value in the vue component. At the same time, the returned value is printed on the console to facilitate debugging during development.

Summary

Using native plug-ins is a very important function in

uniapp development. This article mainly introduces how to call native plug-ins in uniapp Methods. Through the above introduction, you should have a clearer understanding of how to implement this function and some details. At the same time, I also hope that you can further improve your code based on actual needs.

The above is the detailed content of uniapp original plug-in executes js method. For more information, please follow other related articles on the PHP Chinese website!