博客主页 😞
uniapp微信小程序接入微信云函数(文本检测和图片检测篇)
uniapp微信小程序接入微信云函数(文本检测和图片检测篇)

Author:

芝麻

©

Wordage:

共计 5373 字

needs:

约 2 分钟

Popular:

222 ℃

Created:

:本文最后更新于2024年06月07日,已经过了581天没有更新,若内容或图片失效,请留言反馈
目 录

参考文档链接:csdn
使用说明:文章中的用法是放在图片和文本上传中,我的用处是微信授权头像和昵称
后记:感觉自己nc了,微信头像本来就是经过验证的,多过一遍没有意义,具体问题下方会说明。
代码实例:

    <template>
    <view v-if="openModal" class="wx-authorization-modal">
        <view class="wam__mask" @touchmove.prevent="" @tap.stop="closeModal"></view>

        <!-- 内容区域 -->
        <view class="wam__wrapper">
            <!-- 关闭按钮 -->
            <view class="wam__close-btn" @tap.stop="closeModal">
                <text class="tn-icon-close"></text>
            </view>
            <!-- 标题 -->
            <view class="wam__title">获取您的昵称、头像</view>
            <!-- tips -->
            <view class="wam__sub-title">
                获取用户头像、昵称,主要用于向用户提供具有辨识度的用户中心界面
            </view>

            <!-- 头像选择 -->
            <view class="wam__avatar">
                <view class="button-shadow">
                    <button class="button" open-type="chooseAvatar" @chooseavatar="chooseAvatarEvent">
                        <view v-if="userInfo.avatar" class="avatar__image">
                            <image class="image" :src="userInfo.avatar" mode="aspectFill"></image>
                        </view>
                        <view v-else class="avatar__empty">
                            <image class="image"
                                src="https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1668928062708-assets/web-upload/764843cf-055a-4cb6-b5d3-dca528b33fd4.jpeg"
                                mode="aspectFill"></image>
                        </view>
                        <view class="avatar--icon">
                            <view class="tn-icon-camera-fill"></view>
                        </view>
                    </button>
                </view>
            </view>

            <!-- 昵称输入 -->
            <view class="wam__nickname">
                <view class="nickname__data">
                    <input class="input" type="nickname" v-model="inputNickname" placeholder="请输入昵称"
                        placeholder-style="color: #AAAAAA;" @change="handleNicknameChange">
                </view>
            </view>


            <!-- 保存按钮 -->
            <view class="wam__submit-btn" :class="[{
          'disabled': !userInfo.avatar || !userInfo.nickname
        }]" hover-class="tn-btn-hover-class" :hover-stay-time="150" @tap.stop="submitUserInfo">
                保 存
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        options: {
            // 在微信小程序中将组件节点渲染为虚拟节点,更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
            virtualHost: true
        },
        props: {
            value: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                openModal: false,
                userInfo: {
                    avatar: '',
                    nickname: ''
                },
                inputNickname: ''
            }
        },
        watch: {
            value: {
                handler(val) {
                    this.openModal = val
                },
                immediate: true
            },
        },
        
        methods: {
            //选择昵称
            handleNicknameChange(e) {
                const newNickname = e.detail.value;
                // 保存当前上下文的 this
                var that = this;
                wx.cloud.init({
                    env: "",
                })
                if(newNickname){
                    console.log(newNickname)
                    wx.cloud.callFunction({
                        name: 'checkTextSec',
                        data: {
                            content:newNickname
                        },
                        success: (res) => {
                            if (res.result.errCode === 0) {
                                if (res.result.result.label === 100) {
                                    console.log('合法文本')
                                    that.userInfo.nickname = newNickname;
                                } else {
                                    console.log('违法文本')
                                }
                            } else {
                                console.log('其他异常')
                            }
                        },
                        fail: (e) => {
                            console.log(e)
                        }
                    })
                }
                
            },
            // 头像选择
            chooseAvatarEvent(e) {
                var imageUrl = e.detail.avatarUrl
                console.log(imageUrl)
                // 保存当前上下文的 this
                var that = this;
                //调用云函数checkIploadInfo,检测头像
                uni.getImageInfo({
                    src: imageUrl,
                    success: function(info) {
                        // 使用 uni.request 获取图片数据
                        uni.request({
                            url: imageUrl,
                            responseType: 'arraybuffer',
                            success: function(response) {
                                // 图片数据转换为 ArrayBuffer 格式的二进制数据
                                var arrayBuffer = response.data;
                                wx.cloud.init({
                                    env: "",
                                })
                                wx.cloud.callFunction({
                                    name: "checkUploadInfo",
                                    data: {
                                        contentType: `image/jpeg`,
                                        arrayBuffer: arrayBuffer
                                    },
                                    success: (res) => {
                                        if (res.result.errCode === 0) {
                                            console.log('合法图片')
                                            that.userInfo.avatar = e.detail.avatarUrl
                                        } else if (res.result.errCode === 87014) {
                                            console.log('违法图片')
                                            uni.showToast({
                                                title: '违规图片,请重新上传',
                                                icon: 'error',
                                                duration: 2000
                                            });

                                        }
                                    },
                                    fail: () => {
                                        console.log('检测失败')
                                        uni.showToast({
                                            title: '上传失败,请重新选择图片',
                                            icon: 'error',
                                            duration: 2000
                                        });
                                    }
                                })
                            },
                            fail: function(error) {
                                console.error("加载图片失败:", error);
                            }
                        });
                    },
                    fail: function(error) {
                        console.error("获取图片信息失败:", error);
                    }
                });

            },
            // 更新用户信息
            submitUserInfo() {
                // 判断是否已经选择了用户头像和输入了用户昵称
                if (!this.userInfo.avatar || !this.userInfo.nickname) {
                    return uni.showToast({
                        icon: 'none',
                        title: '请选择头像和输入用户信息'
                    })
                }

                // 更新完成事件
                this.$emit('updated', this.userInfo)
            },

            // 关闭弹框
            closeModal() {
                this.$emit('input', false)
            },


        }
    }
</script>

使用的是图鸟的微信授权组件,实际使用后发现了几个问题:首先第一个头像授权,我添加头像验证的原因就是会涉及到上传本地图片,然后实际实验之后发现如果是违规图片,压根不会触发@chooseavatar,会报错,没有任何返回值;而合规图片就可以正常触发,得到返回值。查看了请求接口,并不是本地上传接口,应该是先上传到微信那边检测没过。第二个文本检测,需要使用@change事件,其他事件都无法获得值;并且change会调用两次,第一次无返回值,第二次才会有值,不做判断会浪费验证次数。

文章二维码
uniapp微信小程序接入微信云函数(文本检测和图片检测篇)
 博主关闭了当前页面的评论
博客主页 芝麻博客·单人主站 哦哈哟
萌ICP备20220001号 苏ICP备2021051187号-1 本站已运行 3 年 69 天 16 小时 28 分 自豪地使用 Typecho 建站,并搭配 MyDiary 主题 Copyright © 2022 ~ 2026. 芝麻博客·单人主站 All rights reserved.
打赏图
打赏博主
欢迎
欢迎
欢迎访问芝麻博客·单人主站
与其说是博客,不如说是错题集
搜 索
足 迹
分 类
  • 默认分类
  • 前端
  • 后端
  • 模型
  • 游戏
  • 日语
  • 博客