ymcai

拥抱贷款合同强制阅读新规的小程序改造方案

背景

2020年7月17日,中国银保监会发布《商业银行互联网贷款管理暂行办法》,其中第十七条规定:商业银行应当在贷款申请流程中,加入强制阅读贷款合同环节,并设置合理的阅读时间限制。次月,我行印发的《互联网贷款风险管理办法》即包含上述内容。

这意味着存量产品的协议阅读都需要改造:

  • 加入最小阅读时间要求
  • 用户确认才能继续业务逻辑

此前,行内存量产品的协议一般以 PDF 文件的形式给到开发,最终以 在线阅读 或者 下载后浏览 的形式呈现给用户。

在微信小程序中,普遍的做法就是 下载后浏览(即使用 wx.openDocument API)。

改造的主要矛盾在于:

小程序调起的 PDF 浏览页本质是一个原生页面 —— 它属于微信提供给小程序的通用能力,独立于我们的小程序之外,不提供 UI 自定义。换言之既不能在上面叠加元素,倒计时或按钮,也获知不了阅读情况。除非微信官方更新,否则 wx.openDocument 不可能满足需求。

改造方案探索

团队内部讨论后,初步拟定了几种改造方案:

  1. 保留“下载后浏览”的形式,计算用户离开小程序的时间作为阅读时间。
  2. 把 PDF 文件转换成图片、文本,直接插入小程序页面。
  3. 在网页端实现阅读功能,再在小程序中嵌入网页,二者协同。

第一种方案的改动最小,但是计时方式过于模糊,并且在多份协议必读的场景下要反复在小程序和阅读页间切换,这操作太重了。

第二种方案的优点是前端表现灵活,能够做成页面、浮层等任何想得到的形式。但是带来了“由谁负责把 PDF 文件转成图文”的新问题。人工处理增加工作量,只能覆盖通用协议;后台处理增加服务器开销,实测效率也不够高。

相比前两者,第三种方案看起来靠谱许多。 在网页中解析和展示 PDF 内容是成熟的,有现成的开源库 Mozilla PDF.js 可以实现。

然而我们还是遇到了一些小问题……

为了防止开发者滥用网页,影响用户体验或者逃避审核,微信对小程序的 web-view 组件(用于嵌入网页)做了诸多限制

  • 必须铺满整个页面
  • 网页和小程序的通信是单向、非实时的

前者制约交互视觉设计,无法采用浮层的形式。

后者制约通信 —— 小程序端只能在用户退出(嵌入网页内容的)页面时,才能收到来自网页端、在整个浏览协议的过程中产生的消息。

综合各种因素后,方案的形态基本确定:

阅读器功能设计

功能方面,定位是做一个跨业务的通用方案,目标能基本覆盖差异化的需求。

与业务同学沟通后,梳理出了一些必要特性:

  • 支持设置一个总的阅读秒数,倒计时期间可随意切换协议。
  • 支持为每个协议单独设置不同的秒数,读完一份才能继续阅读下一份。
  • 支持要求阅读到底部。
  • 支持跳过非必读的协议。
  • 支持修改配色和文案。

这些功能是用户进入“协议浏览页”后的事情了。那么之前呢,表单页需不需要做一些改造呢?当然要。

过去,用户点击复选框即表示“同意全部协议”,实际阅读与否我们(开发者)不 care 。加入“强制阅读”后,需要拦截勾选操作,引导读完协议回来再勾上。

过去,用户点击某一协议文字链,打开相应 PDF 文件即可,要看其他协议需要自行回退后点击其他文字链。加入“强制阅读”后,应该要引导用户按要求,一份接一份地,读完全部必读协议。

这部分前置逻辑,原本是打算由方案的使用者处理的。

后来还是担心这样做会增加沟通和使用成本,决定进一步封装 —— 把勾选,包括复选框和文字链,还有“协议浏览页”整到一块。

我们希望使用这个方案的开发同学,只需要知道用户“勾选了没”就够了。

整合勾选逻辑

这个整合了勾选、文字链点击、强制阅读的完整逻辑的组件,我们称之为 —— 协议勾选(Agree)

小程序侧根据用户操作,构造 H5 的访问链接,然后跳转到一个新页面访问 H5。H5 侧会给协议们重新排个序:先展示指定放第一位的协议(用户点击文字链时),然后展示必读协议,最后是可以选择跳过的非必读协议。

用户浏览完协议并点击“同意”按钮时,页面回退,组件触发事件通知开发者:勾选状态已改变。

使用 Agree 组件的代码是这样的:

<!-- wxml -->
<we-agree list="{{ list }}" seconds="{{ 15 }}" bind:change="onChange" />
// js
Page({
  data: {
    list: [
      { title: '《服务协议》', url: './example_1.pdf' },
      // 其他协议 ...
    ]
  }
})

最终实现效果:

后记

目前这个文档“强制阅读”方案已在我行的多款金融小程序中使用。为优化体验,后续亦逐渐加入“双指滑动缩放”、“文档合并展示”等功能特性。

不过,微信小程序环境和依赖库不小的体积决定了优化的空间相当有限。我更希望这是一个临时适应监管变化的过渡方案,期待微信官方直接提供面向金融行业的文档浏览 API。