SDK Library

A JavaScript SDK library for iframe communication and utility functions.

Installation

npm install jing-sdk-lib
# or
yarn add jing-sdk-lib
# or
pnpm add jing-sdk-lib

Usage

Basic Usage

import { IframeManage, ListenMessageEnum, PostMessageActionEnum } from 'jing-sdk-lib';

// Create an instance
const iframeManager = new IframeManage(
  'https://example.com', // iframe source
  'wallet-iframe' // iframe DOM ID
);
iframeUrl.value = iframeManager.convertToUrl(customData);
// Listen for events
iframeManager.receiveMessage.on(
  ListenMessageEnum.walletIsReady,
  (event) => {
    console.log('Wallet is ready!', event.data);
    // Handle the event...
  }
);

// Send messages
iframeManager.postMessage(PostMessageActionEnum.update, { 
  ...data indexOf UpdateData
});

// Remove listeners
iframeManager.receiveMessage.off(ListenMessageEnum.walletIsReady);

Data Structure

When using postMessage or convertToUrl, you can provide data according to the UpdateData interface:

interface UpdateData {
  fit?: boolean;                    // 是否需要适配，默认不需要
  app?: App;                        // 第三方应用的信息
  route: string;                    // wallet的路由
  activity?: ActivityClaimParamInfo;
  theme?: string;                   
  title?: string;                   // 标题文案
  ca?: string;                      // 钱包ca
  app_id?: string;                  // 钱包appId
  user_id?: string;                 // 用户唯一id
  signature?: string;
  permission?: PermissionTypeEnum;  // 权限类型，默认是manage
  ac_account?: string;              // 激活的账号
  ac_type?: AccountTypeEnum;        // 激活的账号类型
  order_no?: string;                // 指定转账一定要传order_no
  lang?: string;
}

For the complete definition, see [src/utils/index.ts]

Using Constants and Enums

The library exports various constants and enums that you can use in your project:

import { 
  ListenMessageEnum, 
  PostMessageActionEnum,
  PlatformEnum,
  APPModeEnum,
  PermissionTypeEnum,
  AccountTypeEnum,
  RouteEnum,
  LangEnum,
  FunctionEnum
} from 'jing-sdk-lib';

// Use enums in your code
const platform = PlatformEnum.web;
const mode = APPModeEnum.connection;
const route = RouteEnum.asset;

// Listen for specific events
iframeManager.receiveMessage.on(ListenMessageEnum.walletConnected, (event) => {
  console.log('Wallet connected!');
});

// Send messages with specific actions
iframeManager.postMessage(PostMessageActionEnum.update, { data: 'example' });

Vue.js Integration

// In your Vue component
export default {
  data() {
    return {
      iframeManager: null,
    };
  },
  
  mounted() {
    // Create instance
    this.iframeManager = new IframeManage(
      'https://example.com',
      'wallet-iframe'
    );
    
    // Add event listeners
    this.iframeManager.receiveMessage.on(
      ListenMessageEnum.walletIsReady,
      this.handleWalletReady
    );
  },
  
  beforeUnmount() {
    // Clean up listeners
    if (this.iframeManager) {
      this.iframeManager.receiveMessage.off(
        ListenMessageEnum.walletIsReady,
        this.handleWalletReady
      );
    }
  },
  
  methods: {
    handleWalletReady(event) {
      console.log('Wallet is ready!', event.data);
    }
  }
};

Development

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Run tests
pnpm test

# Build the library
pnpm build

License

MIT