当前位置：首页 > news >正文

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

news 来源：原创 2025/6/28 12:03:10

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">&#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>

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

1. 创建 UniApp 项目首先，确保你已经安装了 HBuilderX 或其他支持 UniApp 的开发工具。然后创建一个新的 UniApp 项目。 # 使用 HBuilderX 创建新项目 # 选择 uni-app 模板 -> 选择 Vue.js 模板 -> 输入项目名称 -> 创建2. 安装依赖 UniApp 内置了一些…...

编程日记 2025/6/28 12:03:10

spring cloud contract http实例

微服务很多时，服务之前相互调用，接口参数的一致性要变得很难维护。 spring cloud contract 提供了测试接口一致性的方法。一项目配置 plugins {id "groovy"id "org.springframework.cloud.contract" version "4.0.5"i…...

编程日记 2025/6/28 5:03:23

修改docker源

在/etc/docker/daemon.json文件中写入 { "registry-mirrors": [ "Welcome to nginx!" ] } 执行 systemctl daemon-reload systemctl restart docker docker info能够看到源已经被替换现在国内能够使用的docker源经过测试只有Welcome to nginx! …...

编程日记 2025/6/25 7:12:05

顺序表的使用，对数据的增删改查

主函数： 3.c #include "3.h"//头文件调用 SqlListptr sql_cerate()//创建顺序表函数 {SqlListptr ptr(SqlListptr)malloc(sizeof(SqlList));//在堆区申请连续的空间if(NULLptr){printf("创建失败\n");return NULL;//如果没有申请成功&#xff…...

编程日记 2025/6/26 1:10:47

【在Linux世界中追寻伟大的One Piece】自旋锁

目录 1 -> 概述 2 -> 原理 3 -> 优缺点及使用场景 3.1 -> 优点 3.2 -> 缺点 3.3 -> 使用场景 4 -> 纯软件自旋锁类似的原理实现 4.1 -> 结论 5 -> 样例代码 1 -> 概述自旋锁是一种多线程同步机制，用于保护共享资源避免受并…...

编程日记 2025/6/25 16:15:33

信创改造-Spring Boot 项目部署至 TongWeb

打 war 包参考：https://blog.csdn.net/z1353095373/article/details/144330999...

编程日记 2025/6/4 15:27:45

选择WordPress和Shopify：搭建对谷歌SEO友好的网站

在建设网站时，不仅要考虑它的美观和功能性，还要关注它是否对谷歌SEO友好。如果你希望网站能够获得更好的搜索排名，WordPress和Shopify是两个值得推荐的建站平台。 WordPress作为最流行的内容管理系统，其强大的灵活性和丰富的插件…...

编程日记 2025/6/28 11:58:31

Rust之抽空学习系列（二）—— 编程通用概念（上）

Rust之抽空学习系列（二）—— 编程通用概念（上） Rust 作为一门强类型的静态类型语言，会有哪些与生俱来的天赋呢？ 1、静态类型语言 vs 动态类型语言特性静态动态类型检查编译时运行时错误检测执行前执行期…...

编程日记 2025/6/28 11:45:10

《神经网络与深度学习》(邱锡鹏) 内容概要【不含数学推导】

第1章绪论基本概念：介绍了人工智能的发展历程及不同阶段的特点，如符号主义、连接主义、行为主义等。还阐述了深度学习在人工智能领域的重要地位和发展现状，以及其在图像、语音、自然语言处理等多个领域的成功应用。术语解释人工智能&…...

编程日记 2025/6/26 11:21:15

Wireshark如何查看数据包时间间隔

1.如果数据包量不大，抓包本身也不大，建议从绝对时间判断，打开wireshark软件，并点开相应要分析的抓包文件。进入到最上方菜单<视图>,在弹出菜单选择时间显示格式，再在右侧菜单中选择自捕获经过的秒数。这样就可…...

编程日记 2025/6/22 11:27:46

ISP和IQ调试（一）

系列文章目录文章目录系列文章目录前言一、ISP（image signal process)二、ISP位置三、IQ总结前言一、ISP（image signal process) image signal process 图像处理技术 image signal processor 图像信号处理器设备什么是图像信号？ 代表…...

编程日记 2025/6/27 14:48:17

uniapp改成用vue起项目

目的：让项目按照vue的打包流程跑流水线 1.按照uniapp官网教程执行 2.执行第二条命令时报错 ERROR Failed to get response from true/vue-cli-version-marker 3.解决方式报错可能跟yarn有关，然后切换成npm 找到自己本地电脑的这个文件按照截图修…...

