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 保存

相关推荐
hunzi_112 小时前
选择网上购物系统要看几方面?
java·微信小程序·小程序·uni-app·php
2305_7978820915 小时前
AI识图小程序的功能框架设计
人工智能·微信小程序·小程序
暮雨哀尘16 小时前
微信小程序开发:开发实践
开发语言·算法·微信小程序·小程序·notepad++·性能·技术选型
幽络源小助理17 小时前
微信小程序实验室管理SSM系统设计与实现
微信小程序·小程序
zoahxmy09291 天前
微信小程序 request 流式数据处理
微信小程序
人人题1 天前
汽车加气站操作工考试答题模板
笔记·职场和发展·微信小程序·汽车·创业创新·学习方法·业界资讯
曲江涛1 天前
微信小程序 webview 定位 并返回
微信小程序·小程序
weixin_440470501 天前
部署Dify接入微信验证反代根目录创建一个文件通过微信小程序验证
微信小程序·腾讯云
web_Hsir1 天前
uniapp 微信小程序 使用ucharts
微信小程序·小程序·uni-app
web_Hsir1 天前
Uniapp 实现微信小程序滑动面板功能详解
vue.js·微信小程序·uni-app