微信小程序-简历信息显示

最新推荐文章于 2024-11-27 15:43:57 发布

目已

最新推荐文章于 2024-11-27 15:43:57 发布

阅读量3.7k

点赞数 3

本文链接：https://blog.csdn.net/lxrpatient/article/details/92625496

版权

本文档介绍了如何在微信小程序中实现个人简历信息的显示，包括头像和基本信息的布局。首先准备所需文件，创建image、resu和detail文件夹，接着在resu文件夹中设计简历首页，将信息定义在resu.js的data中，然后在detail文件夹中设计点击头像后的详细信息页面，通过事件处理进行页面跳转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本次主要介绍如何实现简单的个人简历信息的显示，其中主要的也就是图片的显示以及文本信息的布局。功能首先是点击按钮进入简历信息显示的首页，其中显示简历主人的头像和基本信息，然后是点击头像进入下一个界面，显示其他关于简历主人的详细信息。

一、文件准备

首先准备简历信息显示小程序开发需要的文件，包括准备简历头像。这里只是做个示例，所以我从网上随便下载了一张图片作为简历头像。在小程序所属文件夹中新建image文件夹，将简历头像存入该文件夹。然后在pages文件夹中新建resu文件夹和detail文件夹，分别表示简历首页界面和点击头像之后显示的界面，并在两个文件夹中分别新建对应固定的四个文件。如下图所示。
在这里插入图片描述

二、显示简历信息小程序的实现

首页界面设计
首页界面设计过程在resu文件夹中实现，在简历信息显示的首页界面设计之前，首先把简历中需要显示所有信息定义在resu.js的data中，然后在resu.wxml中设计整体界面布局，从上到下，从左到右，依次设置，其中信息的显示直接调用data。具体效果如下图所示。
以下为resu.js中的代码：

Page({
  data: {
    resu1:{
      name:'张三',
      sex:'女',
      num:'2015111222',
      pro:'计算机科学与技术',
      age:'22',
      nation:'汉族',
      native:'重庆荣昌',
      poli:'党员',
      phone:'111',
      mail:'weew54545',
      birth:'1997.05.03',
      time:'2015.09-2019.06',
      school:

最低0.47元/天解锁文章