微信小程序实战篇-个人中心

最新推荐文章于 2024-01-23 17:16:24 发布
VIP文章 最新推荐文章于 2024-01-23 17:16:24 发布
阅读量5.4k 收藏 15
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/h176nhx7/article/details/78139402
版权


哈喽，大家好，又到周五啦，有木有期待今天的更新呀~今天要教大家的是制作个人中心界面，先上效果图




个人中心制作
最低0.47元/天 解锁文章
code小生_
关注
  • 0
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序开发实战-蔬菜美食
06-09
从零开始教你做一款蔬菜美食的小程序
微信小程序个人中心、我的界面+源码（示例二）
05-26
界面详情，可点击此链接先进行图片预览： https://img-blog.csdnimg.cn/6bb773fe618348bcae6cafcdeb491b18.jpeg#pic_center 1、微信小程序个人中心、我的界面+源码； 2、实现自定义顶部状态栏； 3、实现滚动显示隐藏顶部状态栏效果； 4、超简单、详细； 5、监听方法，根据需求自行修改跳转路径； 6、本内容提供给需要的用户使用，若存在不足之处，请留言指正或自行修改； 7、通过本源码，可学习到一些基本的微信小程序的布局，提升写代码的效率； 8、适用于学习微信小程序的用户； 9、可以使用于任何需要的小程序首页布局中； 10、喜欢的可以点赞、收藏加关注哦，以免找不到了哦； 11、欢迎使用和留言，谢谢哦！
微信小程序个人中心、我的界面（示例三）
weixin_45465881的博客
01-23 1660
微信小程序个人中心、我的界面，超简洁界面，代码粘贴即用。更多微信小程序界面示例，请进入我的主页哦！更多微信小程序示例的分享，请进入我的主页查看哦。
微信小程序个人中心页面 案例
shi450561200的博客
12-05 1万+
微信小程序 开发，经常会遇到个人中心页面 的需求，为了方便大家使用，决定将个人总想页面进行开源，以供大家参考交流。
微信小程序 实现个人用户界面
热门推荐
JxufeCarol的博客
06-18 3万+
参考链接： （1）微信小程序学习笔记（八）----用户个人中心界面 https://blog.csdn.net/qq_24127447/article/details/84450861 （2）微信小程序实战篇-个人中心 https://blog.csdn.net/u012927188/article/details/76684951 （3）基于java的微信小程序的实现（五）用户个人信息小程序端开发 https://blog.csdn.net/qq_36258498/article/details/8464
生成微信小程序前端的个人中心代码
weixin_42588877的博客
02-18 144
个人中心代码可以使用 HTML 和 CSS 编写，例如： 个人中心 用户名 个人资料 设置
微信小程序个人中心、我的界面（示例一）
weixin_45465881的博客
04-26 1万+
微信小程序个人中心、我的界面，使用button按钮实现界面布局。
微信小程序个人中心、我的界面（示例二）
weixin_45465881的博客
05-26 6359
微信小程序个人中心、我的界面、自定义顶部状态栏、页面监听跳转、简单界面布局（示例一） 微信小程序个人中心、我的界面，自定义顶部状态栏，实现滚动隐藏显示状态信息，界面简单，代码粘贴即用。更多微信小程序界面示例，请进入我的主页哦！ 1、js代码 Page({ /** * 页面的初始数据 */ data: { show: false, barHeight: 20, // 顶部状态栏高度 navBarHeight: 66, //
微信小程序列表开发-个人中心界面(一)
Zhuchang1999的博客
04-21 3万+
先放个效果图让你们看一下是不是你们需要的，到时候会写几篇博客把里面的组件也讲一下 .wxml .wxss .js .json 我里面的引用的照片都放在image文件里的，image文件是放在pages文件下面的，因为放的位置不同，图片引用的路径就不一样。 以上是所有的代码展示下面先大概讲一下思路 .wxml: 第三行是获取微信微信的头像，第四行是获取微信的名字，是个固定的语法...
微信小程序开发之——个人中心-首页(4)
我的博客
09-25 5323
一 概述 首页对应的页面为pages/index/index 首页页面搭建 页面逻辑-点击头像完成页面跳转 二 首页页面搭建 2.1 布局文件(index.wml) <view class="home"> <text class="welcome">我的主页</text> <image src="/images/avatar.png" mode="aspectFill" bindtap="changeImage"></image> &
微信小程序开发实战-PPT
11-21
微信小程序开发实战-PPT
微信小程序实战篇-下拉刷新与加载更多
03-29
哈喽，大家好，看这标题是不是有点奇怪，你们期盼的微信小程序实战篇-电商（三）没出现，我是这么想的，因为电商里面的内容有很多，如何我只是以一二三那样命名的话，不方便你们查看每篇文章讲解的内容，所以我就换 ...
微信小程序实战篇-分类页面制作
03-29
哈喽，大家好，又到周五啦，今天代码君要教大家分类页面的制作，废话不多说，先上效果图。这个界面布局难度不是很大，css基础好的，很快就实现了，分类界面，左边是一级目录，右边是一级目录对应的二级目录，根据这 ...
Suno AI Download 免费下载Suno AI 音乐
04-18
网站描述：Sunoaidownload——从分享链接中轻松下载Suno AI生成的歌曲文件 内容概要： 这是一个专门提供Suno AI生成的歌曲文件下载服务的网站，用户可以通过分享链接轻松获取所需文件。本网站提供高质量、多样化的音乐资源，满足不同用户的需求。 适用人群： 该网站适用于所有热爱音乐、需要音乐素材的用户，特别适合音乐创作者、音乐爱好者、学生、教师等人群使用。 使用场景： 该网站的使用场景非常广泛，具体包括以下几个方面： 1. 音乐创作：音乐创作者可以使用本网站提供的歌曲文件进行创作，丰富作品内容，提升作品质量。 2. 音乐学习：学生和教师可以使用本网站的歌曲文件进行音乐学习，提高音乐素养和技能。 3. 娱乐休闲：普通用户可以使用本网站的歌曲文件进行放松、娱乐和休闲，享受音乐带来的愉悦。 其他说明： 本网站提供高速、稳定的下载服务，确保用户能够快速获取所需文件。同时，我们注重版权保护，只提供合法授权的歌曲文件，避免侵犯他人权益。为了更好地服务用户，我们不断优化网站功能和用户体验，欢迎提出宝贵意见和建议。此外，为了保障用户数据安全，我们采取了先进的安全措施。
基于Python的Django配置Celery设计源码
04-18
本项目是基于Python的Django配置Celery设计源码，包含20个文件，其中主要包含17个py源代码文件。系统采用了Python编程语言，实现了Django配置Celery的功能。项目结构清晰，代码可读性强，易于理解和维护。
物联网嵌入式ESP32开发例程05-FreeRTOS操作系统之时间片调度C程序代码.rar
04-18
1、嵌入式物联网ESP32项目实战开发。例程经过精心编写，简单好用。 2、代码使用Visual Studio Code + ESP-IDF开发，C语言编程。例程在ESP32-S3上运行。若在其他型号上运行，请自行调整。 3、如果接入其他传感器，请查看发布的其他资料。 4、ESP32与模块的接线，在代码当中均有定义，请自行对照。 5、若硬件差异，请根据自身情况适当调整代码，程序仅供参考。 6、代码有注释说明，请耐心阅读。 7、技术v：349014857;
华为IPMS流程优化策略glz.pptx
04-18
华为IPMS流程优化策略glz.pptx
文字转合成语音软件工具
最新发布
04-18
文字转语音软件，两款，都非常好用，亲测有效，免费声音足够使用，需要的兄弟自行下载
微信小程序实战篇-个人中心、订单制作
05-22
好的，让我们开始微信小程序实战篇-个人中心、订单制作的教程。 ## 1. 创建个人中心页面 首先，我们需要在小程序中创建一个个人中心页面。可以在 app.json 中添加一个 tab 标签，在 pages 数组中添加个人中心页面的路径： ```json { "tabBar": { "list": [ { "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/personal/personal", "text": "个人中心" } ] }, "pages": [ "pages/index/index", "pages/personal/personal" ] } ``` 接下来，在 pages 文件夹中创建 personal 文件夹，并创建 personal.wxml、personal.wxss、personal.js、personal.json 四个文件。在 personal.wxml 文件中添加以下代码： ```html <view class="personal"> <view class="avatar"> <image class="avatar-img" src="{{avatarUrl}}"></image> <text class="nickname">{{nickname}}</text> </view> <view class="order"> <view class="order-item" bindtap="goToOrder"> <image class="order-icon" src="/images/personal/order.png"></image> <text class="order-text">我的订单</text> <image class="order-arrow" src="/images/personal/arrow.png"></image> </view> </view> </view> ``` 这里我们创建了一个包含头像、昵称、我的订单等模块的页面。其中，头像和昵称是从后端接口获取的数据。 ```javascript // personal.js Page({ data: { avatarUrl: '', nickname: '' }, onLoad: function () { // 从后端接口获取用户信息 wx.request({ url: 'https://example.com/userinfo', success: (res) => { this.setData({ avatarUrl: res.data.avatarUrl, nickname: res.data.nickname }) } }) }, goToOrder: function () { // 跳转到订单页面 wx.navigateTo({ url: '/pages/order/order' }) } }) ``` 在 personal.js 文件中，我们编写了 onLoad 和 goToOrder 两个函数。onLoad 函数用于从后端接口获取用户信息并在页面上显示，goToOrder 函数用于跳转到订单页面。 ## 2. 创建订单页面 接下来，我们需要创建一个订单页面。在 pages 文件夹中创建 order 文件夹，并创建 order.wxml、order.wxss、order.js、order.json 四个文件。在 order.wxml 文件中添加以下代码： ```html <view class="order"> <view class="order-header"> <text class="order-title">我的订单</text> <text class="order-more">查看更多</text> </view> <view class="order-list"> <view class="order-item" wx:for="{{orders}}" wx:key="index"> <image class="order-img" src="{{item.imgUrl}}"></image> <view class="order-info"> <text class="order-name">{{item.name}}</text> <text class="order-price">¥{{item.price}}</text> </view> </view> </view> </view> ``` 这里我们创建了一个包含订单标题、订单列表等模块的页面。其中，订单列表是从后端接口获取的数据。 ```javascript // order.js Page({ data: { orders: [] }, onLoad: function () { // 从后端接口获取订单列表 wx.request({ url: 'https://example.com/orders', success: (res) => { this.setData({ orders: res.data }) } }) } }) ``` 在 order.js 文件中，我们编写了 onLoad 函数用于从后端接口获取订单列表并在页面上显示。 ## 3. 页面样式 最后，我们需要编写页面的样式。在 app.wxss 中添加以下代码： ```css .tab-bar { position: fixed; bottom: 0; left: 0; width: 100%; height: 50rpx; background-color: #fff; border-top: 1rpx solid #e5e5e5; box-shadow: 0 -2rpx 6rpx rgba(0, 0, 0, 0.05); } .tab-bar-item { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; font-size: 20rpx; color: #8a8a8a; } .tab-bar-item.active { color: #007aff; } .personal { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 20rpx; } .avatar { display: flex; flex-direction: column; align-items: center; justify-content: center; } .avatar-img { width: 80rpx; height: 80rpx; border-radius: 50%; } .nickname { margin-top: 10rpx; font-size: 24rpx; font-weight: bold; } .order { margin-top: 20rpx; } .order-item { display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 90%; height: 80rpx; background-color: #fff; border-radius: 10rpx; box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05); padding: 20rpx; margin-bottom: 20rpx; } .order-icon { width: 40rpx; height: 40rpx; } .order-text { font-size: 28rpx; font-weight: bold; } .order-arrow { width: 20rpx; height: 20rpx; } ``` 在 order.wxss 中添加以下代码： ```css .order { margin-top: 20rpx; } .order-header { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 20rpx; background-color: #fff; border-radius: 10rpx; box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05); margin-bottom: 20rpx; } .order-title { font-size: 32rpx; font-weight: bold; } .order-more { font-size: 24rpx; color: #007aff; } .order-list { display: flex; flex-direction: column; align-items: center; justify-content: center; } .order-item { display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 90%; height: 120rpx; background-color: #fff; border-radius: 10rpx; box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05); padding: 20rpx; margin-bottom: 20rpx; } .order-img { width: 80rpx; height: 80rpx; border-radius: 10rpx; } .order-info { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; margin-left: 20rpx; } .order-name { font-size: 28rpx; font-weight: bold; } .order-price { margin-top: 10rpx; font-size: 24rpx; color: #007aff; } ``` 至此，我们完成了微信小程序实战篇-个人中心、订单制作的教程。希望对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值