微信小程序开发前准备

一、运行效果

• 显示学生头像和详细信息
  

二、知识储备

（一）常用组件

• 本案例使用了view与image组件

1、view组件

• view组件常用属性

2、image组件

• 微信小程序提供了用于显示图片的image组件，并且image组件的功能比HTML中的标签更强大，支持对图片进行剪裁和缩放。image组件的默认宽度为300px，默认高度为240px。
• image组件常用属性

• 图片资源地址src可以是本地路径或URL地址。如果使用本地路径，可以在项目中创建一个目录，例如images目录，并在该目录中放入图片，例如test.jpg，然后通过本地路径/images/test.jpg即可引用图片。
• image组件的mode属性用于指定图片的裁剪模式或缩放模式
  
  

（二）rpx单位

1、什么rpx单位

• rpx（Responsive Pixel，自适应像素）。rpx单位是微信小程序独有的、用来解决屏幕适配问题的尺寸单位。
• rpx单位的设计思想是把所有设备的屏幕在宽度上等分为750份，即屏幕的总宽度为750rpx。微信小程序在不同设备上运行的时候，会自动把rpx单位换算成对应的像素单位来渲染，从而实现屏幕适配。

2、rpx与px相互换算

三、实现步骤

（一）创建项目

• 项目名称：学生信息

• 模板选择：不使用模板
  

• 单击【确定】按钮
  

• 清空页面结构文件index.wxml内容
  

• 修改页面配置文件index.json，不使用navigation-bar组件
  

• 修改全局配置文件app.json，删除渲染器配置，设置window配置项
  

（二）准备图像素材

• 在项目根目录里创建images子目录
  
• 将图片student.jpg拷贝到images目录
  

（三）编写小程序页面结构

• 页面文件：pages/index/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">年龄：18view>
        <view class="item">专业：计算机应用view>
        <view class="item">班级：2022计应1班view>
        <view class="item">手机：15890903456view>
        <view class="item">爱好：编程、旅游、阅读view>
    view>
view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

（四）编写小程序页面样式

• 页面样式文件：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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

（五）查看真机调试效果

• 选择启动PC端自动真机调试
  
• 单击【编译并自动调试】按钮，查看效果
  

四、拓展练习

（一）运行效果

• 利用view组件实现的横向布局
  

（二）实现步骤

1、创建小程序项目

• 项目名称：小程序组件
  

2、添加list页面

• 修改app.json文件，增加list页面
  

3、编写list页面内容

• 修改list.wxml文件
  

<navigation-bar title="Weixin" back="{{false}}" color="black" background="#FFF">navigation-bar>
<view class="container1">
    <view>太阳view>
    <view>地球view>
    <view>月亮view>
view>
1
2
3
4
5
6
7

4、导入导航条组件

• 修改list.json文件
  

{
    "usingComponents": {
        "navigation-bar": "/components/navigation-bar/navigation-bar"
    }
}
1
2
3
4
5

5、编写list页面样式

• 修改list.wxss文件
  

/* pages/list/list.wxss */
.container1 view {
    width: 90px;
    height: 90px;
    text-align: center;
    line-height: 90px;
}

.container1 view:nth-child(1) {
    background-color: lightgreen;
}

.container1 view:nth-child(2) {
    background-color: lightskyblue;
}

.container1 view:nth-child(3) {
    background-color: lightcoral;
}

.container1 {
    display: flex;
    justify-content: space-around;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

6、查看真机调试效果

• 启动PC端自动真机测试，查看效果
  
• Weixin没有居中显示
• 修改list.wxss文件
  
• 再启动PC端自动真机测试，查看效果