02：微信小程序案例2-1：学生信息

一、实现步骤

（一）创建项目

• 项目名称：学生信息
• 模板选择：不使用模板
  
• 单击【确定】按钮
  
• 清空页面结构文件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端自动真机调试
  
• 单击【编译并自动调试】按钮，查看效果