passport-miniprogram-sdk

证件照小程序 sdk

安装 SDK

npm 安装

微信官方 npm 文档

npm i @gaoding/passport-miniprogram-sdk

在需要使用插件的页面配置 page.json 中添加

{
  "usingComponents": {
    "passport-miniprogram-sdk": "@gaoding/passport-miniprogram-sdk"
  }
}

手动安装

不使用构建工具序安装，拷贝仓库中 components 下的文件到项目中的放组件的目录，同样需要在页面配置json中声明

{
  "usingComponents": {
    "passport-miniprogram-sdk": "../../components/passport-miniprogram-sdk/passport-miniprogram-sdk"
  }
}

其他第三方框架引用

• mpvue 参考
• taro 参考

使用示例

<passport-miniprogram-sdk
    imageUrl="{{imageUrl}}"
    destWidth="{{width}}"
    destHeight="{{height}}"
    state="{{key}}"
    enableSafeArea="{{enableSafeArea}}"
    navigateTo="{{navigateTo}}"
    appId="{{appId}}">
</passport-miniprogram-sdk>

参数

| 字段 | 类型 | 必须 | 默认 | 说明 | 示例 | | --- | --- | --- | --- | --- | --- | | imageUrl | String | yes | - | 需要编辑的证件照照片地址，需要允许外网访问 | 'https://st-gdx.dancf.com/mattings/3012006/images/20181128-142916-5ae8.jpg' | | destWidth | Number | yes | - | 生成的证件照宽度 | 413 | | destHeight | Number | yes | - | 生成的证件照高度 | 579 | | appId | String | yes | - | 稿定官方提供的 appID | 7b812875277383dae76264895b14d222 | | navigateTo | String | yes | - | 编辑完成后的跳转页面地址 | '../pages/complete/complete' | | state | String | - | - | 业务标识字段，在完成编辑后回传给业务方 | '1' | | modules | String | - | background,whitening,face,pupil,expression | 开放的调整模块，以 , 分割 | 'background,whitening' | | enableSafeArea | Boolean | - | false | 标记设备是否为全面屏设备 | true | | guides | Number | - | 0 | 是否展示新手引导,按位或操作 | 0 |

modules 的允许值为:

• background: 背景
• whitening: 美白
• face: 脸部
• pupil: 瞳孔
• expression: 表情

guides 的表示值为:

• 0b01: 瞳孔操作引导
• 0b10: 对比引导

编辑完成跳转参数

在编辑完成后（点击编辑器中的完成按钮）

编辑器会跳转到传入参数 navigateTo 所指定的页面，并在 url 中带上如下参数

| 字段 | 类型 | 必须 | 默认 | 说明 | 示例 | | --- | --- | --- | --- | --- | --- | | image_url | String | yes | - | 编辑完成后的结果图地址 | https://st-gdx.dancf.com/mattings/3012006/images/20181128-142916-5ae8.jpg | | state | String | yes | - | 在编辑器进入时传入的业务标识字段 | 0 | | guides | Number | - | 0 | 编辑器是否展示过新手引导，提供给业务方判断下次用户进入时还是否需要显示引导 | 2 |

guides 的表示值为:

• 0b01: 瞳孔操作引导
• 0b10: 对比引导

url 示例

../pages/complete/complete?url=https://st-gdx.dancf.com/mattings/3012006/images/20181128-142916-5ae8.jpg&key=0&guides=2

识别失败说明

当用户上传的图片识别失败时，页面中会提示用户“识别失败，重新上传”，并在用户点击确定后会返回小程序的上一个页面