【小程序】如何”加速“微信小程序内容安全接口的云调用速度

简介

使用云开发来实现内容安全检测比较方便，并且对个人小程序来说是零成本。但是也有一些问题

1. 问题一：通过云函数调用图片安全接口时，如果直接传入Buffer类型的图片数据，真机可能会返回-404012错误。
   这个问题可以先将图片上传至云存储，再在云函数中下载图片，然后调用内容安全接口，可以避免此问题，并且实测速度较直接传入Buffer有所提升。

2. 内容安全接口的图片大小限制为1M。
   为避免出现这个问题，可以使用Canvas压缩图片。或调用获取本机图片的接口时默认选择压缩的图片，也可以规避大部分问题。

3. 云函数的访问速度较慢（尤其是小程序启动后的第一次调用）。简单看了一下，用云函数调用文本安全时，一般是0.5-0.6s，还行。而调用图片安全时，用传入Buffer数据的方法检测一个500K的图片大约需5s；如果用先上传云存储，再调用云函数检测的方法，上传需大约0.7s，调云函数检测需2.5s，还是需要3s+，可能会影响一定的用户体验。

下面主要介绍一下如何“减少”内容安全的请求时间，这个方法也可以用于其他方面。

基本方法是在用户点击提交前进行内容安全检测，将请求结果缓存为一个promise对象，然后在用户提交时使用之前缓存的promise的then方法获取到检测结果。如果这里看明白了，后面的就不用看了，可以自己去实现了。

有些代码没有简化了，所以看起来可能有点复杂，所以可以只看文字注释。

简单的示例代码

图片安全检测

首先将图片安全检测封装为一个Promise类型的函数

async function imgSecCheck({
   path}){
    // async关键词，声明返回Promise
  let cloudPath = "images/avatars/"+ path.replace(/[\/\\:]/g, "_");
  // 首先上传云存储
  let {
   fileID} = await wx.cloud.uploadFile({
    cloudPath, filePath: path });
  // 调用云函数
  let res = await wx.cloud.callFunction({
   
    // 这里的参数结构要根据你写的云函数来具体确定，
    // 该示例代码所对应的云函数代码在后文有给出
    name: "openapi", 
    data:{
   
      name:"security.imgSecCheck",
      data:{
    fileID }
    }
  });
  return res.result;
}

现在要在一个页面实现图片安全检测

在用户选择本机的图片后，获取到了图片的本地地址path，此时调用检测函数，并缓存返回的promise对象

let cache_promise = imgSecCheck({
    path })

在提交时，使用then来获取缓存的结果，这里并不需要判断是否请求完成。像这样在用户提交保存前进行检测，可以减少一点用户的等待时间，理想状态下用户等待的检测时间可以为0s。

cache_promise.then(res=>{
   
  if(res.errCode==87014){
   
    // 图片有问题，提示用户
  }else{
   
    // 图片没有问题，执行其他逻辑
  }
})

文本安全检测

与图片检测类似，也可以用上面相同的方法来实现“加速”

首先将文本安全检测封装为一个Promise类型的函数

async function msgSecCheck({
   content}){
    // async关键词，声明返回Promise
  let res = await wx.cloud.callFunction({
   
    // 这里的参数结构要根据你写的云函数来具体确定，
    // 该示例代码所对应的云函数代码在后文有给出
    name: "openapi", 
    data:{
   
      name:"security.msgSecCheck",
      data:{
    content }
    }
  });
  return res.result;
}

可以在用户实时输入的时候，进行提前检测，于是将该函数绑定到input组件的输入事件bindinput回调上，或者绑定到输入框的失焦事件bindblur回调上，根据不同需求来选择即可。

<!--wxml-->
<input bindinput="preCheck"/>
<!--或者用下面这个绑定到blur回调上-->
<input bindblur="preCheck"/>

// js
Page({
   
  preCheck({
   detail:{
   value}}){
   
    // 缓存检测结果 
    this.cache_promise = msgSecCheck({
    content: value });
  }
})

如果绑定到bindinput，函数会在短时间被多次回调，此时需要对上面的msgSecCheck进行修饰，让其两次执行间必须间隔1s，且最后一次的回调一定执行。

可以使用限频函数throttle对其进行修饰：

msgSecCheck = throttle(msgSecCheck, 1000, {
   } );

这里用的的throttle函数取自微信官方的一个代码片段

function throttle(func, wait, options)