FinClip为企业提供小程序生态圈技术产品,开发者可在FinClip小程序开发帮助中心找到相关FinClip小程序指引

文档中心
  • 介绍
  • 开发
  • 小程序 SDK
  • 常见问题
  • 数据
  • 设计
  • 运营

# 接口说明

# 1. 相关接口

web-view 组件加载的网页中可使用JSSDK 1.4.20 (opens new window), JSSDK 1.4.20(ESM) (opens new window)提供的接口调用小程序相关能力

支持的接口有：

接口名称 说明 最低版本
ft.miniProgram.navigateTo 保留当前页面，跳转到应用内的某个页面 1.0.0
ft.miniProgram.navigateBack 关闭当前页面，返回上一页面或多级页面 1.0.0
ft.miniProgram.switchTab 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 1.0.0
ft.miniProgram.redirectTo 关闭当前页面，跳转到应用内的某个页面 1.0.0
ft.miniProgram.reLaunch 关闭所有页面，打开到应用内的某个页面 1.0.0
ft.miniProgram.postMessage 向小程序发送消息，会在特定时机（小程序后退、组件销毁、分享）触发组件的 message 事件 1.0.0
ft.miniProgram.getEnv 获取当前环境及 JSSDK 版本号 1.0.0
ft.miniProgram.close 关闭小程序 1.0.3
ft.miniProgram.navigateToMiniProgram 跳转到另一个小程序 1.0.4
ft.miniProgram.navigateBackMiniProgram 返回到上一个小程序 1.0.4
ft.miniProgram.onShow 小程序 onShow 事件注册回调 1.0.6
ft.miniProgram.onHide 小程序 onHide 事件注册回调 1.0.8
ft.miniProgram.onUnload 小程序 onUnload 事件注册回调 1.0.8
ft.miniProgram.onWebviewEvent 监听小程序发送的事件，支持多个函数绑定 1.4.1
ft.miniProgram.offWebviewEvent 移除监听小程序发送的事件，不传参数时取消所有绑定 1.4.1
ft.miniProgram.sendWebviewEvent 触发 webview 标签绑定的 bindevent 方法 1.4.1
ft.downloadFile 下载文件 1.0.0
ft.getAppletInfo 返回当前小程序基础信息 1.0.0
ft.openDocument 打开文件 1.0.0
ft.chooseImage 拍照或从手机相册中选择图片 1.0.1
ft.getLocalImgData 获取图片 base64 编码 1.0.9
ft.chooseLocation 打开地图选择位置 1.0.9
ft.getLocation 获取当前地理位置信息 1.0.9
ft.getStorage 获取本地缓存数据 1.0.9
ft.setStorage 设置本地缓存数据 1.0.9
ft.removeStorage 移除本地缓存数据 1.0.9
ft.clearStorage 清理本地数据缓存 1.0.9
ft.getStorageInfo 获取本地缓存信息 1.0.9
ft.canGoBack 当前 H5 页面是否可返回上一页 1.2.0
ft.canNavigateBack 当前小程序页面是否可返回上一页 1.2.0
ft.setNavigationBarTitle 设置当前小程序页面标题 1.2.0
ft.request 发起网络请求 1.3.9
ft.callNativeAPI H5 调用原生方法 1.4.1
ft.registNativeAPIHandler 注册 H5 方法供原生调用（不推荐使用） 1.4.1 起支持，该方法只能注册一个回调，无法取消，建议使用 onNativeAPIHandler 和 offNativeAPIHandler
ft.complete 发送加载完成事件到小程序 1.4.11
ft.onNativeAPIHandler 注册 H5 方法，供原生调用 1.4.20
ft.offNativeAPIHandler 取消注册的方法 1.4.20

# API 参数说明

# 回调函数入参说明

大部分 API 均为异步 API，调用时需要传入 success、fail、complete 回调函数。

回调函数的入参,会统一包含 errMsg 字段，表示调用结果。例如:

调用成功时,会依次调用 success、complete 回调,返回值为

{
  errMsg: 'invokeMiniProgramAPI:ok'
}

调用失败时,会依次调用 fail、complete 回调,返回值为

{
  errMsg: 'invokeMiniProgramAPI:fail'
}

如无特别说明, API 回调均按此格式返回。部分 API 返回值会包含其他数据, 请参考后文 API 入参文档。

