本文介绍了如何使用微信小程序开发一个简历小项目，重点讲解了小程序中的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
最低0.47元/天 解锁文章
213
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
