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 中引入。
- 下载并解压图标字体文件，将相关文件放入
static/fonts目录。 - 在
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;
}
- 在
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"></text><text class="label">二维码名片</text></view><view class="item" @click="navigateTo('Settings')"><text class="iconfont"></text><text class="label">设置</text></view></view><view class="section"><view class="item" @click="navigateTo('Wallet')"><text class="iconfont"></text><text class="label">钱包</text></view><view class="item" @click="navigateTo('Album')"><text class="iconfont"></text><text class="label">相册</text></view></view><view class="section"><view class="item" @click="navigateTo('Collections')"><text class="iconfont"></text><text class="label">收藏</text></view><view class="item" @click="navigateTo('Cards')"><text class="iconfont"></text><text class="label">卡包</text></view></view><view class="section"><view class="item" @click="navigateTo('Emotions')"><text class="iconfont"></text><text class="label">表情</text></view><view class="item" @click="navigateTo('Shopping')"><text class="iconfont"></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>