wx微信小程序实现头像昵称填写

备注:由于安全问题,微信来回调试 头像,昵称的获取,现在主打用户自己填写和设置昵称。然后提交保存到自己的服务器上面!

《《代码块如下》》

wxml:

复制代码
<view data-weui-theme="{{theme}}">
  <button class="avatar-wrapper" open-type="chooseAvatar" bindchooseavatar="onChooseAvatar">
    <image class="avatar" src="{{avatarUrl}}"></image>
  </button> 
  <form catchsubmit="formSubmit">
    <view class="row">
      <view class="text1">昵称:</view>
        <input type="nickname" class="weui-input" name="nickname" placeholder="请输入昵称"/>
    </view>
    <button type="primary" style="margin-top: 40rpx;margin-bottom: 20rpx;" form-type="submit">提交</button>
  </form>
</view>

wxcss:

复制代码
.avatar-wrapper {
  padding: 0;
  width: 56px !important;
  border-radius: 8px;
  margin-top: 40px;
  margin-bottom: 40px;
  background-color: #fff;
}
.avatar {
  display: block;
  width: 56px;
  height: 56px;
}
.container {
  display: flex;
}
.row{
   border-top: 1px solid #ccc;
   border-bottom: 1px solid #ccc;
   display: flex;
   align-items: center;
   height: 80rpx;
   padding-left: 20rpx;
}
.text1{
    flex: 2;
}
.weui-input{
    flex: 6;
}

js:

复制代码
const app = getApp()
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
Page({
/**
   * 页面的初始数据
   */
  data: {
    avatarUrl: defaultAvatarUrl,
    theme: wx.getSystemInfoSync().theme,
  },
  onChooseAvatar(e) {
    const { avatarUrl } = e.detail 
    this.setData({
      avatarUrl,
    })
    app.globalData.userInfo.avatarUrl = avatarUrl
  },
  formSubmit(e){
     app.globalData.userInfo.nickName = e.detail.value.nickname
      wx.switchTab({
        url: '/pages/home/index',
      })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    wx.onThemeChange((result) => {
      this.setData({
        theme: result.theme
      })
    })
  }

})

整合即可:微信会返回头像的地址~url 保存

相关推荐
thinkQuadratic1 小时前
微信小程序动态设置高度,添加动画等常用操作
微信小程序·小程序
幽络源小助理4 小时前
微信小程序文章管理系统开发实现
java·微信小程序·springboot
10年前端老司机5 小时前
微信小程序模板语法和事件
前端·javascript·微信小程序
上趣工作室6 小时前
微信小程序开发1------微信小程序中的消息提示框总结
微信小程序·小程序
三天不学习8 小时前
微信小程序蓝牙连接打印机打印单据完整Demo【蓝牙小票打印】
微信小程序·小程序·蓝牙打印
arbboter12 小时前
【AI插件开发】Notepad++ AI插件开发1.0发布和使用说明
人工智能·大模型·notepad++·ai助手·ai插件·aicoder·notepad++插件开发
盛夏绽放14 小时前
uni-app中获取用户实时位置完整指南:解决权限报错问题
uni-app·notepad++
电商api接口开发1 天前
ASP.NET MVC 入门指南
c#·asp.net·mvc
老李不敲代码1 天前
榕壹云预约咨询系统:基于ThinkPHP+MySQL+UniApp打造的灵活预约小程序解决方案
mysql·微信小程序·小程序·uni-app·php
三天不学习2 天前
ASP.NET Core 主机模型详解:Host、WebHost与WebApplication的对比与实践【代码之美】
后端·asp.net