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

1. 官方文档教程

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

2. 编写静态页面

1. mine.wxml布局文件

<!--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为创建项目，系统提供一个默认的顶部导航栏组件

2. mine.wxss 样式文件

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;
}

3. 运行效果图

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