2022-01-13 微信小程序-简历小项目(一) 小程序中的flex布局,简历首页的制作,箭头区域的制作

原创已于 2022-11-04 12:52:13 修改 · 1.6k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序 #flex布局 #弹性盒

于 2022-01-13 20:53:12 首次发布

笔记同时被 2 个专栏收录

93 篇文章

订阅专栏

微信小程序

16 篇文章

订阅专栏

本文介绍了如何使用微信小程序开发一个简历小项目，重点讲解了小程序中的flex布局，包括如何将div替换为view标签进行布局，并详细阐述了首页和箭头区域的制作过程，涵盖封面居中、气泡效果和个人介绍等内容。

文章目录

一.准备

1.目标

1 学会部署在线小程序
2 小程序中的flex布局
3 小程序ui组件在实际项目中的运用

2.小程序中的flex布局

回顾flex布局

<style>
   #app {
       display: flex;
   }
   #app>div {
       margin: 20px;
       width: 100px;
       height: 100px;
       background: pink;
   }
</style>
<body>
    <div id="app">
        <div>11111</div>
        <div>11111</div>
        <div>11111</div>
        <div>11111</div>
    </div>
</body>

小程序中要把div换成view标签,别的不变

wxml:

<view id="app">
    <view>11111</view>
    <view>11111</view>
    <view>11111</view>
    <view>11111</view>
    <view>11111</view>
</view>

wxss:

#app {
    display: flex;
}
#app>view {
    margin: 20px;
    width: 100px;
    height: 100px;
    background: pink;
}

二.制作简历小程序-首页

1.利用小程序提供的独有的API来初始化高和宽

在这里插入图片描述

小程序中的swiper

https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

2.初始化app.json中的data

 data: {
    width:0,
    height:0,
    name:'罗纳尔多',
    spell:'ronaldo',
    job:'足球运动员',
    exp:'20年世界最佳',
    tel: "1888888888",
    sex: "男",
    age: 37,
    email: "cluo@163.com",
    address: "意大利尤文图斯街道",
    skill:[
      { name: "射门", percent:85},
      { name: "头球", percent: 90 },
      { name: "单刀射门精度", percent: 90 },
      { name: "跑位", percent: 70 },
      { name: "体力", percent: 60 }
    ],
  },

3.首页的制作

在这里插入图片描述

3.1.把首页简历的封面布局居中

创建pages/resume/resume
resume.wxml

<swiper class="swiper" style="height:{{height}}px">
    <swiper-item>
        <view class="wrap1">
            <image class="photo" src="https://ftp.bmp.ovh/imgs/2021/06/7c1dad816c3adfb7.jpg"></image>
         </view>
    </swiper-item>
</swiper>

resume.wxss

