小程序

根据微信规定,小程序之间的跳转需要跳转与被跳转的两个小程序关联在同一个公众号下, 因此需要先将验证码小程序与你的公众号进行关联。关联小程序后,即可在小程序中使用验证码服务。详细步骤如下:

登录微信公众平台,关联小程序

使用公众号帐号登录微信公众平台,在管理员首页的左侧栏,可以找到 小程序 - 小程序管理 选项,点击进入。 在页面中选择关联小程序,并使用管理员账号完成身份确认。

关联小程序入口

搜索需要关联的验证码的小程序 AppID : wxb7c8f9ea9ceb4663, 点击 发送关联邀请。

关联小程序

关联之后24小时内,小程序状态会从待确认转换为已关联,请注意,调用验证码的小程序和验证码小程序需要关联到同一个公众号。

开通验证码服务,获取产品秘钥及验证码ID

登录易盾用户中心,在验证码服务中新建或选择已有产品,创建验证码ID,获取验证码的captchaId。

小程序客户端接入

在小程序中引入验证码可细分为以下三步:

小程序唤起验证码

通过navigator组件跳转至验证码小程序。用户完成或关闭验证码后,将返回至调用方的小程序。

<!-- 由于小程序限制,只能通过navigator跳转到验证码的小程序 -->
<!-- 如果跳转前需要校验表单,请先将button的disabled属性设为true,
     同时表单中使用bind:input事件校验合法性,
     完成后再将button的disabled属性设为false
     captchaId替换成申请到的验证码captchaId -->
<navigator target="miniProgram"
  app-id="wxb7c8f9ea9ceb4663"
  path="/pages/captcha/index"
  extra-data="{{ { captchaId: 'captchaId' } }}">
    <button>验证</button>
</navigator>

app.js获取验证结果

在网易易盾验证码中验证。

关联小程序

验证成功后,验证码小程序页面关闭,验证结果会返回给调用验证码的小程序页面。由于小程序间相互跳转过程中产生的数据仅能在app.js中获取到,故需要在app.js的onShow中添加以下代码,来捕获验证结果。

App({
  // ...
  onShow: function(options) {
    // 解决各类回调的兼容问题
    if (!this.captchaValidateExpire) this.captchaValidateExpire = {}

    if (options.scene === 1038 && options.referrerInfo.appId === 'wxb7c8f9ea9ceb4663') {
      const result = options.referrerInfo.extraData;
      if (result.ret === 0) {
        const validate = result.validate
        if (!this.captchaValidateExpire[validate]) {
          this.globalData.captchaResult = result
          this.captchaValidateExpire[validate] = true
        }
      } else {
        // 验证失败
      }
    }
  },
  // ...
})

验证结果(result)参数说明

参数名类型说明
retNumber0为验证成功,1为验证失败
validateString仅验证成功时会有,验证成功的code,用于后台校验验证合法性

将验证结果返回至服务端校验

在小程序页面的onShow阶段将验证结果及待提交的表单数据一起提交到服务器,进行校验。

const app = getApp()

Page({
  data: {
    // ...
  },
  onShow() {
    const captchaResult = app.globalData.captchaResult
    app.globalData.captchaResult = null // 验证码的验证code是一次性的,取完需要置空
    if (captchaResult && captchaResult.ret === 0) {
      // 将验证码的结果返回至服务端校验
      // const validate = captchaResult.validate
      // ...
    }
  },
  // ...
})

小程序使用限制

需要用户确认跳转,从小程序 2.3.0 版本开始,在跳转至其他小程序前,将统一增加弹窗,询问是否跳转,用户确认后才可以跳转其他小程序。如果用户点击取消,则回调 fail cancel。

每个小程序可跳转的其他小程序数量限制为不超过 10 个,从 2.4.0 版本以及指定日期(具体待定)开始,开发者提交新版小程序代码时,如使用了跳转其他小程序功能,则需要在代码配置中声明将要跳转的小程序名单,限定不超过 10 个,否则将无法通过审核。该名单可在发布新版时更新,不支持动态修改。配置方法详见配置。调用此接口时,所跳转的 appId 必须在配置列表中,否则回调 fail appId "${appId}" is not in navigateToMiniProgramAppIdList。

详见小程序说明地址:https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

95163223