编程日记 2025/6/23 16:18:06

java之集合（详细-Map,Set,List）

1集合体系概述 1.1集合的概念集合是一种容器，用来装数据的，类似于数组，但集合的大小可变，开发中也非常常用。 1.2集合分类集合分为单列集合和多列集合 Collection代表单列集合，每个元素（数据&#xff…...

编程日记 2025/6/28 9:44:23

利用卷积神经网络进行手写数字的识别

数据集介绍 MNIST（Modified National Institute of Standards and Technology）数据集是一个广泛使用的手写数字识别数据集，常用于机器学习和计算机视觉领域中的分类任务。它包含了从0到9的手写数字样本，常用于训练和测试各种图像…...

编程日记 2025/6/28 11:34:18

Flutter 桌面端串口配置

前言我使用flutter_libserialport包在macOS中实现串口通信的功能，可以实现数据收发，但是收到的内容是乱码。这种情况一般都是由于波特率和硬件设备不一致导致的。配置串口配置 1.打开串口读写 import package:flutter_libserialport/flutter_libser…...

编程日记 2025/6/24 12:35:19

Java 的常量池与 String 优化

Java 中的常量池（Constant Pool）是一种内存优化机制，比如字符串常量池： String s1 "Hello"; String s2 "Hello"; System.out.println(s1 s2); // 输出 true，因为指向同一池中的对象但对于使用…...

编程日记 2025/6/27 16:18:33

防范TCP攻击：策略与实践

TCP（传输控制协议）是互联网通信的核心协议之一，它确保了数据在网络上的可靠传输。然而，TCP也容易成为各种网络攻击的目标，如SYN洪水攻击、TCP连接耗尽攻击等。本文将探讨如何通过配置防火墙规则、优化服务器设置以及采…...

编程日记 2025/6/28 2:02:12

单片机：实现呼吸灯（附带源码）

单片机实现呼吸灯详细解读呼吸灯是一种常见的灯光效果，广泛应用于电子产品、汽车、家居照明等领域。其基本特性是通过逐渐增亮和减弱的方式，使得灯光呈现出“呼吸”的效果，给人一种平缓、舒适的视觉感受。在嵌入式系统中，呼吸灯…...

编程日记 2025/6/25 13:39:14

Android 第三方框架：RxJava：源码分析：责任链模式

文章目录责任链模式RxJava中的责任链总结责任链模式 RxJava中的责任链链式调用的使用过程中形成了两个单向链表第一个单向链表是Observable链表它的形成过程： 1.首先调用Observable的静态方法创建第一个Observable对象，作为Observable链表的表…...

编程日记 2025/6/23 20:39:24

基于HTML的个人博客系统的设计与实现

一、前言随着互联网的飞速发展，人们分享生活、表达观点和展示自我的需求日益增长。个人博客作为一种重要的网络交流平台，为用户提供了便捷的信息发布和分享渠道。它不仅可以记录个人的成长经历、专业知识、兴趣爱好等，还能促进用户之间的互动…...

编程日记 2025/6/28 11:48:11

DMA（Direct Memory Access）：直接内存访问

DMA（Direct Memory Access）：直接内存访问一、传统CPU存取数据 CPU不直接存取外设的原因主要有两点： 速度差异：CPU的处理速度远高于外设，无法直接同步。格式多样性：外设数据格式种类繁多&…...

编程日记 2025/6/20 18:53:40

数据分析python小工具录入产品信息到Excel

在没有后台管理系统的时候，有时候为了方便起见，想提供一个输入框让运营人员直接输入，然后数据就会以数据库的形式存进数据库效果图： 输入用户名输入数据输入信息后点击添加到表格，检查后方便批量保存到excel …...

编程日记 2025/6/25 9:00:19

Mac安装brew的终极方法

/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"按回车后，根据提示操作： 输入镜像序号（1-5都可以）输入Y，回车等待brew安装完成即可。 M系列芯片亲测有效&#x…...

编程日记 2025/6/27 23:19:31

卷积神经网络比于全连接神经网络强在哪？

卷积神经网络（Convolutional Neural Networks，简称CNN）与全连接神经网络（Fully Connected Neural Networks，简称FFNN）是深度学习和神经网络领域中两种最为常见的网络结构。两者在结构、工作原理及应用场景上…...

编程日记 2025/6/28 11:53:07

Stable Diffusion Controlnet常用控制类型解析与实战课程 4

