[打怪升级]小程序评论回复和发帖功能实战（二） - WXOPEN Club

这次分享下“发帖功能”，这个功能其实风险蛮大的，特别是对一些敏感言论的控制，如果没有做好可能导致小程序__被封__，所以除了必要的人工审核和巡查以外，我们需要一些__微信安全监测__API的帮忙，在AI加持下，现在很多大公司对内容和图片的效率大大提高了。

这个DEMO仅是一个流程示例，由于涉及到云函数和“真”敏感图，这里就有文字图代替。

发帖的功能只要理清思路，其实并不复杂，利用机器AI做__内容审查__是关键，直接关系到小程序的整体安全。

用户选择手机图库或拍照

let tempImg = 0; //代表已选择的图片
wx.chooseImage({
    count: 3 - tempImg.length, //选择不超过3张照片,去掉当前已经选择的照片
    sizeType: ['original', 'compressed'],  //获取原图或者压缩图
    sourceType: ['album', 'camera'],  //获取图片来源 图库、拍照
    success(res) {
        // tempFilePath可以作为img标签的src属性显示图片
        let tempFilePaths = res.tempFilePaths;
        console.log(tempFilePaths);
        
        //举例：这里可以size 来判断图片是否大于 1MB，方便后面内容检查
        if (res.tempFiles[0] && res.tempFiles[0].size > 1024 * 1024) {
            console.log("图片大于1MB啦")
        }
    }
})

这里用到的方法是__chooseImage__，它可以设置让用户选择手机图片库和拍照获得，需要注意的是考虑到后面要用微信自带API做图片安全检查，图片大小不能超过1MB，所以需要设置__sizeType__为__compressed__。

内容检查（重点）

由于内容安全对于小程序运营至关重要，稍有不慎就容易导致小程序被封，所以在这块的校验除了常规人工检查外，我们还可以用到微信的内容安全API。

为什么用微信官方提供的API？
主要有二点：有一定的免费额度，基于企鹅大厂的专业AI检查。

1、云函数+云调用

目录结构

├─checkContent
│      config.json   //云调用的权限配置
│      index.js   //云服务器node 入口文件
│      package-lock.json 
│      package.json   // NPM包依赖
│ ...

为什么要强调这个？
因为本人一开始在用云函数+云调用的时候，经常会出现各种不明BUG，很多都是因为目录里面少传文件，或者少配置。

云函数内容：

const cloud = require('wx-server-sdk');
cloud.init();
exports.main = async (event, context) => {
    console.log(event.txt);
    const { value, txt } = event;
    try {
        let msgR = false;
        let imageR = false;
        //检查 文字内容是否违规
        if (txt) {
            msgR = await cloud.openapi.security.msgSecCheck({
                content: txt
            })
        }
        //检查 图片内容是否违规
        if (value) {
            imageR = await cloud.openapi.security.imgSecCheck({
                media: {
                    header: { 'Content-Type': 'application/octet-stream' },
                    contentType: 'image/png',
                    value: Buffer.from(value)
                }
            })
        }
        return {
            msgR,   //内容检查返回值
            imageR   //图片检查返回值
        };
    } catch (err) {
        // 错误处理
        // err.errCode !== 0
        return err
    }
}

这里主要用到__security.msgSecCheck__和__security.imgSecCheck__这2个微信开放云调用方法（需开发者工具版本 >= 1.02.1904090），以往我们还要在服务器上单独写个方法，现在变得十分的方便，直接在云函数中调用即可。

这里需要重点说2个点

图片security.imgSecCheck 方法只能接收buffer，所以需要把temp的临时图片转化为buffer的形式传过去，我们这里用到 getFileSystemManager 的方法。
如果目录文件中没有__config.json__，需要自己建一个，并且做一个授权的配置。

{
    "permissions": {
        "openapi": [
            "security.msgSecCheck",
            "security.imgSecCheck"
        ]
    }
}

2、检查文字内容安全

wx.cloud.callFunction({
    name: 'checkContent',
    data: {
        txt: "乐于分享，一起进步"
    },
    success(_res) {
        console.log(_res)
    },
    fail(_res) {
        console.log(_res)
    }
})

//返回值参考
{
    "errMsg": "cloud.callFunction:ok",
    "result": {
        "msgR": {
            "errMsg": "openapi.security.msgSecCheck:ok",
            "errCode": 0
        },
        "imageR": false
    },
    "requestID": "77952319-b2b4-11e9-bdc8-525400192d0e"
}

应用场景举例：

用户个人资料违规文字检测；
媒体新闻类用户发表文章，评论内容检测；
游戏类用户编辑上传的素材(如答题类小游戏用户上传的问题及答案)检测等。频率限制：单个 appId 调用上限为 4000 次/分钟，2,000,000 次/天*

通过wx.cloud.callFunction的方法调用__checkContent__的云函数，检查一段文本是否含有违法违规内容。

3、检查图片内容安全

//获取 temp临时图片文件的 buffer
wx.getFileSystemManager().readFile({
    filePath: tempImg[0],  //这里做示例，所以就选取第一张图片
    success: buffer => {
        console.log(buffer.data)
        //这里是 云函数调用方法
        wx.cloud.callFunction({
            name: 'checkContent',
            data: {
                value: buffer.data
            },
            success(json) {
                console.log(json.result.imageR)
                if (json.result.imageR.errCode == 87014) {
                    wx.showToast({
                        title: '图片含有违法违规内容',
                        icon: 'none'
                    });
                    console.log("bad")
                } else {
                    //图片正常
                }
            }
        })
    }
})

