云开发助力开发小程序多图片内容安全监测

2023-09-16 12:15:25

前言

随着互联网的快速发展，小程序应用已成为企业和开发者的宠儿，拥有广泛的受众和用户群。在小程序的开发过程中，图片内容作为重要组成部分，难免会遇到涉及安全监测的问题。如果未能及时发现和过滤不当或非法图片内容，可能会对小程序的声誉和合法性造成严重影响。

为了帮助小程序开发者解决这一难题，腾讯云推出了云开发Cloudbase服务。该服务采用 Serverless 架构，无需搭建后端服务器，即可轻松实现小程序图片内容的安全监测。本指南将指导您如何使用云开发平台构建一个多图片内容安全监测小程序，该小程序可以帮助您快速检查和过滤掉违法或不适当的图片内容，保障小程序的健康发展。

准备工作

在开始构建小程序之前，您需要确保满足以下条件：

注册腾讯云账号并登录云开发控制台（https://console.cloud.tencent.com/tcb）。
开通云开发服务并创建一个新项目。
拥有一个可用的微信小程序项目。
熟悉微信小程序开发相关知识。

项目构建

1. 云开发环境配置

在云开发控制台的项目管理页面，找到“快速创建”部分，然后选择“小程序”。
按照提示选择小程序类型和相关信息，然后单击“创建项目”。
云开发平台会自动创建相关云资源，包括数据库、存储桶等。

2. 安装云开发 SDK

打开微信小程序项目，在项目根目录下运行以下命令：

npm install --save @cloudbase/framework

在小程序项目中，打开 app.js 文件，并在顶部添加以下代码：

import { CloudBaseFramework } from '@cloudbase/framework'

在 app.js 文件的 onLaunch 函数中，添加以下代码：

CloudBaseFramework.init({
  env: '你的云开发环境ID'
})

3. 创建图片内容安全检测函数

在云开发控制台的“函数管理”页面，单击“新建函数”。
选择“云函数”，然后单击“创建”。
在函数名称输入框中，输入“checkImage”。
在函数代码输入框中，输入以下代码：

const cloud = require('@cloudbase/cloud-sdk')

const db = cloud.database()
const collection = db.collection('images')

exports.main = async (event, context) => {
  const { fileID } = event

  const res = await cloud.openapi.security.imgSecCheck({
    content: 'cloud://你的云存储桶/' + fileID
  })

  if (res.code === 0) {
    await collection.add({
      fileID,
      result: res.result
    })
    return {
      code: 0,
      message: '图片安全检查通过'
    }
  } else {
    return {
      code: 1,
      message: '图片安全检查不通过'
    }
  }
}

单击“保存”按钮。

4. 创建小程序页面

在小程序项目中，创建一个新页面，命名为“checkImage”。
在 checkImage.js 文件中，添加以下代码：

const app = getApp()

Page({
  data: {
    fileID: '',
    result: ''
  },
  chooseImage: function() {
    wx.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success: (res) => {
        const fileID = res.tempFilePaths[0]
        this.setData({
          fileID
        })

        // 调用云函数进行图片安全检查
        wx.cloud.callFunction({
          name: 'checkImage',
          data: {
            fileID
          },
          success: (res) => {
            this.setData({
              result: res.result
            })
          },
          fail: (err) => {
            console.error(err)
          }
        })
      }
    })
  }
})

在 checkImage.wxml 文件中，添加以下代码：

<view class="container">
  <view class="title">图片安全检查</view>
  <view class="input-container">
    <button type="primary" bindtap="chooseImage">选择图片</button>
  </view>
  <view class="result-container">
    <text>检查结果：</text>
    <text>{{result}}</text>
  </view>
</view>

在 checkImage.wxss 文件中，添加以下代码：

.container {
  padding: 20px;
}

.title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.input-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.button {
  margin-right: 10px;
}

.result-container {
  margin-top: 20px;
}