使用 UniApp 实现简单的个人中心页面

1. 创建 UniApp 项目

首先，确保你已经安装了 HBuilderX 或其他支持 UniApp 的开发工具。然后创建一个新的 UniApp 项目。

# 使用 HBuilderX 创建新项目
# 选择 uni-app 模板 -> 选择 Vue.js 模板 -> 输入项目名称 -> 创建

2. 安装依赖

UniApp 内置了一些常用的组件，因此我们不需要额外安装依赖。不过，你可以根据需要安装其他插件或库。

3. 编写个人中心页面

在 pages 目录下创建一个新的页面，例如 ProfilePage.vue，并在其中编写个人中心页面组件。

4. 解释代码

• 模板部分 (<template>):

  • view 标签用于创建一个容器。
  • header 区域包含头像、用户名和微信号。
  • section 区域包含不同的功能项，每个功能项可以通过点击跳转到相应的页面。

• 脚本部分 (<script>):

  • methods 中定义了一个 navigateTo 方法，用于导航到指定页面。

• 样式部分 (<style scoped>):

  • 设置整体布局和样式，包括背景颜色、字体大小、边距等。

5. 添加图标字体

为了使图标显示正常，你需要引入一个图标字体文件（如 iconfont.css）。可以在 static 目录下放置图标字体文件，并在 main.js 中引入。

1. 下载并解压图标字体文件，将相关文件放入 static/fonts 目录。
2. 在 static/css/iconfont.css 中添加以下内容：

@font-face {
  font-family: 'iconfont';
  src: url('../fonts/iconfont.eot');
  src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/iconfont.woff2') format('woff2'),
       url('../fonts/iconfont.woff') format('woff'),
       url('../fonts/iconfont.ttf') format('truetype'),
       url('../fonts/iconfont.svg#iconfont') format('svg');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

3. 在 main.js 中引入 iconfont.css：

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

// 引入图标字体 CSS 文件
import './static/css/iconfont.css'

App.mpType = 'app'

const app = new Vue({
  ...App
})
app.$mount()

6. 运行项目

保存文件后，在 HBuilderX 中运行项目，查看效果。

# 使用模拟器或真机调试
# 点击运行按钮 -> 选择目标平台（如微信小程序、H5、App等）

总结

通过以上步骤，你可以轻松地在 UniApp 中实现一个简单的个人中心页面。希望这篇博客能帮助初学者更好地理解和掌握 UniApp 的基本用法。

如果你有任何问题或建议，请随时留言交流！

以下是完整的代码实现。希望对你有所帮助！

<template>
  <view class="profile-container">
    <!-- 头部信息区域 -->
    <view class="header">
      <image class="avatar" src="/static/avatar.png"></image>
      <text class="username">张三</text>
      <text class="account">微信号: zhangsan123</text>
    </view>

    <!-- 功能列表区域 -->
    <view class="section">
      <view class="item" @click="navigateTo('QRCode')">
        <text class="iconfont">&#xe601;</text>
        <text class="label">二维码名片</text>
      </view>
      <view class="item" @click="navigateTo('Settings')">
        <text class="iconfont">&#xe602;</text>
        <text class="label">设置</text>
      </view>
    </view>

    <view class="section">
      <view class="item" @click="navigateTo('Wallet')">
        <text class="iconfont">&#xe603;</text>
        <text class="label">钱包</text>
      </view>
      <view class="item" @click="navigateTo('Album')">
        <text class="iconfont">&#xe604;</text>
        <text class="label">相册</text>
      </view>
    </view>

    <view class="section">
      <view class="item" @click="navigateTo('Collections')">
        <text class="iconfont">&#xe605;</text>
        <text class="label">收藏</text>
      </view>
      <view class="item" @click="navigateTo('Cards')">
        <text class="iconfont">&#xe606;</text>
        <text class="label">卡包</text>
      </view>
    </view>

    <view class="section">
      <view class="item" @click="navigateTo('Emotions')">
        <text class="iconfont">&#xe607;</text>
        <text class="label">表情</text>
      </view>
      <view class="item" @click="navigateTo('Shopping')">
        <text class="iconfont">&#xe608;</text>
        <text class="label">购物</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    navigateTo(page) {
      uni.navigateTo({
        url: `/pages/${page}/${page}`
      });
    }
  }
};
</script>

<style scoped>
.profile-container {
  background-color: #f8f8f8;
  height: 100vh;
}

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 0;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

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

.username {
  font-size: 18px;
  color: #333;
  margin-bottom: 5px;
}

.account {
  font-size: 14px;
  color: #999;
}

.section {
  margin-top: 10px;
  background-color: #fff;
}

.item {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
}

.item:last-child {
  border-bottom: none;
}

.iconfont {
  font-family: iconfont;
  font-size: 24px;
  color: #666;
  margin-right: 15px;
}

.label {
  font-size: 16px;
  color: #333;
}
</style>

<template>
	<view class="content">
		<!-- 用户头像和用户名 -->
		<view class="logo_content">
			<!-- 头像 -->
			<view class="headxiang">
				<image src="../../static/logo.png" class="logo_img"></image>
			</view>
			<view>
				<text class="text_name">用户名</text>
			</view>
		</view>
		<!-- 个人信息提示/修改信息 -->
		<view>
			<text class="text_self">个人信息</text>
			<text class="text_xiugai">修改</text>
		</view>
		<!-- 4个信息栏 -->
		<view class="div_xinxi">
			<view class="div_xinxi_danyuan">用户ID</view>
			<view class="div_xinxi_danyuan">用户生日</view>
			<view class="div_xinxi_danyuan">口味喜好</view>
			<view class="div_xinxi_danyuan">手机号码</view>
		</view>
		<!-- 退出登录 -->
		<view class="tuichu">
			<button>退出登录</button>
		</view>
		
		
	</view>
</template>

<script>
</script>

<style>
	.content{
		display: flex;
		flex-direction: column; 
		width: 100%;
		height: auto;
	}
	.logo_content{
		width: 100%;
		height: 200px;
		background-color: aliceblue;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border: 1px solid;
	}
	.headxiang{
		width: 82px;
		height: 82px;
	}
	.logo_img{
		width: 82px;
		height: 82px;
	}
	.text_name{
		font-size: 14px;
	}
	.text_self{
		float: left;
		font-size: 20px;
		font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
		border: 1px solid;
	}
	.text_xiugai{
		border: 1px solid;
		float: right;
		font-size: 14px;
		margin-right: 20px;
		margin-top: 5px;
	}
	/*  */
	.div_xinxi{
		margin-top: 16px;
		display: flex;
		flex-direction: column;
		background-color: aqua;
		width: 100%;
		height: 272px;
	}
	.div_xinxi_danyuan{
		border: 1px solid;
		width: 100%;
		height: 68px;
	}
	.tuichu{
		position: fixed;
		width: 40%;
		top: 560px;
		left: 100px;
	}
	
	
</style>