笔记大全

聊聊关于uniapp中定义原生方法的方法

更新时间：2023-10-06

1. 在uniapp中定义原生方法

在uniapp中定义原生方法，首先需要在uni-app项目中新建一个plugin文件夹，然后在该文件夹下创建一个android和ios文件夹，用于放置对应平台的原生代码。

plugin
  - android
    - xxxx.java
  - ios
    - xxxx.h

在这里以android为例，我们需要在xxxx.java中编写对应的java代码，并且需要加上相应的注解。下面是一个简单的示例：

package com.xxx.xxx;

import android.content.Context;
import android.widget.Toast;
import io.dcloud.application.DCloudApplication;
import io.dcloud.application.IDCloudApplication;
import io.dcloud.feature.internal.sdk.SDK;

import com.taobao.weex.annotation.JSMethod;
import com.taobao.weex.bridge.JSCallback;

public class MyPlugin {
    @JSMethod(uiThread = true)
    public void showToast(String msg, JSCallback callback) {
        Context context = (Context) SDK.obtainApplicationContext();
        Toast.makeText(context, msg, Toast.LENGTH_SHORT).show();
        if(callback != null) {
            callback.invoke("show toast success!!");
        }
    }
}

上述代码中，我们新建了一个MyPlugin类，其中定义了一个showToast的方法，这个方法接收一个字符串参数和一个JSCallback回调函数参数，用于展示一个Toast，并返回一个成功的回调。

2. 在vue文件中调用原生方法

在vue文件中调用原生方法，首先需要在main.js文件中注册插件。下面是一个简单的示例：

import Vue from 'vue'
import App from './App'
import MyPlugin from '@/plugin/android/my-plugin'

Vue.config.productionTip = false
Vue.prototype.$MyPlugin = MyPlugin

App.mpType = 'app'

const app = new Vue({
  ...App
})
app.$mount()

上述代码中，我们通过Vue.prototype给vue实例添加了一个$MyPlugin的方法，用于调用在plugin文件夹中定义的MyPlugin插件的方法。

调用方式如下：

上述代码中，我们通过this.$MyPlugin来调用原生方法showToast，并传入一个字符串参数和一个回调函数参数。回调函数会在展示Toast成功时返回一个回调信息。

3. 将原生方法作为生命周期钩子函数

将原生方法作为生命周期钩子函数，可以在页面初始化的时候调用原生方法，以获取一些数据或完成一些初始化操作。下面是一个简单的示例：

import Vue from 'vue'
import App from './App'
import MyPlugin from '@/plugin/android/my-plugin'

Vue.config.productionTip = false
Vue.prototype.$MyPlugin = MyPlugin

App.mpType = 'app'

const app = new Vue({
  ...App,
  onLoad() {
    this.getDeviceInfo()
  },
  methods: {
    getDeviceInfo() {
      const _this = this
      uni.getSystemInfo({
        success(res) {
          _this.$MyPlugin.showDeviceInfo(res)
        }
      })
    }
  }
})
app.$mount()

上述代码中，我们在页面初始化时调用getDeviceInfo方法，该方法通过uni.getSystemInfo方法获取设备信息，并将获取到的信息传入到MyPlugin插件的showDeviceInfo方法中进行展示。在MyPlugin插件中我们需要编写相应的原生代码展示设备信息。

4. 总结

在uniapp中定义原生方法的方法需要先新建plugin文件夹，并在对应平台的文件夹下添加对应的原生代码文件，在java代码文件中需要加上相应的注解。在vue文件中需要注册插件，并将插件方法作为vue实例的属性来调用。需要注意的是，插件方法调用需要在条件成立的情况下回调，以确保js的执行顺序与原生代码的执行顺序不会发生错误。

c语言编程笔录