uni-app 原生插件需求

在处理 uni-app 原生插件需求时，通常需要结合原生代码（如 Android 的 Java/Kotlin 和 iOS 的 Objective-C/Swift）与 uni-app 的前端代码来实现特定功能。下面是一个简单的示例，展示如何为 uni-app 创建一个原生插件，该插件能够在 Android 和 iOS 平台上获取设备信息。

1. 创建插件项目结构

首先，在你的 uni-app 项目根目录下创建一个 native-plugins 文件夹，用于存放原生插件代码。

my-uni-app/
├── native-plugins/
│   ├── MyDeviceInfo/
│   │   ├── android/
│   │   │   └── src/
│   │   │       └── main/
│   │   │           └── java/
│   │   │               └── com/
│   │   │                   └── example/
│   │   │                       └── MyDeviceInfo.java
│   │   ├── ios/
│   │   │   └── MyDeviceInfo/
│   │   │       └── MyDeviceInfo.m
│   └── package.json
├── manifest.json
├── pages/
│   └── index/
│       └── index.vue
└── ...

2. 编写 Android 原生代码 (MyDeviceInfo.java)

package com.example;

import android.content.Context;
import android.os.Build;
import io.dcloud.feature.uniapp.bridge.UniJSCallback;
import io.dcloud.feature.uniapp.common.UniModule;

public class MyDeviceInfo extends UniModule {
    @Override
    public void getDeviceInfo(UniJSCallback callback) {
        String info = "Android Version: " + Build.VERSION.RELEASE;
        callback.invoke(info);
    }
}

3. 编写 iOS 原生代码 (MyDeviceInfo.m)

#import <Foundation/Foundation.h>
#import <UniAppJsBridge/UniModule.h>

@interface MyDeviceInfo : UniModule
@end

@implementation MyDeviceInfo

- (void)getDeviceInfo:(UniJSCallback *)callback {
    NSString *info = [NSString stringWithFormat:@"iOS Version: %@", [[UIDevice currentDevice] systemVersion]];
    [callback invokeWithObject:info];
}

@end

4. 配置插件 (package.json)

{
  "name": "MyDeviceInfo",
  "id": "com.example.MyDeviceInfo",
  "version": "1.0.0",
  "description": "A plugin to get device info",
  "_dp_type": "nativeplugin",
  "android": {
    "package": "com.example.MyDeviceInfo",
    "class": "com.example.MyDeviceInfo"
  },
  "ios": {
    "class": "MyDeviceInfo"
  }
}

5. 在 uni-app 中调用插件

在 pages/index/index.vue 中：

<template>
  <view>
    <text>{{ deviceInfo }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      deviceInfo: ''
    };
  },
  mounted() {
    const plugin = uni.requireNativePlugin('com.example.MyDeviceInfo');
    plugin.getDeviceInfo((res) => {
      this.deviceInfo = res;
    });
  }
};
</script>

这个示例展示了如何创建一个简单的原生插件来获取设备信息，并在 uni-app 中调用它。根据你的具体需求，你可以扩展这个基础框架来实现更复杂的功能。