.warp{
    width: 100%;
    height: 100%;
    padding: 10px;
}
.photo{
    width: 90%;
    margin-top:80px;
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

resume.js

Page({
  /**
   * 页面的初始数据
   */
  data: {
    width: 0,
    height: 0,
    name: '罗纳尔多',
    spell: 'ronaldo',
    job: '足球运动员',
    exp: '20年世界最佳',
    tel: "1888888888",
    sex: "男",
    age: 37,
    email: "cluo@163.com",
    address: "意大利尤文图斯街道",
    skill: [{
        name: "射门",
        percent: 85
      },
      {
        name: "头球",
        percent: 90
      },
      {
        name: "单刀射门精度",
        percent: 90
      },
      {
        name: "跑位",
        percent: 70
      },
      {
        name: "体力",
        percent: 60
      }
    ],
  },
  ...
});

3.2.加上简历中英文名以及CSS编写

resume.wxml

 <!-- 1.封面图片 -->
<image class="photo" src="https://ftp.bmp.ovh/imgs/2021/06/7c1dad816c3adfb7.jpg"></image>
<!-- 2.中英文姓名 -->
<view class="name">
    <text>{{name}}</text>
</view>
<view class="englishname">
    <text>{{spell}}</text>
</view>

resume.wxss

.name {
  font-size: 28px;
  margin-left: 30px;
  margin-top: 10px; 
  font-weight: bold;
}
.englishname {
  margin-left: 30px;
  letter-spacing: 2px;
}

3.3.加上气泡

wxml:

<!-- 3.气泡区域 -->
<view class="bubble1"></view>
<view class="bubble2"></view>
<view class="bubble3"></view>

wxss:

.bubble1 {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  left: -50%;
  top: 10px;
  background-color: rgba(0, 165, 34, 0.7);
}
.bubble2 {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  left: -15px;
  top: 450px;
  background-color: rgba(0, 165, 34, 0.7);
}
.bubble3 {
  position: absolute;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  left: 255px;
  top: 150px;
  background-color: rgba(0, 165, 34, 0.7);
}

3.4.补上个人介绍

wxml:

<view class="wrap1">
      <!-- 1.封面图片 -->
      <!-- 2.中英文姓名区域 -->
      <!-- 3.气泡区域 -->
</view>
 <!-- 4.中间自我介绍 -->
 <view class="introduceWrap">
   <view>
     <text>前端开发工程师</text>
   </view>
 </view>

wxss:

.introduceWrap {
  position: absolute;
  top: 300px;
  width: 100%;
  height: 100px;
  background-color: rgba(0, 0, 0, 0.2);
  text-align: center;
  line-height: 100px;
  color: white;
  font-size: 28px;
  font-weight: bold;
}

三.箭头区域的制作

0.箭头区域图标

wxml

 <swiper-item>
   <view class="wrap1">...</view>
   <!-- 中间自我介绍 -->
   <view class="introduceWrap">...</view>
   <!-- 1.箭头区域 -->
    <view class="jiantou">
       <image mode="widthFix" class="a1" src="https://ftp.bmp.ovh/imgs/2021/04/a8de270b0f6b26c2.png"></image>
       <text>简历</text>
    </view>
 </swiper-item>

wxss

.jiantou {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 70px;
  height: 20px;
  display: flex;
}
.a1 {
  width: 20px;
  height: 20px;
}

效果:
在这里插入图片描述

1.基本资料

wxml

 <swiper-item>
    <scroll-view scroll-y="true" style="width:{{width}}px;height:{{height}}px;">
      <!-- 1.基本资料 --> 
      <view class="wrap2">
        <view class="titleWrap"><text class="number">1</text><text class="title">基本资料</text> </view>
        <view class="nameAndPhone"><text class="name1">姓名:罗纳尔多</text></view>
        <view class="nameAndPhone"><text>电话:18888888888</text> </view>   
        <view class="nameAndPhone"><text>年龄:36</text></view>
        <view class="nameAndPhone"><text>住址:意大利尤文图斯</text></view>
     </view>
      <!-- 2.主要技能区域 --> 
      <!-- 3.教育经历 -->
   </scroll-view>
</swiper-item>

wxss

.titleWrap {
  display: flex;
  border-bottom: 3px solid black;

  padding-bottom: 10px;
}

.number {
  display: block;
  width: 30px;
  height: 30px;
  font-size:18px ;
  font-weight: bold;
  color: aliceblue;
  background-color: black;
  text-align: center;
  line-height: 30px;
  margin-right: 20px;
}

.title {
  font-size: 22px;
  font-weight: 300;
}


.nameAndPhone {
  height: 60px;
  line-height: 60px;
  border-bottom: 1px dashed black;
}

.name1 {
  margin-right: 80px;
}

2.主要技能

wzml

 <!-- 2.主要技能区域 -->
 <view class="skillWrap">
   <text class="number">2</text>
   <text class="title">主要技能</text>
 </view>
 <view class="skill" wx:for="{{skill}}" wx:key='item'>
   <text class="skill-name">{{item.name}}</text>
   <progress active activeColor='#2a5caa' class="progress" percent="{{item.percent}}" stroke-width="5"></progress>
 </view>

wxss

.skillWrap{
  margin-bottom: 5px;
}

3.教育经历

wxml

<!-- 3.教育经历 -->
<view class="titleWrap">
  <text class="number">3</text>
  <text class="title">教育经历</text>
</view>
<view>
  <image class="iconschool" src="https://ftp.bmp.ovh/imgs/2021/04/c01b4920aa073096.png"></image>
  <text>里斯本竞技</text>
</view>
<view>
  <image class="iconschool" src="https://ftp.bmp.ovh/imgs/2021/04/e929f9fb59cec747.png"></image>
  <text>足球与艺术本科 2001年-2003年 </text>
</view>
<view>
  <text>
    2001年，C罗进入了葡萄牙体育足球俱乐部一线队；2002年10月7日，在葡超联赛里斯本竞技3:0战胜莫雷伦斯足球俱乐部的比赛中，完成个人的葡超首秀，并且在比赛中攻入2球。
    2002-03赛季，C罗共代表葡萄牙体育在葡超联赛出场25次，进3球，有6次助攻 [20] ；并且在赛季欧洲冠军联赛预选赛中亮相对阵国际米兰足球俱乐部 [21] 。
    2003年8月6日，在葡萄牙体育何塞·阿尔瓦拉德球场落成典礼上，主队与曼彻斯特联足球俱乐部的友谊赛中，亚历克斯·弗格森爵士看中了C罗，并以1224万英镑的价格签约
  </text>
</view>

wxss

.iconschool {
   width: 30px;
   height: 30px;
   vertical-align: middle;
   margin-right: 10px;
}

结果
在这里插入图片描述