# API 入参文档

ft.miniProgram.navigateTo(object)

保留当前页面，跳转到应用内的某个页面，可以通过 navigateBack 返回到原页面。

  • object 参数：
    • url: String - 必填参数,需要跳转的应用内页面路径
    • success: Function - 接口调用成功的回调函数
    • fail: Function - 接口调用失败的回调函数
    • complete: Function - 接口调用结束的回调函数

ft.miniProgram.navigateBack(object)

关闭当前页面，返回上一页面或多级页面，可以指定返回的层级。

  • object 参数：
    • delta: Number - 非必填,返回的页面数，如果 delta 大于现有页面数，则返回到首页，默认值为 1
    • success: Function - 接口调用成功的回调函数
    • fail: Function - 接口调用失败的回调函数
    • complete: Function - 接口调用结束的回调函数

ft.miniProgram.switchTab(object)

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面，只能跳转到 tabBar 页面。

  • object 参数：
    • url: String - 必填参数,需要跳转的 tabBar 页面的路径
    • success: Function - 接口调用成功的回调函数
    • fail: Function - 接口调用失败的回调函数
    • complete: Function - 接口调用结束的回调函数

ft.miniProgram.redirectTo(object)

关闭当前页面，跳转到应用内的某个页面，不会保留当前页面的历史。

  • object 参数：
    • url: String - 必填参数,需要跳转的应用内页面路径
    • success: Function - 接口调用成功的回调函数
    • fail: Function - 接口调用失败的回调函数
    • complete: Function - 接口调用结束的回调函数

ft.miniProgram.reLaunch(object)

关闭所有页面，打开到应用内的某个页面，会清空所有页面栈。

  • object 参数：
    • url: String - 必填参数,需要跳转的应用内页面路径
    • success: Function - 接口调用成功的回调函数
    • fail: Function - 接口调用失败的回调函数
    • complete: Function - 接口调用结束的回调函数

ft.miniProgram.postMessage(object)

向小程序发送消息，会在特定时机（小程序后退、组件销毁、分享）触发组件的 message 事件。

函数入参为 Object 类型, 例如:

ft.miniProgram.postMessage({
  someKey: 'foo'
})

ft.miniProgram.postMessage({
  otherKey: 'boo'
})

ft.miniProgram.getEnv(callback)

获取当前环境及 JSSDK 版本号，用于判断当前运行环境是否为小程序。

  • 参数：

    • callback: Function - 接收结果的回调函数

  • 返回值：

    • env: String - 环境类型，小程序中打开时，值是字符串 'miniprogram'，非小程序环境，值是一个空对象
    • version: String - JSSDK 版本号
    • errMsg: String - 调用结果

ft.miniProgram.close()

关闭当前小程序。

ft.miniProgram.navigateToMiniProgram(object)

从当前小程序跳转到另一个小程序，可以指定跳转的页面和传递数据。

  • object 参数：
    • appId: String - 必填参数,要跳转的小程序的 appId
    • path: String - 非必填,打开的页面路径，如果为空则打开首页
    • extraData: Object - 非必填,需要传递给目标小程序的数据
    • success: Function - 接口调用成功的回调函数
    • fail: Function - 接口调用失败的回调函数
    • complete: Function - 接口调用结束的回调函数

ft.miniProgram.navigateBackMiniProgram(object)

返回到上一个小程序，可以向上一个小程序传递数据。

  • object 参数：
    • extraData: Object - 非必填,需要返回给上一个小程序的数据
    • success: Function - 接口调用成功的回调函数
    • fail: Function - 接口调用失败的回调函数
    • complete: Function - 接口调用结束的回调函数

例如从小程序 A 跳到小程序 B，B 通过 navigateBackMiniProgram 返回 A 后，如果有携带 extraData 参数

A 可以通过 wx.getEnterOptionsSync API 获取到小程序 B 携带的跳转参数

const data = wx.getEnterOptionsSync()
console.log(data)

或者在小程序 App 的 onShow 生命周期里获取

App({
  onShow(data) {
    console.log(data)
  }
})

ft.miniProgram.onShow(callback)

监听小程序显示事件，当小程序从后台进入前台显示时触发。

  • 参数：
    • callback: Function - 小程序显示时的回调函数，回调参数中包含 data 字段表示当前小程序路由 query