//返回值参考
{
    "errMsg": "cloud.callFunction:ok",
    "result": {
        "msgR": false,
        "imageR": {
            "errMsg": "openapi.security.imgSecCheck:ok",
            "errCode": 0
        }
    },
    "requestID": "c126353c2d-b40b-11e9-81c4d-525400235f2a"
}

应用场景举例：

图片智能鉴黄：涉及拍照的工具类应用(如美拍，识图类应用)用户拍照上传检测；电商类商品上架图片检测；媒体类用户文章里的图片检测等；
敏感人脸识别：用户头像；媒体类用户文章里的图片检测；社交类用户上传的图片检测等。频率限制：单个 appId 调用上限为 2000 次/分钟，200,000 次/天*（图片大小限制：1M）

这里先要用 getFileSystemManager() 获取临时图片的buffer（这个是重点），然后再通过wx.cloud.callFunction的方法调用 __checkContent__的云函数中__security.imgSecCheck__的方法，校验一张图片是否含有违法违规内容。

一开始本人调试的时候，也遇到无法上传的问题，必须通过文件管理(getFileSystemManager)获取buffer后才能上传检查图片，耗费了本人不少debugger时间。

完整代码

原本想做个实际的demo（代码片段）分享给大家打开参考的，但是云函数必须是一个已注册的APPID，无奈只能贴代码。

这里主要还是提供一个整体思路，希望能帮助大家减少开发成本，更好的解决问题和完成任务 ^_^

html部分：

<!-- pages/post /index.wxml -->
<view class="wrap">
        <view class="title">
                <input placeholder="智酷方程式，乐于分享" maxlength="30"  bindinput="getTitle"/>
        </view>
        <view class="content">
                <textarea auto-focus="true" maxlength="200" bindinput="textareaCtrl" placeholder-style="color:#999;" placeholder="关注公众号，一起学习，一起进步" />
                <view class='fontNum'>{{content.length}}/200</view>
        </view>
        <view class="chooseImg">
                <block wx:for="{{tempImg}}" wx:for-item="item" wx:key="ids" wx:for-index="index">
                        <view class="chooseImgBox">
                                <image src="{{item}}" />
                                <view data-index="{{index}}" catch:tap="removeImg" class="removeImg"></view>
                        </view>
                </block>
                <!-- 判断图片 大于等于3张的时候 取消 更多 -->
                <block wx:if="{{tempImg.length < 3}}">
                        <view class="chooseImgBoxMore" catch:tap="choosePhoto">
                                <view class="arrow"></view>
                        </view>
                </block>
        </view>
        <view class='submit' catch:tap="submitPost">
                <view class='blue'>提交</view>
                <view>取消</view>
        </view>
</view>

JS部分：

Page({
    /**
     * 页面的初始数据
     */
    data: {
        titleDetail: "", //帖子title内容
        content: "", //发帖内容
        tempImg: [], //选择图片的缩略图，临时地址
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        wx.cloud.init();
    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {

    },
    /**
     * 检测输入字数
     * @param {object} e 
     */
    textareaCtrl: function (e) {
        if (e.detail.value) {
            this.setData({
                content: e.detail.value
            })
        } else {
            this.setData({
                content: ""
            })
        }
    },
    /**
     * 选择图片
     */
    choosePhoto() {
        let self = this;
        let tempImg = self.data.tempImg;
        if (tempImg.length > 2) {
            return;
        }
        wx.chooseImage({
            count: 3 - tempImg.length, //选择不超过3张照片,去掉当前已经选择的照片
            sizeType: ['original', 'compressed'],
            sourceType: ['album', 'camera'],
            success(res) {
                console.log(res);
                // tempFilePath可以作为img标签的src属性显示图片
                let tempFilePaths = res.tempFilePaths;
                tempImg = tempImg.concat(tempFilePaths);
                console.log(tempImg);
                self.setData({
                    tempImg
                })

                wx.getFileSystemManager().readFile({
                    filePath: tempImg[0],
                    success: buffer => {
                        console.log(buffer.data)
                        wx.cloud.callFunction({
                            name: 'checkContent',
                            data: {
                                value: buffer.data
                            },
                            success(json) {
                                console.log(JSON.stringify(json))
                                console.log(json.result.imageR)
                                if (json.result.imageR.errCode == 87014) {
                                    wx.showToast({
                                        title: '图片含有违法违规内容',
                                        icon: 'none'
                                    });
                                    console.log("bad")
                                } else {
                                    //图片正常
                                }
                            }
                        })
                    }
                })
            },
            fail: err => {
                console.log(err)
            }
        })
    },
    /**
     * 删除照片
     */
    removeImg(e) {
        let self = this;
        let index = e.currentTarget.dataset.index;
        console.log(e);
        let tempImg = self.data.tempImg;
        tempImg.splice(index, 1);
        self.setData({
            tempImg
        })
    },
    /**
     * 发贴
     */
    submitPost(e) {
        let { titleDetail, content } = this.data;
        wx.cloud.callFunction({
            name: 'checkContent',
            data: {
                txt: content
            },
            success(_res) {
                console.log(JSON.stringify(_res))

                wx.navigateTo({
                    url: "/pages/postimg/result"
                })
            },
            fail(_res) {
                console.log(_res)
            }
        })
    }
})

往期回顾：
[打怪升级]小程序评论回复和发贴组件实战（一）

[填坑手册]小程序Canvas生成海报（一）
[拆弹时刻]小程序Canvas生成海报（二）
[填坑手册]小程序目录结构和component组件使用心得

weifang 1楼•3 年前

服务端接的时候图片检测很慢，要异步半小时左右，而且大小也会限制，云开发的话也会这样么