本节内容，是stable diffusion Controlnet常用控制类型解析与实战的第四节课程。上节课程，我们陆续讲解了几个与图像风格约束相关的控制类型，本节课程我们再学习一些实用价值较高的控制类型，看一看他们提供了哪些控制思路。一&…...

编程日记 2025/6/28 11:27:08

[ShaderLab] 【Unity】【图像编程】理解 Unity Shader 的结构

在计算机图形学领域，开发者经常面临着管理着色器复杂性的挑战。正如大卫惠勒（David Wheeler）所说：“计算机科学中的任何问题都可以通过增加一层抽象来解决。” Unity 提供了这样一层抽象，即 ShaderLab，它通过组织和定义渲染过程的各个步骤，简化了编写着色器的过程。什…...

编程日记 2025/6/26 16:45:09

Source Insight的使用经验汇总

01-Add All"和“Add Tree”有何区别？ 在 Source Insight 中，“Add All”和“Add Tree”是两种向项目（Project）中添加文件的操作选项，它们的区别在于处理文件和目录的方式不同： 1. Add All 范围&am…...

编程日记 2025/6/24 1:37:03

CentOS 7.9 更换 YUM：解决宝塔安装困境的探索之旅

在进行网站搭建工作时，我满怀期待地准备安装宝塔面板，然而却遭遇了安装失败的挫折。经过一番排查与思考，我将目光聚焦到了系统的 YUM 上，怀疑它可能是导致问题的“罪魁祸首”。于是，我毅然决定对 CentOS 7.9 的 YUM 进…...

编程日记 2025/6/25 4:33:51

28. Three.js案例-创建圆角矩形并进行拉伸

28. Three.js案例-创建圆角矩形并进行拉伸实现效果知识点 WebGLRenderer (WebGL渲染器) WebGLRenderer 是 Three.js 中用于渲染 3D 场景的主要渲染器。构造器 WebGLRenderer( parameters : Object ) 参数类型描述parametersObject渲染器的配置参数，可选。 …...

编程日记 2025/6/24 11:45:58

最佳实践：编写和配置 Stylelint 自定义插件，Stylelint 自定义规则

前言在前端开发中，代码质量和一致性是至关重要的。Stylelint 作为一个强大的 CSS 代码检查工具，能够帮助开发者发现代码中的问题，并保持代码风格的一致性。然而，内置的规则和插件有时无法完全满足特定项目的需求。在这种情况下&…...

编程日记 2025/6/25 22:14:55

vscode借助插件调试OpenFoam的正确的.vscode配置文件

正确的备份文件位置： /home/jie/桌面/理解openfoam/正确的调试爆轰单进程案例/mydebugblastFoam 调试爆轰案例流体并且工作区和用户区都是openfoam-7版本问题：F5以debug模式启动后不停在断点解决方法： 这里备份一下.vsode正确的配置&…...

编程日记 2025/6/24 16:35:57

Towards Frame Rate Agnostic Multi-object Tracking—迈向帧率无关的多目标跟踪

Towards Frame Rate Agnostic Multi-object Tracking—迈向帧率无关的多目标跟踪发表在IJCV 2023年作者：Weitao Feng, Lei Bai, Yongqiang Yao, Fengwei Yu & Wanli Ouyang 研究目标：多目标跟踪的帧率无关性研究 IJCV 在计算机视觉领域的影响力非常…...

编程日记 2025/6/26 21:36:00

视频网站中重磅推荐模块(附加源码)

写在开头上期代码主要实现省市区三级联动效果，开发久了很多功能都是通过框架组件库来完成，但是如果组件满足不了开发需求，还需要开发人员手动封装组件，专门出这样一期文章，通过原生js实现一些特定功能，功能…...

编程日记 2025/6/23 9:07:38