ft.miniProgram.onHide(callback)

监听小程序隐藏事件，当小程序从前台进入后台时触发。

  • 参数：
    • callback: Function - 小程序隐藏时的回调函数

ft.miniProgram.onUnload(callback)

监听小程序页面关闭事件，当小程序页面关闭时触发。

  • 参数：
    • callback: Function - 小程序关闭时的回调函数

ft.miniProgram.onWebviewEvent(callback)

监听小程序发送的事件，当小程序通过 sendWebviewEvent 发送事件时触发。

  • 参数：
    • callback: Function - 接收小程序事件的回调函数

ft.miniProgram.offWebviewEvent(callback)

移除监听小程序发送的事件，取消之前通过 onWebviewEvent 注册的事件监听。

  • 参数：
    • callback: Function - 需要移除的事件回调函数

ft.miniProgram.sendWebviewEvent(object)

触发 webview 标签绑定的 bindevent 方法，将数据从 H5 页面发送到小程序。

函数入参为 Object 类型, 例如:

ft.miniProgram.sendWebviewEvent({
  someKey: 'foo'
})

ft.miniProgram.sendWebviewEvent({
  otherKey: 'boo'
})

ft.downloadFile(object)

下载文件资源到本地，可以指定下载的路径和请求的参数。

  • object 参数：

    • url: String - 下载资源的 url
    • header: Object - HTTP 请求的 Header
    • timeout: Number - 超时时间，单位为毫秒
    • filePath: String - 指定文件下载后存储的路径
    • success: Function - 接口调用成功的回调函数
    • fail: Function - 接口调用失败的回调函数
    • complete: Function - 接口调用结束的回调函数

  • 返回值：

    • tempFilePath: String - 临时文件路径 (本地路径)。没传入 filePath 指定文件存储路径时会返回，下载后的文件会存储到一个临时文件
    • filePath: String - 下载文件的本地路径, 跟传入的 filePath 一致
    • errMsg: String - 调用结果

ft.openDocument(object)

打开文件，支持打开 doc、xls、ppt、pdf 等多种格式的文件。

  • object 参数：
    • filePath: String - 文件路径
    • fileType: String - 文件类型，可选值：doc, xls, ppt, pdf, docx, xlsx, pptx
    • success: Function - 接口调用成功的回调函数
    • fail: Function - 接口调用失败的回调函数
    • complete: Function - 接口调用结束的回调函数

ft.getAppletInfo(object)

获取当前小程序的基本信息，包括小程序的ID、名称、图标、描述等。

  • object 参数：

    • success: Function - 接口调用成功的回调函数，返回小程序的基本信息，包括 appId、appTitle、appAvatar、appDescription、appThumbnail、path、userId 等
    • fail: Function - 接口调用失败的回调函数
    • complete: Function - 接口调用结束的回调函数

  • 返回值：

    • appId: String - 小程序的 ID
    • appTitle: String - 小程序的名称
    • appAvatar: String - 小程序的图标
    • appDescription: String - 小程序的描述
    • appThumbnail: String - 小程序的封面图
    • path: String - 小程序的路径
    • userId: String - 小程序的开发者 ID
    • errMsg: String - 调用结果

ft.chooseImage(object)

从相册选择图片或使用相机拍照，可以指定最大选择数量、图片尺寸和来源类型。

  • object 参数：

    • count: Number - 最多可以选择的图片张数，默认为 9
    • sizeType: Array - 所选的图片的尺寸，可选值为 original（原图）和 compressed（压缩图），默认二者都有
    • sourceType: Array - 选择图片的来源，可选值为 album（相册）和 camera（相机），默认二者都有
    • success: Function - 接口调用成功的回调函数，返回选定照片的本地文件路径列表 tempFilePaths
    • fail: Function - 接口调用失败的回调函数
    • complete: Function - 接口调用结束的回调函数

  • 返回值：

    • tempFilePaths: Array<string> - 选定照片的本地文件路径列表
    • errMsg: String - 调用结果

ft.getLocalImgData(object)

获取图片的 base64 编码数据，可以将本地图片转换为可在网页中直接使用的格式。

  • object 参数：

    • path: String - 图片的本地路径
    • success: Function - 接口调用成功的回调函数，返回 base64 编码后的图片数据
    • fail: Function - 接口调用失败的回调函数
    • complete: Function - 接口调用结束的回调函数

  • 返回值：

    • localData: String - base64 编码后的图片数据
    • errMsg: String - 调用结果

