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 touniappin theHBuilderXproject of the plug-in tocomponents/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# inUniPluginJavaThe method of ##runCustomFun, which receives two parameters:argsandcallbackContext.

argsis the input parameter of the plug-in method. TheJSONtype parameter fromJSis used here. InrunCustomFunwe only obtain theparamfield in the first object for subsequent processing.

callbackContextis used when we call theJScallback method in the plug-in. Here we use thecallbackContext.successmethod to call back a string type value, which can be obtained through thesuccesscallback method inJS. We have implemented thejava

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

uniapp. Here we use theuni.requireNativePluginmethod to create apromiseobject, And use the callback parameterpromiseCallbackto expose thepluginmethod.

/** * 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.requireNativePluginmethod to map the native plug-in, and put the returnedpromiseobject andpromiseCallbackTheresolvemethod is associated. After the mapping is successful, we expose the plug-in topromiseCallbackto facilitate subsequent calls.

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

vuefile as follows:

mountedlife cycle function, we passthis.$plugin.thenmethod synchronously obtains the plug-in instance, thereby calling the plug-in method. Inthen, we first call theplugin.runCustomFunmethod to execute therunCustomFunmethod in the plugin. After it is completed, we passcallbackContext.successThe method returns the result value, and usesmessageto display the return value in thevuecomponent. At the same time, the returned value is printed on the console to facilitate debugging during development.

uniappdevelopment. This article mainly introduces how to call native plug-ins inuniappMethods. 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!