微信小程序开发之——个人中心-介绍(1)

最新推荐文章于 2025-02-06 21:00:12 发布
最新推荐文章于 2025-02-06 21:00:12 发布
阅读量6.8k 收藏 26
点赞数 2
分类专栏： 微信小程序 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/calvin_zhou/article/details/120458610
版权

一 概述

  • 个人中心展示图
  • 个人中心各个页面展示及功能介绍

二 个人中心页面介绍

2.1 展示

2.2 页面构成

2.2.1 首页


说明：

  • 首页包含：昵称，星座，兴趣，QQ，电话
  • 点击头像：跳转个人中心
  • 点击个人中心：跳转个人中心
2.2.2 个人中心

说明：

  • 头像、待付款、已退款、全部订单，不可点击
  • 个人资料：跳转到个人资料页面
  • 订单物流查询：跳转物流查询页面
  • 选择收货地址：跳转收货地址页面
  • 客服联系方式：拨打电话
个人资料详情


说明：

  • 点击用户头像：可从相册或拍照设置头像
  • 点击修改资料，修改用户昵称和性别
修改用户资料界面

订单物流查询(使用node服务器提供就接口查询)

查询前

点击查询后

收货地址(微信提供的默认查询用户信息)

未设置用户信息前

点击收货地址(调用wx.chooseAddress获取默认地址)

确定后，将用户信息填写到页面上

客服联系方式


说明：

  • 点击客服联系方式后弹出拨打电话框
  • 模拟器中点击确定消失
  • 手机中号码显示在拨打页面，可呼出

三 源码