ft.chooseLocation(object)

打开地图选择位置，返回用户选择的位置信息，包括经纬度、位置名称等。

  • object 参数：

    • latitude: Number - 纬度
    • longitude: Number - 经度
    • success: Function - 接口调用成功的回调函数，返回位置信息，包括经纬度、位置名称、详细地址
    • fail: Function - 接口调用失败的回调函数
    • complete: Function - 接口调用结束的回调函数

  • 返回值：

    • longitude: Number - 经度
    • latitude: Number - 纬度
    • name: String - 位置名称
    • address: String - 详细地址
    • errMsg: String - 调用结果

ft.getLocation(object)

获取当前的地理位置信息，可以指定坐标系类型，返回经纬度、速度、精度等信息。

  • object 参数：

    • type: String - 坐标类型，可选值：wgs84、gcj02，默认值 wgs84
    • success: Function - 接口调用成功的回调函数，返回位置信息，包括经纬度、速度、精度等
    • fail: Function - 接口调用失败的回调函数
    • complete: Function - 接口调用结束的回调函数

  • 返回值：

    • longitude: Number - 经度
    • latitude: Number - 纬度
    • speed: Number - 速度
    • accuracy: Number - 位置的精确度
    • errMsg: String - 调用结果

ft.getStorage(object)

从本地缓存中异步获取指定 key 对应的内容。

  • object 参数：

    • key: String - 本地缓存中指定的 key
    • success: Function - 接口调用成功的回调函数，返回 key 对应的内容
    • fail: Function - 接口调用失败的回调函数
    • complete: Function - 接口调用结束的回调函数

  • 返回值：

    • data: Object/String - key 对应的内容
    • errMsg: String - 调用结果

ft.setStorage(object)

将数据异步存储在本地缓存中指定的 key 中。

  • object 参数：
    • key: String - 本地缓存中指定的 key
    • data: Object/String - 需要存储的内容，只支持原生 JS 类型、Date、及能够通过 JSON.stringify 序列化的对象
    • success: Function - 接口调用成功的回调函数
    • fail: Function - 接口调用失败的回调函数
    • complete: Function - 接口调用结束的回调函数

ft.removeStorage(object)

从本地缓存中异步删除指定 key 的内容。

  • object 参数：
    • key: String - 本地缓存中指定的 key
    • success: Function - 接口调用成功的回调函数
    • fail: Function - 接口调用失败的回调函数
    • complete: Function - 接口调用结束的回调函数

ft.clearStorage(object)

清理本地数据缓存，删除所有存储的数据。

  • object 参数：
    • success: Function - 接口调用成功的回调函数
    • fail: Function - 接口调用失败的回调函数
    • complete: Function - 接口调用结束的回调函数

ft.getStorageInfo(object)

异步获取当前存储的信息，包括已用的空间大小、总容量和所有的 key 列表。

  • object 参数：

    • success: Function - 接口调用成功的回调函数，返回信息包括 keys（当前 storage 中所有的 key）、currentSize（当前占用的空间大小, 单位 KB）
    • fail: Function - 接口调用失败的回调函数
    • complete: Function - 接口调用结束的回调函数

  • 返回值：

    • keys: Array - 当前 storage 中所有的 key
    • currentSize: Number - 当前占用的空间大小, 单位 KB
    • errMsg: String - 调用结果

ft.canGoBack(object)

