一、实现步骤
(一)创建项目
- 项目名称:学生信息
- 模板选择:不使用模板
- 单击【确定】按钮
- 清空页面结构文件
index.wxml
内容。
- 修改页面配置文件
index.json
,不使用navigation-bar
组件。
- 修改全局配置文件
app.json
,删除渲染器配置,设置window
配置项。
(二)准备图像素材
- 在项目根目录里创建
images
子目录
- 将图片
student.jpg
拷贝到images
目录
(三)编写小程序页面结构
- 页面文件:
pages/index/index.wxml
<!--index.wxml-->
<view>
<!--头像区域-->
<view class="top">
<view class="user-img">
<image src="/images/student.jpg" />
</view>
</view>
<!--详情区域-->
<view class="menu">
<view class="item">姓名:陆</view>
<view class="item">性别:女</view>
<view class="item">年龄:20</view>
<view class="item">专业:计算机应用技术</view>
<view class="item">班级:2021计应1班</view>
<view class="item">手机:15884758562</view>
<view class="item">爱好:阅读</view>
</view>
</view>
(四)编写小程序页面样式
- 页面样式文件:
pages/index/index.wxss
/**index.wxss**/
.top {
background: #3A4861;
width: 100%;
padding: 30rpx 0;
}
.top .user-img {
width: 300rpx;
margin: 0 auto;
}
.top image {
width: 300rpx;
height: 300rpx;
border-radius: 50%;
border: 6rpx solid #777F92;
}
.menu .item {
height: 96rpx;
line-height: 96rpx;
border-bottom: 2rpx solid #ccc;
padding: 10rpx 40rpx;
font-size: 34rpx;
}
(五)查看真机调试效果
- 选择
启动PC端自动真机调试
- 单击【编译并自动调试】按钮,查看效果