微信小程序开发之——个人中心-订单物流查询(8)(1)
2401_84149724的博客
04-20 1211
remark”: “郴州市邮政速递物流公司国际快件监管中心已收件（揽投员姓名：侯云,联系电话:）【郴州市】”,(img-ZARkAknc-1713608511092)](img-n5Znz2vb-1713608511094)](img-sDEzGl5n-1713608511096)]“remark”: “离开贵阳市 发往毕节地区（经转）【贵阳市】”,“remark”: “离开长沙市 发往贵阳市（经转）【长沙市】”,Android对标阿里P7学习视频。Android对标阿里P7学习视频。
AndroidStudio子listview中单击和长按效果的实现
2301_82242499的博客
04-08 972
private String[] titles = {“苹果”, “蛋糕”, “桌子”, “猕猴桃”, “毛衣”};private String[] prices = {“10元/kg”, “100元/个”, “45元/把”, “10元/kg”, “110元/件”};@OverridemListView.setOnItemClickListener(new AdapterView.OnItemClickListener() { //点击事件@Override。
微信小程序个人中心-我的界面
04-24
每个小程序基本上都会使用到，里面可以设置保存每个用户的数据和操作习惯等等，界面也很美观，看起来很舒服，希望大家能够喜欢
小程序中的个人主页如何设计更出彩，带你看一看
最新发布
2401_87844374的博客
02-06 1178
在移动互联网蓬勃发展的今天，小程序凭借其便捷、高效的特点，成为了众多企业和开发者触达用户的重要渠道。而小程序中的个人主页，作为用户与产品深度交互的关键界面，其设计的优劣直接影响着用户体验和产品的口碑。一个出彩的个人主页，不仅能够吸引用户的注意力，还能提升用户的使用频率和忠诚度。那么，究竟如何才能设计出令人眼前一亮的小程序个人主页呢？下面将从多个关键方面进行深入探讨。
微信小程序开发之——个人中心-个人详情页(6)
我的博客
09-25 6580
一 概述 个人详情页对应的页面为：pages/detail/detail 页面搭建 页面逻辑 二 页面搭建 2.1 布局文件(detail.wml) <view class="info"> <!--头像--> <view> <view class="fl">头像</view> <view class="rl"> <image src="{{imgUrl}}" mode="aspectFil
微信小程序开发之——个人中心-个人中心(5)
我的博客
09-25 3020
一 概述 个人中心对应的页面为：pages/person/person 页面搭建 页面逻辑 二 页面搭建 2.1 布局文件(person.wml) <!--头像--> <view class="avatar"> <image src="/images/avatar.png" mode="scaleToFill"></image> </view> <!--付款及订单--> <view class="content">
【Spring团购】8-9 可扩展支付方案实现（一）
harbor_lee的博客
08-17 211
思维导图链接：https://gitee.com/harborlee/mindMapping/tree/master/Spring%E5%9B%A2%E8%B4%AD
微信小程序项目实例——今日美食
05-24
总的来说，“微信小程序项目实例——今日美食”是一个集前端技术、后端数据管理、用户体验设计于一体的综合项目，对于学习微信小程序开发和移动应用设计的人员来说，是一个很好的实践案例。通过分析和实施这个项目，...
微信小程序实战篇-个人中心
03-29
哈喽，大家好，又到周五啦，有木有期待今天的更新呀~今天要教大家的是制作个人中心界面，先上效果图 (此图片来源于网络，如有侵权，请联系删除! ) 个人中心制作 1. mine.js // pages/mine/mine.js var app = getApp...
微信小程序项目实例——体质计算器
05-27
微信小程序是一种轻量级的应用开发平台，主要针对移动端，尤其是智能手机用户。...通过学习和理解这个项目，开发者可以进一步提升在微信小程序开发上的技能，同时也为健康管理领域的应用创新提供了参考。
微信小程序精美个人微简历
08-10
微信小程序 -- 精美个人微简历！让您在职场求职上一帆风顺！
微信小程序之个人简历
03-14
微信小程序个人简历制作，传统的简历以一个文档的形式存在，现如今可以借助微信小程序平台制作个性化的简历。<!--index.wxml--> 获取头像昵称 {{userInfo.nickName}} <!-- {{title}} --> <!-- {{motto}} --> <form class='check' bindsubmit='submit'> 我的名字？ <input placeholder='请正确回答问题' background-color:#eee;' bindinput='inputCorrect'> </input> </form> 回答错误！ <button loading='{{loading}}' plain='true' hover-class='button-hover' bindtap='check'
微信小程序-个人简历
01-27
微信小程序-个人简历-源码
微信小程序个人简历.zip
05-30
个人简历”微信小程序+源码 运行工具：微信web开发者工具 截图链接：https://blog.csdn.net/qq_38275941/article/details/85303724
微信小程序开发之——音乐播放器-音乐推荐
onghaha的博客
04-20 1459
那我们该怎么做才能做到年薪60万+呢，对于程序员来说，只有不断学习，不断提升自己的实力。我之前有篇文章提到过，感兴趣的可以看看，到底要学习哪些知识才能达到年薪60万+。通过职友集数据可以查看，以北京 Android 相关岗位为例，其中 【20k-30k】 薪酬的 Android 工程师，占到了整体从业者的 30.8%！北京 Android 工程师「工资收入水平 」今天重点内容是怎么去学，怎么提高自己的技术。1.合理安排时间2.找对好的系统的学习资料3.有老师带，可以随时解决问题。
【微信小程序】制作个人信息页面
热门推荐
Minf的博客
11-04 4万+
题外：也许前端学习也应包括审美。在我学习前端路上，以前模仿视频内容，现在模仿别人成品…我曾想过作为前端是不是也应学习UI设计方向的美术知识，再不济也应具备页面布局的审美。但这个想法被一位大佬否定了，所以这个想法也只好放在心里成为另一种可能。 正题： 先上成品图 1.架构 进行编程前，我们要架构。对整体项目叫架构，对一个页面而言不如说叫整理思路 以本图为例，除去底部 tabBar，头部 navigationStyle 是小程序特有配置，其他都是“前端三剑客”的基础内容。 于是可以简单的划分为两部分： 蓝色
【微信小程序开发（从零到一）】——个人中心页面的实战项目（一）
php优质创造者
06-07 3788
👨‍💻。
小程序----个人中心页面
weixin_30394633的博客
07-08 3996
页面效果 代码实现： center.wxml页面 <view class="header-container" bindtap="bindcenter"> <image class='header-bg' src = '../../images/image/background@2x.png'></image> &lt...
给我微信小程序开发之——个人中心-API(2)的源码
06-06
很抱歉，我作为一个AI语言模型，并不具备代码开发能力。但是我可以为您提供微信小程序个人中心API的相关信息和使用方法。 个人中心API是微信小程序中重要的API之一，它可以用于获取用户的个人信息、修改用户的个人信息、获取用户的订单信息等。以下是个人中心API的使用方法： 1.获取用户信息 ``` wx.getUserInfo({ success: function(res) { var userInfo = res.userInfo var nickName = userInfo.nickName var avatarUrl = userInfo.avatarUrl var gender = userInfo.gender //性别 0：未知、1：男、2：女 var province = userInfo.province var city = userInfo.city var country = userInfo.country } }) ``` 2.修改用户信息 ``` wx.getUserInfo({ success: function(res) { var userInfo = res.userInfo userInfo.nickName = '新昵称' userInfo.avatarUrl = '新头像url' wx.request({ url: '修改用户信息的API地址', data: userInfo, success: function(res) { console.log(res.data) } }) } }) ``` 3.获取用户订单信息 ``` wx.request({ url: '获取用户订单信息的API地址', data: { userId: '用户ID' }, success: function(res) { console.log(res.data) } }) ``` 以上是个人中心API的使用方法，需要注意的是，API地址和参数需要根据具体的业务需求进行替换。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值