微信小程序实现个人中心页面

文章目录

    • [1. 官方文档教程](#1. 官方文档教程)
    • [2. 编写静态页面](#2. 编写静态页面)
    • [3. 关于作者其它项目视频教程介绍](#3. 关于作者其它项目视频教程介绍)

1. 官方文档教程

  1. https://developers.weixin.qq.com/miniprogram/dev/framework/

2. 编写静态页面

  1. mine.wxml布局文件
xml 复制代码
<!--index.wxml-->
<navigation-bar title="个人中心" back="{{false}}" color="#ffffff" background="#f7b451"></navigation-bar>

<scroll-view class="scrollarea" scroll-y type="list">


  <view class="mine-container">

    <image src="https://img1.baidu.com/it/u=1167785969,3358198230&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800" mode="" bind:tap="btnUpLoadAvatarHandle" />

    <view class="user-info-container">
      <text class="username">wangwu</text>
      <text class="nickname">这个家伙很懒,什么都没有留下~</text>
    </view>
  </view>


  <view class="navigation-center-container">
    <view class="navigation-collect-container" bind:tap="collectHandle">
      <image src="../../assets/ic_kf.png" mode="" />
      <text>官方客服</text>
    </view>


    <view class="navigation-collect-container" bind:tap="onNoteClickHandle">
      <image src="../../assets/ic_jf.png" mode="" />
      <text>积分兑换</text>
    </view>

    <view class="navigation-collect-container" bind:tap="collectHandle">
      <image src="../../assets/ic_bz.png" mode="" />
      <text>帮助中心</text>
    </view>


    <view class="navigation-collect-container" bind:tap="onNoteClickHandle">
      <image src="../../assets/ic_sz.png" mode="" />
      <text>系统设置</text>
    </view>
  </view>

  <view class="line"></view>

  <view class="navigation-item-container" bind:tap="editPwdHandle">
    <text>修改密码</text>
    <image src="../../assets/ic_right_ror.png" />
  </view>
  <view class="line2"></view>

  <view class="navigation-item-container" bind:tap="onAboutClickHandle">
    <text>关于APP</text>
    <image src="../../assets/ic_right_ror.png" />
  </view>
  <view class="line2"></view>


  <view class="line"></view>

  <view class="navigation-item-container" bind:tap="clearHandle">
    <text>清理缓存</text>
    <image src="../../assets/ic_right_ror.png" />
  </view>
  <view class="line2"></view>

  <view class="navigation-item-container">
    <text>用户条款</text>
    <image src="../../assets/ic_right_ror.png" />
  </view>
  <view class="line2"></view>
  <view class="navigation-item-container">
    <text>隐私协议</text>
    <image src="../../assets/ic_right_ror.png" />
  </view>
  <view class="line2"></view>


  <view class="navigation-exit-container" bind:tap="onExitHandle">
    <text>退出登录</text>
  </view>

</scroll-view>

navigation-bar为创建项目,系统提供一个默认的顶部导航栏组件

  1. mine.wxss 样式文件
css 复制代码
page {
	height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: #f5f5f5;
}

.scrollarea {
	flex: 1;
	overflow-y: hidden;
}

.mine-container {
	display: flex;
	flex-direction: row;
	padding: 50rpx;
	align-items: center;
	background-color: #f7b451;
}

.mine-container image {
	width: 150rpx;
	height: 150rpx;
	border-radius: 50%;
}

.user-info-container {
	display: flex;
	margin-left: 20rpx;
	flex-direction: column;

}


.username {
	font-weight: 700;
	font-size: 34rpx;
	color: white;
}

.nickname {
	color: #999999;
	margin-top: 20rpx;
	font-size: 26rpx;
	color: white;
}

.line {
	display: flex;
	height: 20rpx;
	background-color: #f5f5f5;
}

.line2 {
	display: flex;
	height: 1rpx;
	background-color: #f5f5f5;
}

.navigation-item-container {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	height: 80rpx;
	padding-left: 20rpx;
	padding-right: 20rpx;
	background-color: #ffffff;
}

.navigation-item-container image {
	width: 30rpx;
	height: 30rpx;
}

.navigation-item-container text {
	color: #999999;
	font-size: 26rpx;
}

.navigation-exit-container {
	display: flex;
	justify-content: center;
	margin-top: 150rpx;
	height: 80rpx;
	background: #f5f5f5;
	line-height: 80rpx;
	color: #999999;
	font-size: 26rpx;
	background-color: #ffffff;
}


.navigation-center-container {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	padding: 40rpx 0;
	margin-left: 20rpx;
	margin-right: 20rpx;
	margin-top: -20rpx;
	background-color: #ffffff;
}



.navigation-collect-container {
	display: flex;
	flex-direction: column;
	align-items: center;

}

.navigation-center-container image {
	width: 50rpx;
	height: 50rpx;
}

.navigation-center-container text {
	margin-top: 10rpx;
	color: #999999;
	font-size: 22rpx;
}
  1. 运行效果图

3. 关于作者其它项目视频教程介绍

本人在b站录制的一些视频教程项目,免费供大家学习

  1. Android新闻资讯app实战:https://www.bilibili.com/video/BV1CA1vYoEad/?vd_source=984bb03f768809c7d33f20179343d8c8
  2. Androidstudio开发购物商城实战:https://www.bilibili.com/video/BV1PjHfeXE8U/?vd_source=984bb03f768809c7d33f20179343d8c8
  3. Android开发备忘录记事本实战:https://www.bilibili.com/video/BV1FJ4m1u76G?vd_source=984bb03f768809c7d33f20179343d8c8&spm_id_from=333.788.videopod.sections
  4. Androidstudio底部导航栏实现:https://www.bilibili.com/video/BV1XB4y1d7et/?spm_id_from=333.337.search-card.all.click&vd_source=984bb03f768809c7d33f20179343d8c8
  5. Android使用TabLayout+ViewPager2实现左右滑动切换:https://www.bilibili.com/video/BV1Mz4y1c7eX/?spm_id_from=333.337.search-card.all.click&vd_source=984bb03f768809c7d33f20179343d8c8
相关推荐
说私域4 分钟前
基于开源AI智能名片、链动2+1模式与S2B2C商城小程序的流量运营与个人IP构建研究
人工智能·小程序·流量运营
weixin_177297220691 小时前
剧本杀小程序系统开发:构建线上线下融合的剧本杀生态圈
小程序·剧本杀
2501_915918416 小时前
HTTPS 端口号详解 443 端口作用、iOS 抓包方法、常见 HTTPS 抓包工具与网络调试实践
android·网络·ios·小程序·https·uni-app·iphone
小蒜学长8 小时前
基于springboot 校园餐厅预约点餐微信小程序的设计与实现(代码+数据库+LW)
数据库·spring boot·微信小程序
cookqq8 小时前
Cursor和Hbuilder用5分钟开发微信小程序
微信小程序·小程序·curosor
老华带你飞9 小时前
考研论坛平台|考研论坛小程序系统|基于java和微信小程序的考研论坛平台小程序设计与实现(源码+数据库+文档)
java·vue.js·spring boot·考研·小程序·毕设·考研论坛平台小程序
毕设源码-钟学长10 小时前
【开题答辩全过程】以 基于微信小程序的美发服务系统的设计与实现为例,包含答辩的问题和答案
微信小程序·小程序
canglingyue11 小时前
微信小程序罗盘功能开发指南
微信小程序·小程序
三脚猫的喵14 小时前
微信小程序中实现AI对话、生成3D图像并使用xr-frame演示
前端·javascript·ai作画·微信小程序