参考文档链接: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会调用两次,第一次无返回值,第二次才会有值,不做判断会浪费验证次数。