Ionic原生插件 #

capacitor-plugin/
├── src/
│   ├── definitions.ts      # TypeScript接口定义
│   ├── index.ts            # 插件入口
│   └── web.ts              # Web实现
├── android/
│   └── src/main/java/com/example/plugin/
│       └── MyPlugin.java   # Android实现
├── ios/
│   └── Plugin/
│       ├── MyPlugin.swift  # iOS实现
│       └── MyPlugin.m      # Objective-C桥接
├── package.json
├── README.md
└── capacitor.config.json

npm init @capacitor/plugin
npx cap plugin:generate

mkdir my-plugin
cd my-plugin
npm init -y

// src/definitions.ts
export interface MyPlugin {
  echo(options: { value: string }): Promise<{ value: string }>;
  getDeviceInfo(): Promise<DeviceInfo>;
}

export interface DeviceInfo {
  model: string;
  platform: string;
  osVersion: string;
}

// src/index.ts
import { registerPlugin } from '@capacitor/core';
import type { MyPlugin } from './definitions';

const MyPlugin = registerPlugin<MyPlugin>('MyPlugin', {
  web: () => import('./web').then(m => new m.MyPluginWeb()),
});

export * from './definitions';
export { MyPlugin };

// src/web.ts
import { WebPlugin } from '@capacitor/core';
import { MyPlugin, DeviceInfo } from './definitions';

export class MyPluginWeb extends WebPlugin implements MyPlugin {
  async echo(options: { value: string }): Promise<{ value: string }> {
    return { value: options.value };
  }
  
  async getDeviceInfo(): Promise<DeviceInfo> {
    return {
      model: 'Web Browser',
      platform: 'web',
      osVersion: navigator.userAgent
    };
  }
}

// android/src/main/java/com/example/plugin/MyPlugin.java
package com.example.plugin;

import com.getcapacitor.JSObject;
import com.getcapacitor.Plugin;
import com.getcapacitor.PluginCall;
import com.getcapacitor.PluginMethod;
import com.getcapacitor.annotation.CapacitorPlugin;

@CapacitorPlugin(name = "MyPlugin")
public class MyPlugin extends Plugin {
    
    @PluginMethod
    public void echo(PluginCall call) {
        String value = call.getString("value");
        
        JSObject ret = new JSObject();
        ret.put("value", value);
        
        call.resolve(ret);
    }
    
    @PluginMethod
    public void getDeviceInfo(PluginCall call) {
        JSObject ret = new JSObject();
        ret.put("model", android.os.Build.MODEL);
        ret.put("platform", "android");
        ret.put("osVersion", android.os.Build.VERSION.RELEASE);
        
        call.resolve(ret);
    }
}

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <uses-permission android:name="android.permission.INTERNET" />
</manifest>

apply plugin: 'com.android.library'

android {
    compileSdkVersion 33
    
    defaultConfig {
        minSdkVersion 22
        targetSdkVersion 33
    }
}

dependencies {
    implementation 'com.capacitorjs:core:5.0.0'
}

// ios/Plugin/MyPlugin.swift
import Foundation
import Capacitor

@objc(MyPlugin)
public class MyPlugin: CAPPlugin {
    
    @objc func echo(_ call: CAPPluginCall) {
        guard let value = call.getString("value") else {
            call.reject("Value is required")
            return
        }
        
        call.resolve([
            "value": value
        ])
    }
    
    @objc func getDeviceInfo(_ call: CAPPluginCall) {
        let device = UIDevice.current
        
        call.resolve([
            "model": device.model,
            "platform": "ios",
            "osVersion": device.systemVersion
        ])
    }
}

// ios/Plugin/MyPlugin.m
#import <Capacitor/Capacitor.h>

CAP_PLUGIN(MyPlugin, "MyPlugin",
    CAP_PLUGIN_METHOD(echo, CAPPluginReturnPromise);
    CAP_PLUGIN_METHOD(getDeviceInfo, CAPPluginReturnPromise);
)

# MyPlugin.podspec
Pod::Spec.new do |s|
  s.name = 'MyPlugin'
  s.version = '1.0.0'
  s.summary = 'My Capacitor Plugin'
  s.homepage = 'https://github.com/example/my-plugin'
  s.author = 'Your Name'
  s.source = { :git => 'https://github.com/example/my-plugin.git', :tag => s.version.to_s }
  s.source_files = 'ios/Plugin/**/*.{swift,m,h}'
  s.swift_version = '5.1'
  s.dependency 'Capacitor'
end

npm install my-plugin
npx cap sync

import { MyPlugin } from 'my-plugin';

// 调用方法
async echo() {
  const result = await MyPlugin.echo({ value: 'Hello' });
  console.log(result.value);
}

async getDeviceInfo() {
  const info = await MyPlugin.getDeviceInfo();
  console.log(info);
}

{
  "name": "my-plugin",
  "version": "1.0.0",
  "description": "My Capacitor Plugin",
  "main": "dist/plugin.cjs.js",
  "module": "dist/esm/index.js",
  "types": "dist/esm/index.d.ts",
  "files": [
    "dist/",
    "android/",
    "ios/"
  ],
  "capacitor": {
    "ios": {
      "src": "ios"
    },
    "android": {
      "src": "android"
    }
  },
  "keywords": [
    "capacitor",
    "plugin",
    "native"
  ],
  "peerDependencies": {
    "@capacitor/core": "^5.0.0"
  }
}

{
  "appId": "com.example.plugin",
  "appName": "My Plugin",
  "webDir": "dist",
  "plugins": {
    "MyPlugin": {
      "option1": "value1"
    }
  }
}

npm run build

npm login
npm publish

# My Plugin

## Installation

```bash
npm install my-plugin
npx cap sync

import { MyPlugin } from 'my-plugin';

const result = await MyPlugin.echo({ value: 'Hello' });

## 八、最佳实践

### 8.1 错误处理

```typescript
@PluginMethod
public void myMethod(PluginCall call) {
    try {
        // 执行操作
        JSObject ret = new JSObject();
        ret.put("result", "success");
        call.resolve(ret);
    } catch (Exception e) {
        call.reject("操作失败: " + e.getMessage());
    }
}

@PluginMethod
public void requirePermission(PluginCall call) {
    if (getPermissionState("camera") != PermissionState.GRANTED) {
        requestPermission(call, "camera");
    } else {
        // 执行操作
    }
}

// 触发事件
notifyListeners('myEvent', {
  data: 'event data'
});

// 监听事件
MyPlugin.addListener('myEvent', (data) => {
  console.log('收到事件:', data);
});