前端工具资产研发脚手架

Badges

准备工作

• 安装 nodejs
• 安装 @antglobal/wf-onboardsdk

产物说明

@alipay/wf-opensdk/master：嵌入式金融（iframe）端消费

先睹为快

1. 创建实例对象
2. init 初始化，填入数据
3. 将业务场景实例渲染至指定 dom
4. 监听回调

JavaScript 版

// 1. 创建iframeIns对象
let iframeIns;
wfOnboardSdk.then((OpenSDK) => {
  iframeIns = new OpenSDK({
    clientId: '3J5YEY5A2YA3CE06226',
    env: 'DEV',
  });
  // 2. 初始化入驻业务实例
  iframeIns.init({
    authData: {
      sdkClientId: 'ebdb21463cfcdbdca4aaf298b6460e4f033',
      token:
        'eyJhbGciOiJSUzI1NiJ9.eyJzZGtDbGllbnRJZCI6ImViZGIyMTQ2M2NmY2RiZGNhNGFhZjI5OGI2NDYwZTRmMDMzIiwiYml6SWQiOiI4MzhkMmJiYi1hOTI0LTQ1YTItYjc5MS1hMGYwOGViY2ViOTgiLCJiaXpTY2VuZSI6Ik9OQk9BUkQiLCJzZGtTZWN1cml0eUtleSI6ImMxODM4Zjg3LWRiMGYtNGU1Ny05MmZiLTA4MTU5YTg4MTkxMSIsImV4cCI6MTc1NTY4MzM5MiwiaWF0IjoxNzU1NTk2OTkyLCJ0aW1lc3RhbXAiOjE3NTU1OTY5OTJ9.HeMhxgCdKqkqqKJ8VV4wn15uajn5VPkwKndLJGyuTDm05lBETaz_AmXqK50Z0vQCPA-4hNlVTgek0Kt3GU9yB1rJ4vLlA003qptl-RQKZy-6px8_vlMVHeyKRj6N8vZ5JeMoZbBc9jDNDcXr1Ox5qo9WEh1yJ2S4oGqxn3ZSxQrry6HC6C-aU54wNMX8WBhgs_ujpmw4zAE75WCCku4wxSfFRZIZz7MUws2UHGndtWi8gN-YcE_PUk977Ng-spd3ZoE0ce7tysntPfC5TqT1sOMutv9Tpbwag27V7wr_U3wNTyC-zy-GJTLaQzW6sx5qAx2OKOa9iQdzMDU6tndKJg',
    },
  });
  // 3. 将入驻业务实例渲染至指定dom
  iframeIns.mount('#onboard-element');

  // 4. 监听回调
  iframeIns.on('stepChange', (data) => {
    console.log('stepChange', data);
  });
  iframeIns.on('onboardSubmitResult', (data) => {
    console.log('onboardSubmitResult', data);
  });
});

React 版

安装

略

创建 入驻实例 对象

new OpenSDK(config)

创建入驻实例 参数类型为具体属性如下

| 参数名 | 类型 | 描述 | 默认值 | 是否必填 | | ---------- | ---------------------------------------------- | -------- | ---------- | ------------ | | clientId | string | 语言 | | 是 | | env | 'DEV' | 'TEST' | 'PRE' | 'PROD' | 'STABLE' | 环境 | 'prod' | 是 | | lang | string | 语言 | 'zh-CN' | 否 |

instance

onboardInstance

入驻模块

初始化入驻元素

onboardInstance.init(initConfig?)

第二个参数类型为 onboardInitConfig ,具体属性如下

| 参数名 | 类型 | 描述 | 默认值 | | ---------- | --------------------------------------------------- | ---------------- | ---------- | | authData | { token:string, sdkClinetId:string } | 用户登录用户身份 | - |

挂载元素

onboardInstance.mount(containerElement)

参数类型为一个 css 选择器（如#onboard-element）或 dom 元素。

卸载元素

onboardInstance.unmount()

监听分步提交

onboardInstance.on('stepChange', (data) => { console.log('stepChange', data); });

监听最终提交

onboardInstance.on('onboardSubmitResult', (data) => { console.log('onboardSubmitResult', data); })

onboardInstance 通用方法

send()

onboardInstance.send(type,payload)

on()

onboardInstance.on(type,callback: (payload: Record<string, any>) => void)

type 为 'stepChange' | 'onboardSubmitResult'

工具类型（值）