引用小程序插件集成签署（不推荐使用）

该方式不会做迭代更新，不推荐开发者接入，建议直接用内嵌H5的方式集成！

场景适用说明

企业在自己的支付宝小程序中，通过引用“e签宝电子合同插件”进行对接签署。

获取插件

在支付宝小程序中实现电子签名之前，需要先在支付宝服务市场订购并 获取插件（需要使用您的小程序所属的主体企业支付宝账号登录），详情请参考 插件订购。

也可以使用已登录企业支付宝账号的支付宝 APP 扫码订购。

使用插件

使用前，可参考支付宝小程序 插件文档 以及阅读以下插件使用说明。

1. 插件使用声明

在小程序项目app.json中声明e签宝电子合同小程序插件，如下：

{
  "plugins": {
    "esign": {
      "version": "*",
      "provider": "2021001115656413"
    }
  },
}

• version：指定插件版本号，*表示最新版本，由于插件的上架版本只有一个版本，因此这里需始终指定*(最新版本)
• provider：指定所引用的插件ID（2021001115656413表示e签宝电子合同小程序插件id）

2.兼容处理

插件的运行要求小程序基础库为 1.22.4 及以上版本，支付宝客户端10.1.82及以上的版本，小程序在使用插件的时候，需要按照如下方式兼容（非常重要）：

// app.js
if (!my.canIUse('plugin') && !my.isIDE) {
  my.ap && my.ap.updateAlipayClient && my.ap.updateAlipayClient();
}
App({
  onLaunch() {},
  onShow() {},
})

注意：兼容代码一定要放到 app.js 文件的开头处，不能放到生命周期方法中，如果不做上述兼容处理，在基础库版本低于 1.18.0 的时候可能会导致页面白屏。

3. 跳转签署页面

注：跳转插件页面前，需先发起签署流程，并手动拼接跳转插件页面URL。

跳转到插件页面时， URL 使用 plugin:// 前缀，格式为 plugin://PLUGIN_NAME/PLUGIN_PAGE，如下所示：

my.navigateTo({
  url: 'plugin://esign/esign?env=${env}&flowId=${flowId}&signerId=${signerId}&skipResult=${skipResult}&skipGuide=${skipGuide}',
})

字段说明：

字段名称	必传	字段说明	案例
flowId	是	签署流程ID（signFlowId），需要发起并开启签署流程后传入，才能进行跳转签署
signerId	是	签署人账号ID（psnId） 注：如果签署主体是企业，需要传入企业签署操作人账号ID
env	是	e签宝对接的服务端接口环境变量，默认生产环境 sml - 沙箱模拟环境 prod - 正式生产环境
skipResult	否	是否忽略签署成功后的页面展示，直接返回母体小程序页面，默认：false true - 忽略签署成功后的页面 false - 展示签署成功后的页面
skipGuide	否	是否忽略签署前置页，默认：false true - 忽略签署前置页面 false - 展示签署前置页面 （注：需保证当前登录用户已经实名，才可通过设置true来忽略签署前置页）	前置页如下图所示：

4. 通过js接口获取签署状态

方式1：

通过插件签署页签署成功后，会返回到母体小程序页面，母体小程序可以监听onShow事件，通过e签宝电子合同小程序插件提供的js接口来获取本次签署状态

const esignPlugin = requirePlugin("esign");
 
Page({
  onShow() {
    // 通过插件js接口获取签署状态
    const {
      code,
      message,
    } = esignPlugin.getSignStatusInfo();
 
    console.log('code', code)
    console.log('message', message)
  },
});

方式2：

通过js接口addEventListener方法监听signStatusInfo事件，如下：

const esignPlugin = requirePlugin("esign");
 
Page({
  onLoad() {
    // 监听签署状态信息事件
    esignPlugin.addEventListener('signStatusInfo', ({code, message}) => {
      console.log('code', code)
      console.log('message', message)
    });
  },
});

响应示例：

注意事项

请勿使用ide工具调试，ide获取插件的authCode有问题。需要使用手机扫码预览真机测试，工具直接调试会出现以下报错：