首頁 web前端 uni-app uniapp原始外掛執行js方法

uniapp原始外掛執行js方法

May 22, 2023 am 10:13 AM

前言

uniapp 是一個非常優秀的跨平台開發框架,支援多端快速開發。實際專案開發中我們難免需要使用原生插件,而有時候我們需要在 JS 中執行原生插件暴露出來的方法,那麼該如何實現呢?以下是我的實踐心得,希望對大家有幫助。

正文

首先,我們需要在插件的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 的方法,該方法接收兩個參數:argscallbackContext

args 是外掛程式方法的入參,這裡使用來自於 JSJSON 類型參數。在 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 開發中非常重要的功能,本文主要介紹如何在uniapp 中呼叫原生外掛程式中的方法。透過以上的介紹,你應該對如何實現該功能以及一些細節問題會有了更清晰的認識。同時,也希望你能根據實際需求,進一步的完善自己的程式碼。

以上是uniapp原始外掛執行js方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1653
14
CakePHP 教程
1413
52
Laravel 教程
1304
25
PHP教程
1251
29
C# 教程
1224
24