【页面案例汇总】微信小程序个人信息管理页面

这篇具有很好参考价值的文章主要介绍了【页面案例汇总】微信小程序个人信息管理页面。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

代码示例:

<!-- pages/person/person.wxml -->
<view class="container">
  <view class="header">个人信息</view>
  <view class="info">
    <view class="avatar">
      <image src="{{userInfo.avatarUrl}}"></image>
    </view>
    <view class="name">{{userInfo.nickName}}</view>
    <view class="gender">{{userInfo.gender == 1 ? '男' : '女'}}</view>
    <input class="input" placeholder="请输入手机号" bindinput="bindPhoneInput" value="{{phone}}"/>
    <input class="input" placeholder="请输入地址" bindinput="bindAddressInput" value="{{address}}"/>
  </view>
  <button class="save-btn" bindtap="saveUserInfo">保存</button>
</view>
/* pages/person/person.wxss */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #fff;
}

.header {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 10px;
}

.name {
  font-size: 20px;
  margin-bottom: 10px;
}

.gender {
  font-size: 18px;
  margin-bottom: 20px;
}

.input {
  width: 80%;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.save-btn {
  width: 80%;
  height: 40px;
  background-color: #00aaff;
  color: #fff;
  border-radius: 4px;
  text-align: center;
  line-height: 40px;
}
// pages/person/person.js
Page({
  data: {
    userInfo: {}, // 存储用户信息
    phone: '', // 存储用户手机号
    address: '', // 存储用户地址
  },
  onLoad() {
    // 获取用户信息
    wx.getUserInfo({
      success: res => {
        this.setData({
          userInfo: res.userInfo
        })
      }
    })
  },
  bindPhoneInput(e) {
    // 监听手机号输入
    this.setData({
      phone: e.detail.value
    })
  },
  bindAddressInput(e) {
    // 监听地址输入
    this.setData({
      address: e.detail.value
    })
  },
  saveUserInfo() {
    // 保存用户信息
    wx.setStorageSync('phone', this.data.phone)
    wx.setStorageSync('address', this.data.address)
    wx.showToast({
      title: '保存成功',
      icon: 'success'
    })
  },
  onShow() {
    // 页面显示时获取用户之前存储的手机号和地址
    const phone = wx.getStorageSync('phone')
    const address = wx.getStorageSync('address')
    this.setData({
      phone,
      address
    })
  }
})

这个小程序页面包含了用户头像、昵称、性别、手机号和地址等信息,用户可以自行编辑手机号和地址,并保存到本地缓存中。用户信息的获取通过调用小程序内置的 wx.getUserInfo() 方法实现,手机号和地址的保存和读取使用了小程序提供的 wx.setStorageSync() 和 wx.getStorageSync() 方法。

以上代码仅供参考,具体实现细节和样式可以根据需求自行调整。


源码获取方法:

需要完整源码的朋友,希望你能点赞+收藏+评论,然后私信我即可~

会员学习群:【一对一答疑】

如果私信未回复,可添加学习会员小助手咨询(微信:mifankeji77)文章来源地址https://www.toymoban.com/news/detail-850369.html

到了这里,关于【页面案例汇总】微信小程序个人信息管理页面的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 案例130:基于微信小程序的综合文化信息管理系统

    文末获取源码 开发语言:Java 框架:SSM JDK版本:JDK1.8 数据库:mysql 5.7 开发软件:eclipse/myeclipse/idea Maven包:Maven3.5.4 小程序框架:uniapp 小程序开发软件:HBuilder X 小程序运行软件:微信开发者 目录 目录 前言 系统展示 管理员模块的实现 会员信息管理 新闻资讯管理 文化展示

    2024年01月19日
    浏览(44)
  • 【微信小程序独立开发 3】个人资料页面编写

     这一节完成用户个人信息昵称的填写和获取 上节编写完成后的页面如下所示: 首先进行用户昵称编辑功能的编写,铲屎官昵称采用了navigator标签,当点击昵称时会自动跳转到昵称编辑页面。 首先输入昵称编辑界面的导航栏名称 基本页面编写 当在个人信息页面点击昵称时,

    2024年03月09日
    浏览(93)
  • 微信小程序毕设——抽奖,展示,商城,个人信息

    微信小程序毕设——抽奖,展示,商城,个人信息 去年毕设时候与美院同学一起合作实现的一个微信小程序,课题包含金主爸爸某咖啡品牌的一些元素。具体分为抽卡,卡片的展示,商城,以及个人信息四个界面。使用的微信原生开发框架,SpringBoot进行开发。详细功能的介

    2024年02月03日
    浏览(35)
  • 【微信小程序创作之路】- 小程序远程数据请求、获取个人信息

    第七章 小程序远程数据请求、获取个人信息 本章我们介绍小程序远程数据请求,通过本地环境和正式域名两部分进行介绍。还会介绍小程序如何获取个人信息。 小程序可以服务外部服务器数据,也可以向外部服务器发送数据。我们将通过本地环境和使用正式域名方式来测试

    2024年02月14日
    浏览(47)
  • Spring Boot+微信小程序_保存微信登录者的个人信息

    微信小程序 开发平台,提供有一类 API ,可以让开发者获取到微信登录用户的个人数据。这类 API 统称为 开放接口 。 Tip: 微信小程序开发平台,会把微信登录用户的个人信息分为 明文数据 和 敏感数据 。 明文数据 也称为公开数据,开发者可以直接获取到,如登录者的昵称

    2024年02月10日
    浏览(36)
  • 【微信小程序】基础篇 -- 案例 - 本地生活(列表页面)(三十)

    💌 所属专栏:【微信小程序开发教程】 😀 作  者:我是夜阑的狗🐶 🚀 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询! 💖 欢迎大家:这里是CSDN,我总结知识的地方,喜欢的话请三连,有问题请私信 😘 😘 😘 您的点赞、关注、收藏、

    2024年04月28日
    浏览(43)
  • 个人事务备忘录管理微信小程序

    UniApp是一款使用Vue.js开发所有前端应用的框架,能够同时在iOS、Android、H5、小程序等多个平台上运行;所以本系统可以是一个安卓app,也可以是微信小程序 系统包括以下功能: 备忘录 管理个人事务 记事本 事务分类 日记编写 后台管理数据 背景: 该项目是一个多平台跨端应

    2024年01月15日
    浏览(39)
  • 基于微信小程序的个人健康数据管理系统小程序

    文末联系获取源码 开发语言:Java 框架:ssm JDK版本:JDK1.8 服务器:tomcat7 数据库:mysql 5.7/8.0 数据库工具:Navicat11 开发软件:eclipse/myeclipse/idea Maven包:Maven3.3.9 浏览器:谷歌浏览器 小程序框架:uniapp 小程序开发软件:HBuilder X 小程序运行软件:微信开发者 本基于微信小程序

    2023年04月12日
    浏览(76)
  • 万能的微信小程序个人主页:商城系统个人主页、外卖系统个人主页、购票系统个人主页等等【全部源代码分享+页面效果展示+直接复制粘贴编译即可】

            以下给出来四个常见的小程序个人主页,分别是商城系统个人主页,外卖系统个人主页,挂号系统个人主页,电影购票系统个人主页。包括完整的页面布局代码,完整的样式代码。使用的时候,只需要将页面代码和样式代码复制到自己项目对应的页面即可。而且可

    2024年02月11日
    浏览(64)
  • Java后台实现网站微信扫码登录功能,获取用户openid,及微信用户信息(小程序码方案),关联微信小程序(个人主体小程序也可以)

    目录 前言 下面展示操作流程 注册微信小程序 通过后台获取小程序码 前端处理 时序图理解 方案实现步骤 前言 很多业务场景之下我们需要实现  微信扫码登录  的需求,如: 同步网站与小程序的用户数据 。 需要获取用户微信相关基本信息,如头像、id等 实例:小程序上的

    2024年02月02日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包