pemalam asal uniapp melaksanakan kaedah js

Kata Pengantar

uniapp ialah rangka kerja pembangunan merentas platform yang sangat baik yang menyokong pembangunan pesat berbilang terminal. Dalam pembangunan projek sebenar, kita tidak dapat tidak perlu menggunakan pemalam asli, dan kadangkala kita perlu melaksanakan kaedah yang didedahkan oleh pemalam asli dalam JS, jadi bagaimana untuk mencapai ini? Berikut adalah pengalaman praktikal saya, saya harap ia akan membantu semua orang.

Teks

Pertama, kita perlu menulis kaedah yang perlu didedahkan kepada HBuilderX dalam projek uniapp pemalam ke dalam components/customPlugin/src/android_trunk/uniPluginJava/UniPluginJava.java, seperti ditunjukkan di bawah:

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

Kod di atas adalah serupa dengan kaedah lain dalam pemalam Tambah kaedah bernama UniPluginJava dalam runCustomFun, yang menerima dua parameter: args dan callbackContext.

args ialah parameter input kaedah pemalam Parameter jenis JS daripada JSON digunakan di sini. Dalam runCustomFun kami hanya memperoleh medan param dalam objek pertama untuk pemprosesan seterusnya.

callbackContext ialah perkara yang kami gunakan semasa memanggil JS kaedah panggil balik dalam pemalam. Di sini kami menggunakan kaedah callbackContext.success untuk memanggil semula nilai jenis rentetan, yang boleh diperoleh melalui kaedah JS panggil balik dalam success. Kami telah melaksanakan kod

dalam pemalam

java, jadi kami perlu memanggil kaedah ini dalam uniapp.

Kami terlebih dahulu perlu memetakan kaedah pemalam kepada kaedah yang tersedia dalam uniapp Di sini kami menggunakan kaedah uni.requireNativePlugin untuk mencipta objek promise dan menggunakan parameter panggil balik promiseCallback untuk mendedahkan <.> kaedah. 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
}

Dalam kod di atas, kami mula-mula menggunakan kaedah

untuk memetakan pemalam asli dan mengaitkan objek uni.requireNativePlugin yang dikembalikan dengan kaedah promise dalam promiseCallback. Selepas pemetaan berjaya, kami mendedahkan pemalam kepada resolve untuk memudahkan panggilan seterusnya. promiseCallback

Kami melaksanakan pendaftaran dan pendedahan pemalam melalui

, dan akhirnya mendedahkannya kepada objek Vue.prototype.$plugin.install, iaitu, Vue, supaya ia boleh digunakan dalam kod seterusnya. this.$plugin

Seterusnya, kita boleh memanggil kaedah pemalam dalam fail

seperti berikut: 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>

Dalam fungsi kitaran hayat

, kita memperoleh contoh pemalam secara serentak melalui kaedah mounted, Dengan itu memanggil kaedah pemalam. Dalam this.$plugin.then, kami mula-mula memanggil kaedah then untuk melaksanakan kaedah plugin.runCustomFun dalam pemalam Selepas ia selesai, kami mengembalikan nilai hasil melalui kaedah runCustomFun dan memaparkannya dengan callbackContext.success dalam. komponen vue nilai Pulangan. Pada masa yang sama, nilai yang dikembalikan dicetak pada konsol untuk memudahkan penyahpepijatan semasa pembangunan. message

Ringkasan

Menggunakan pemalam asli ialah ciri yang sangat penting dalam pembangunan

Artikel ini terutamanya memperkenalkan cara memanggil kaedah dalam pemalam asli dalam uniapp. Melalui pengenalan di atas, anda seharusnya mempunyai pemahaman yang lebih jelas tentang cara melaksanakan fungsi ini dan beberapa butiran. Pada masa yang sama, saya juga berharap anda boleh menambah baik kod anda berdasarkan keperluan sebenar. uniapp

Atas ialah kandungan terperinci pemalam asal uniapp melaksanakan kaedah js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!