demo代码 String worlds "flink,spark,hadoop,zk,kafka";streamSource.flatMap(new RichFlatMapFunction<String, String>() {Overridepublic void flatMap(String value, Collector<String> collector) throws Exception {String[] worlds value.spl…...

编程日记 2025/6/21 17:13:11

jvm内存优化方式

1. JVM（Java Virtual Machine）： • 定义：Java虚拟机，是运行Java字节码的抽象计算机。 • 内存管理：负责内存的分配和回收，是JVM内存优化的核心。 2. 堆（Heap）&#xff1a…...

编程日记 2025/6/28 7:55:52

顺序表的实现

大家好，今天给大家分享一下最基础的数据结构--顺序表的实现，其实顺序表与我们的数组相似，但是顺序表存储数据必须是连续的，不能像数组一样存储在任意下标，那么我们就来看看顺序表的代码。 SeqList.h SeqList.c 那么今…...

编程日记 2025/6/23 7:52:04

优化Go语言中的网络连接：设置代理超时参数

网络连接优化的重要性在分布式系统和微服务架构中，网络请求的效率直接影响到整个系统的响应速度。合理的超时设置可以防止系统在等待网络响应时陷入无限期的阻塞，从而提高系统的吞吐量和用户体验。特别是在使用代理服务器时，由于增加了网络…...

编程日记 2025/6/25 4:41:06

活动｜华院计算董事长宣晓华出席第十五届田长霖论坛会议

12月11日，2024年光谷田长霖中心科技文化交流大会暨第十五届田长霖论坛会议举行，300多位院士专家、大学校长、青年学者和优秀企业家齐聚光谷。华院计算技术（上海）股份有限公司（以下简称“华院计算”）创始人…...

编程日记 2025/6/25 5:53:55

qt-C++语法笔记之mapToGlobal将组件（控件）中的本地坐标系（局部坐标）映射到全局坐标系

qt-C语法笔记之mapToGlobal将组件（控件）中的本地坐标系（局部坐标）映射到全局坐标系 code review! 文章目录 qt-C语法笔记之mapToGlobal将组件（控件）中的本地坐标系（局部坐标）映射到…...

编程日记 2025/6/25 10:36:08

设计一个高效的Java多线程应用程序及案例

《剑来》勇敢追梦：“如果真的有那么喜欢苏姑娘，既然这辈子到最后也没能说出口喜欢她，没关系，以后数十年百余年，哪怕找遍人间，你都要去再见她一次，大声告诉她，自己喜欢她。” 正视困…...

编程日记 2025/6/22 1:05:57

基于最新的Apache StreamPark搭建指南

一、StreamPark 的介绍官方文档：Apache StreamPark (incubating) | Apache StreamPark (incubating) 中文文档：Apache StreamPark (incubating) | Apache StreamPark (incubating)Github地址：https://github.com/apache/incubator-streampark Apache StreamPark™ 是一个…...

编程日记 2025/6/23 6:48:27

迎接全新的 Kotlin 支持 – K2 模式：基本信息

K2 模式有什么作用？ K2 模式是 IntelliJ IDEA 中 Kotlin 支持的新实现，它可以提高 IDE 的稳定性，同时也会为支持未来 Kotlin 语言功能奠定基础。 K2 模式与 Kotlin K2 编译器有什么区别？ K2 编译器负责编译 Kotlin 语言 2.0 或…...

编程日记 2025/6/27 13:27:01

阿里云元宇宙

在数字经济时代，技术的迅猛发展带来了前所未有的机遇与挑战，元宇宙正逐步成为全球科技与商业创新的热点。作为中国云计算和人工智能领域的领导者，阿里云通过其强大的技术能力，推出了全面的阿里云元宇宙解决方案，为全球…...

编程日记 2025/6/26 23:26:17

题目 1688: 数据结构-字符串插入

第一种方式字符串 #include<iostream> #include<cstring> #include<algorithm> using namespace std; int main(){string s1,s2;int n;cin>>s1>>s2>>n;s1.insert(n-1,s2);cout<<s1<<endl;return 0; } 第二种方式字符数组 …...

编程日记 2025/6/28 5:01:20

MetaGPT中的教程助手：TutorialAssistant

1. 提示词 COMMON_PROMPT """ You are now a seasoned technical professional in the field of the internet. We need you to write a technical tutorial with the topic "{topic}". """DIRECTORY_PROMPT (COMMON_PROMPT "…...

编程日记 2025/6/25 14:59:12

如何将Python程序打包发布，实现一键安装

哈喽，大家好，我是木头左！编写完Python脚本后，如何将其高效地发布并安装到其他计算机上，。本文将详细介绍如何将Python程序打包发布，实现一键安装，让程序的分发与部署变得轻松便捷。一、准备工作 1. 编写和测试程序在开始打包之前，首先要确保你的Python程序已经编…...

编程日记 2025/6/26 7:02:57

Java 接口

1. 接口概述 (1) Java提供了一个关键字 interface，用这个关键字可以定义接口； (2)格式： public interface 接口名{ //成员变量(常量) //成员方法(抽象方法) } public interface A {//成员变量(接口默认为常量-public static final)String NA…...

编程日记 2025/6/26 7:26:16