uni-app:微信小程序:得到用户的微信头像和昵称(hbuilderx 3.7.3)
2023-09-14 08:59:32 时间
一,js代码:
<template> <view> <view class="avatarUrl"> <button type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar"> <image :src="avatarUrl" class="refreshIcon" style="margin-top: 30rpx; width:500rpx;height:500rpx;"></image> </button> </view> <view class="nickname" style="display: flex;flex-direction: row;margin-top: 20rpx;"> <text class="weui-text">昵称:</text> <input type="nickname" class="weui-input" :value="nickName" @blur="bindblur" placeholder="请输入昵称" @input="bindinput" /> </view> <button type="primary" @click="save" style="width:710rpx;margin-left: 20rpx;margin-top: 20rpx;"> 保存 </button> </view> </template> <script> export default { data() { return { avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0', nickName: '' } }, methods: { //昵称输入框blur bindblur(e) { console.log('nickName', e) this.nickName = e.detail.value; }, //昵称输入框input bindinput(e) { console.log('nickName', e) this.nickName = e.detail.value; }, //选择头像 onChooseavatar(e) { console.log(e.detail); this.avatarUrl = e.detail.avatarUrl; }, //保存头像和昵称 save() { //判断输入数据 if (this.nickName.length < 2) { uni.showToast({ title:"昵称最少两个字", icon:"error", }) return false; } if (this.avatarUrl == 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0') { uni.showToast({ title:"请选择头像", icon:"error", }) return false; } //保存到线上 uni.showLoading({ title: '加载中' }); uni.uploadFile({ url: 'http://api.lhdtest.com/auth/save', filePath: this.avatarUrl, name: 'file', formData: { nickname: this.nickName, }, header: { }, success: res => { // 注意:这里返回的res.data类型是string 需要自己去转换为JSON let data = JSON.parse(res.data); if (data.code == 0) { //this.avatarUrl = data.data.url; uni.showToast({ title:"保存成功!", }) } }, fail: (error) => { uni.showToast({ title: error, duration: 2000 }); }, complete: () => { uni.hideLoading(); } }); }, } } </script> <style> .weui-input{ border: 1px solid gray; border-radius: 10rpx; height:66rpx; font-size: 50rpx; width:540rpx; margin-left: 20rpx; } .weui-text{ height:66rpx; font-size: 40rpx; line-height:66rpx; width:140rpx; margin-left: 20rpx; } </style>
说明:刘宏缔的架构森林是一个专注架构的博客,地址:https://www.cnblogs.com/architectforest
对应的源码可以访问这里获取: https://github.com/liuhongdi/
或: https://gitee.com/liuhongdi
说明:作者:刘宏缔 邮箱: 371125307@qq.com
二,php代码:
class Auth extends BaseController { //保存头像和昵称 public function save() { $userId = 1; $nickname = $this->request->param('nickname','','string'); //保存昵称 $staff = new UserModel(); $upRow = ["nickname"=>$nickname]; $res = $staff-> updateByUserId($upRow,$userId); //保存头像 $fileimg = request()->file('file'); if($fileimg) { $basedir = GConfig::get('images.userHeadDir'); $destFile = $basedir."/".$userId.".jpg"; $isUpload = move_uploaded_file($fileimg->getPathname(),$destFile); } //返回 if($res !== false) { $host = GConfig::get('images.userHeadHost'); $rand = rand(1000,9999); $head = $host."/".$userId.".jpg?rand=".$rand; $res = ['head'=>$head, 'nickname'=>$nickname]; return Result::Success($res); }else{ return Result::ErrorCode(400,'数据保存出错'); } } }
三,测试效果
四,查看hbuilderx的版本:
![](https://img2023.cnblogs.com/blog/1938691/202302/1938691-20230224142225914-1929024108.png)
相关文章
- php 微信支付V3 APP支付
- 微信支付(公众号支付APIJS、app支付)服务端统一下单接口java版
- Hybrid App技术批量制作APP应用与跨平台解决方案
- [Angular] Upgrade existing Angular app to Progressive Web App
- uni-app:运行到微信小程序模拟器(hbuilderx 3.6.18)
- uni-app:使用全局函数和全局变量判断当前平台(hbuilderx 3.6.18)
- android app 集成 支付宝支付 微信支付
- uni-app:运行到微信小程序模拟器(hbuilderx 3.6.18)
- uni-app:微信小程序:使用外部字体(hbuilderx 3.7.3)
- 关于 SAP Spartacus Shell App 客户应用的调试
- uni-app在微信小程序中无法拉起用户授权面板,uni.getUserInfo直接返回匿名数据
- html、vue、uni-app微信小程序的区别
- 适合做app的前端框架有哪些?webAPP&移动端App:react native、weex、flutter
- android 8.1 9.0 10.0 app应用卸载黑名单
- 〖Python APP 自动化测试实战篇⑨〗- 实战 - App自动化实战操作
- 〖Python APP 自动化测试实战篇⑩〗- app自动化总结与展望
- 个人或者企业怎么进行app开发?开发一款APP应用大概须要多少钱?
- 微信小程序:uni-app页面Page和组件Component生命周期执行的先后顺序