检查当前 H5 页面是否可以返回上一页，用于判断当前页面的导航历史状态。

  • object 参数：

    • success: Function - 接口调用成功的回调函数，返回 { canGoBack: true // or false }
    • fail: Function - 接口调用失败的回调函数
    • complete: Function - 接口调用结束的回调函数

  • 返回值：

    • canGoBack: Boolean - 表示是否可以返回上一页
    • errMsg: String - 调用结果

ft.canNavigateBack(object)

检查当前小程序页面是否可以返回上一页，用于判断小程序当前页面堆栈状态。

  • object 参数：

    • success: Function - 接口调用成功的回调函数，返回 { canNavigateBack: true // or false }
    • fail: Function - 接口调用失败的回调函数
    • complete: Function - 接口调用结束的回调函数

  • 返回值：

    • canNavigateBack: Boolean - 表示是否可以返回上一页
    • errMsg: String - 调用结果

ft.setNavigationBarTitle(object)

动态设置当前小程序页面的标题，可以根据页面内容动态更新标题。

  • object 参数：
    • title: String - 页面标题
    • success: Function - 接口调用成功的回调函数
    • fail: Function - 接口调用失败的回调函数
    • complete: Function - 接口调用结束的回调函数

H5 页面 document.title 的变化会覆盖 API 的设置，以最新更新的 title 值为准

ft.request(object)

发起网络请求，可以请求远程服务器的数据，支持 HTTP 的各种方法和参数设置。

  • object 参数：

    • url: String - 开发者服务器接口地址
    • data: Object/String/ArrayBuffer - 请求的参数
    • header: Object - 设置请求的 header，header 中不能设置 Referer
    • method: String - HTTP 请求方法，默认为 GET
    • dataType: String - 返回的数据格式，默认为 json
    • success: Function - 接口调用成功的回调函数
    • fail: Function - 接口调用失败的回调函数
    • complete: Function - 接口调用结束的回调函数

  • 返回值：

    • data: Object - 服务器返回的数据
    • statusCode: Number - HTTP 状态码
    • header: Object - 服务器返回的 header
    • errMsg: String - 调用结果

ft.callNativeAPI(name, data, callback)

H5 页面调用原生方法，实现 H5 与原生应用的交互，可以访问原生的功能和能力。

  • 参数：
    • name: String - 原生注册的 API 名称
    • data: Object - 传递给原生方法的参数
    • callback: Function - 原生方法执行完成后的回调函数

ft.registNativeAPIHandler(name, callback)

注册 H5 方法供原生调用（不推荐使用），实现原生应用向 H5 页面发送消息和调用 H5 方法。

  • 参数：
    • name: String - 注册的方法名
    • callback: Function - 原生调用时执行的回调函数

ft.complete()

发送加载完成事件到小程序，通知小程序 H5 页面已经加载完成。

小程序配置了 timeout 时，需要 H5 通知加载完成，否则会在 timeout 的时间后，触发 bindtimeout 事件。

timeout 为毫秒单位。

<web-view src="" timeout="12000" bindtimeout="timeout" />

ft.onNativeAPIHandler(name, callback)

注册 H5 方法供原生调用，允许原生应用调用 H5 页面中的方法，支持注册多个回调函数。

  • 参数：
    • name: String - 注册的方法名
    • callback: Function - 原生调用时执行的回调函数

ft.offNativeAPIHandler(name, callback)

取消注册的 H5 方法，移除之前通过 onNativeAPIHandler 注册的回调函数。

  • 参数：
    • name: String - 要取消注册的方法名
    • callback: Function - 要取消的回调函数

# 部分 API 调用示例代码

ft.miniProgram.navigateTo({ url: '/path/to/page' })
ft.miniProgram.reLaunch({ url: '/path/to/page' })
ft.miniProgram.postMessage({ data: 'foo' })
ft.miniProgram.postMessage({ data: { foo: 'bar' } })
ft.miniProgram.getEnv(function(res) {
  console.log(res.env)
  console.log(res.version) // 1.4.18 起支持
}) // miniprogram

// 同步方式判断当前 H5 运行环境
console.log(window.__fcjs_environment) // miniprogram
// 关闭小程序
ft.miniProgram.close()

ft.miniProgram.navigateBackMiniProgram({
  extraData: {},
  success: function(res) {
    console.log('navigateBackMiniProgram success callback:')
    console.log(res)
  }
})

ft.miniProgram.navigateToMiniProgram({
  appId: '',
  success: function(res) {
    console.log('navigateToMiniProgram success callback:')
    console.log(res)
  }
})

ft.miniProgram.onShow(res => {
  console.log(res)
  // res.data表示当前小程序路由query
})

ft.miniProgram.onHide(res => {
  // Do Some Thing
})

ft.miniProgram.onUnload(res => {
  // Do Some Thing
})

ft.downloadFile({
  url,
  header,
  timeout,
  filePath
})

ft.openDocument({
  filePath,
  fileType
})

ft.chooseImage({
  count: 1, // 默认9
  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
  success: res => {
    console.log(res)
  }
})

ft.getAppletInfo({
  success: res => {
    console.log('getAppletInfo', res)
    // {
    //     appAvatar = "小程序图标地址";
    //     appDescription = "小程序的描述信息";
    //     appId = "小程序id";
    //     path = "点击转发时的小程序页面路径";
    //     appThumbnail = "小程序封面图的路径，可能是网络路径或者本地路径，宽高比是5:4";
    //     appTitle = "小程序名称";
    //     userId = "小程序开发者id";
    // }
  }
})
ft.chooseImage({
  count: 1, // 默认9
  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
  success: res => {
    console.log(res)
    window.ft.miniProgram.getLocalImgData({
      path: res.tempFilePaths[0],
      success: res => {
        console.log(res)
      }
    })
  }
})

// 获取当前 H5 页面是否可以返回上一页
ft.canGoBack({
  success: function(res) {
    console.log(res)
  }
})

// 获取小程序是否可以返回上一页
ft.canNavigateBack({
  success: function(res) {
    console.log(res)
  }
})

// 设置小程序页面 title
ft.setNavigationBarTitle({
  title: 'page title'
})

ft.request({
  url: 'https://some.url',
  method: 'GET',
  data: {
    param1: 'test'
  },
  success: function(res) {
    console.log('success', res)
  },
  fail: function(res) {
    console.log('fail', res)
  },
  complete: function(res) {
    console.log('complete', res)
  }
})

# 2. 特有接口

接口名称 说明 最低版本
ft.miniProgram.onWebviewEvent 监听小程序发送的事件 1.4.1
ft.miniProgram.offWebviewEvent 移除监听小程序发送的事件 1.4.1
ft.miniProgram.sendWebviewEvent 触发 webview 标签绑定的 bindevent 方法 1.4.1
ft.callNativeAPI H5 页面调用原生 API 1.4.1
ft.onNativeAPIHandler 注册原生调用 H5 中的 API 1.4.20
ft.offNativeAPIHandler 取消注册原生调用 H5 中的 API 1.4.20

# 2.1 H5 页面调用原生 api

示例接口名：js2AppFunction

# 2.1.1 iOS 示例

[[FATClient sharedClient] fat_registerWebApi:@"js2AppFunction" handler:^(FATAppletInfo *appletInfo, id param, FATExtensionApiCallback callback) {
        NSString *name = param[@"name"];
//        id params = param[@"data"];
        if ([name isEqualToString:@"getLocation"]) {
            // 执行定位逻辑

            // 返回结果给HTML
            NSDictionary *dict = @{@"errno":@"403", @"errmsg":@"无权限", @"result": @{@"address":@"广东省深圳市南山区航天科技广场"}};
            callback(FATExtensionCodeSuccess, dict);
        } else if ([name isEqualToString:@"getColor"]) {
            // 执行其他逻辑

            // 返回结果给HTML
            NSDictionary *dict = @{@"r":@"110",@"g":@"150",@"b":@"150"};
            callback(FATExtensionCodeSuccess, dict);
        }
}];

# 2.1.2 Android 示例

api 示例

public class WebApi extends BaseApi {


    public WebApi(Context context) {
        super(context);
    }

    @Override
    public String[] apis() {
        return new String[]{"js2AppFunction"}; //api名称
    }

    @Override
    public void invoke(String event, JSONObject param, ICallback callback) {
        // 调用方法时原生对应的操作
    }
}

Kotlin

FinAppClient.extensionWebApiManager.registerApi(WebApi(this))

Java

FinAppClient.INSTANCE.getExtensionWebApiManager().registerApi(new WebApi(this));

# 2.1.3 鸿蒙示例

api 示例

  const client = FinAppClient.init(
    finAppConfig, // 参数定义可参考鸿蒙 SDK 初始化文档
    context,
    entryInfo,
    startMode
  )

  client.registerCustomApi('js2AppFunction', (args: IApiManager.IInvokeArgs) => {
      const params = args.params
      const callback = args.callback
      console.log('customApi params', JSON.stringify(params))
      callback.onSuccess({ data: 'customApi success' })
  })

# 2.1.4 HTML 示例

在 HTML 内引用我们的桥接 JSSDK 文件，即可调用上面的注册的方法了。
HTML 内调用注册的方法示例：

// 完整参数说明
// name: 原生注册的API名称
// data: 传递给原生方法的参数
// callback: 原生方法执行完成后的回调函数
ft.callNativeAPI('js2AppFunction', { name: 'getLocation' }, result => {
  console.log(result)
})

# 2.2 原生调用 HTML 中的方法

示例接口名：app2jsFunction

# 2.2.1 iOS 中 API

原生端调用如下 API 来调用 HTML 中的 JS 函数：

NSString *jsonParams = @""; //这里应该是参数字典转换成的 json 字符串。
NSNumber *pageId = @(1234); //这里是 HTML 中传过来的 pageId
[[FATClient sharedClient] fat_callWebApi:@"app2jsFunction" paramString:jsonParams pageId:pageId handler:^(id result, NSError *error) {

}];

# 2.2.2 Android 中 API

/**
 * 原生调用JS函数
 *
 * @param appId 小程序id
 * @param funcName JS函数名
 * @param funcParams JS函数参数
 * @param webViewId WebView的id
 * @param callback 回调
 */
fun callJS(appId: String, funcName: String?, funcParams: String?, webViewId: Int, callback: FinCallback<String?>)

调用示例
Kotlin

FinAppClient.appletApiManager.callJS("appId", "app2jsFunction", "funParams", 1, object : FinCallback<String?> {
    override fun onSuccess(result: String?) {
        Toast.makeText(context, "调用JS成功: $result", Toast.LENGTH_SHORT).show()
    }

    override fun onError(code: Int, error: String) {
        Log.d(TAG, "调用JS失败: 错误码=$code, 错误信息=$error")
    }

    override fun onProgress(status: Int, info: String) {
        Log.d(TAG, "调用JS处理中: 状态码=$status, 信息=$info")
    }
})

Java

FinAppClient.INSTANCE.getAppletApiManager().callJS("appId", "app2jsFunction", "funParams", 1, new FinCallback<String>() {
    @Override
    public void onSuccess(String result) {
        Toast.makeText(context, "调用JS成功: " + result, Toast.LENGTH_SHORT).show();
    }

    @Override
    public void onError(int code, String error) {
        Toast.makeText(context, "调用JS失败: 错误码=" + code + ", 错误信息=" + error, Toast.LENGTH_SHORT).show();
    }

    @Override
    public void onProgress(int status, String info) {
        Log.d(TAG, "调用JS处理中: 状态码=" + status + ", 信息=" + info);
    }
});

# 2.2.3 HTML 中 API

同样的 HTML 中引用桥接用的 JSSDK 文件，然后在 HTML 里注册方法，比如方法名叫 app2jsFunction。

// 完整参数说明
// name: 注册的方法名
// callback: 原生调用时执行的回调函数，接收原生传递的参数
const callback = function(res) {
  // app2jsFunction callback
  // res 包含原生传递的数据
  console.log(res)
  return { success: true } // 可以返回数据给原生
}

// 添加监听
ft.onNativeAPIHandler('app2jsFunction', callback)


// 取消监听
ft.offNativeAPIHandler('app2jsFunction', callback)

# 2.3 H5 页面发送事件给小程序

# 2.3.1 H5 代码示例

// H5 页面
// 入参 object
// 数据会透传给小程序的 bindevent 回调函数的 e.detail.data
ft.miniProgram.sendWebviewEvent({
  test: 123
})

# 2.3.2 小程序 代码示例

逻辑层

// 小程序 /pages/index/index.js
Page({
  onEvent(e) {
    console.log(e.detail.data.test) // 123
  }
})

视图层

<!-- 小程序 /pages/index/index.fxml -->
<web-view src="https://xxx.xxx" bindevent="onEvent"></web-view>

# 2.4 小程序发送事件给 H5 页面

# 2.4.1 H5 代码示例

// 入参是 callback: 接收小程序事件的回调函数，参数 e 包含小程序传递的数据
function onEvent(e) {
  console.log(e.test) // 123
}
// 注册监听
ft.miniProgram.onWebviewEvent(onEvent)
// 移除监听
ft.miniProgram.offWebviewEvent(onEvent)

# 2.4.2 小程序 代码示例

// 入参 object，表示要发送给 H5 页面的数据
ft.sendWebviewEvent({ test: 123 })
© FinClip with ❤ , Since 2017