【DRF+Django】微信小程序入门到实战_day01(下)

惜年_night

已于 2022-06-14 18:59:51 修改

阅读量479

点赞数

分类专栏： Django/DRF/小程序/Js框架文章标签：微信小程序

于 2022-06-08 18:39:51 首次发布

本文链接：https://blog.csdn.net/qq_40979183/article/details/125190242

版权

Django/DRF/小程序/Js框架专栏收录该内容

26 篇文章 9 订阅

订阅专栏

（0）摘要

# 课程链接

入门到实战，讲讲公司的微信小程序【django+drf+小程序实战】_哔哩哔哩_bilibili

# 文档链接

微信开放文档

# 课程内容

（1）flex 布局

（2）flex 布局（补充？）

（3）flex 示例

（4）作业_直接上图给代码

（1）flex 布局

# （1）text 和 view 组件。

在小程序中，不会把前端的 html 标签称为标签，而是称为组件。也就是说 text 组件和 view 组件。如下图所示，我们可以打开开发文档，选中组件那一栏就能看到各种组件的功能说明。

本节重点讲解的是 text 和 view 还有 image 三种常用组件，基本大部分小程序都是由这三个组件堆叠而成。其实使用起来和 html 差不多的。

# （2）flex 布局。

1）首先是认识 image 组件，其实就跟 html 里的 img 标签相似。如下图所示，很简单就能看到了 image 组件的使用。

2） flex 布局的初步_ 1。从上面的wxml 代码中，我们知道 .menu 属性对应的 view 组件是最外层的组件（就是父容器）；里面包裹了 .item 属性的 view 组件（子容器）；然后在每一个子容器下，才是 image 和 text 组件。有了这个前提，那么我们如果是将 x 轴设为主轴方向，那么 wxss 的代码如下，也就是将父容器设置为 flex 布局模式，紧接着 flex-direction: row，就能看到如图中的效果。后续讲解，就以 x 轴为主轴。

如果我们将y 作为主轴，那么就设在 flex-direction: column，就能看到下图的样子。可以看到图片都竖着排了。

3） flex 布局的初步_ 2。我们可以看到，上面的图片和文字也都是横着排的。需要注意 .item 的 view 是图片和文字组件的父容器（和上面不是一个了啊！！！），如果我们想要让图片和文字竖着排，我们可以对这个父容器也设置flex布局，设置 y 为主轴方向。然后就可以看到下图的效果

4）我们在 3）中的效果图中，可以看到每一组图片都挨得很近，也就是图片和文字的父容器靠得很近。这里还有一个 justify-content 属性可以用于设置其水平方向的排列方式。具体的见下图的注释

如果 justify-content: space-around ，那么效果如下图所示：

5）副轴的样式设置则是使用 align-items，见下图注释。

6）然后我们再来看图片和文字的对齐方式，很显然都是靠左对齐的。如果我们想要他们居中对齐，也可以对齐父容器进行操作。见下图所示。其实核心就是 flex 布局，基于容器的布局。

7）如果我们想要图片都变成圆的，而不是上面的方的。

（2）flex 布局（补充？）

# 总结，直接上图。

（3）flex 示例

# （1）小程序特有的样式

1）rpx 和 px。rpx 简单来说是小程序给我们设置的一个像素换算关系，因为不同的设备的像素点大小是不一样的，如果使用传统的 px 像素来写的话，那么适配的时候会出现问题。要解决这个问题，我们只需要定义，小程序界面的宽一定是 750 rpx，那么具体是多少个像素点填充，由每个设备自身像素点大小，自己计算。总之，小程序中，使用 rpx 作为宽高的单位。

2）实例，我们想要实现下图的样子。

简单分析一下，那就是每一个拍卖专场是一个盒子，然后盒子下标题是一个盒子。

# （2）开始实现代码。

1）经过了上面的分析，我们直接写出相应的代码。以下是 wxml 的代码。

<view class="outer">
  
  <view class="items">
    
    
    <view class="title">
      第三十二场茶具大会
    </view>
    
    
    <view class="customer">
      <view>2020年01月03日 23:22</view>
      <view>1000人围观</view>
    </view>

    
    <view class="pic">
      <image class="big" src="/static/img/scenery.jpg"></image>
    </view>

    
    <view class="detail">
      <image src="/static/img/scenery.jpg"></image>
      <image src="/static/img/scenery.jpg"></image>
      <image src="/static/img/scenery.jpg"></image>
      <image src="/static/img/scenery.jpg"></image>
    </view>
  </view>

</view>
2）以下是 wxss 的代码。
/* css */

.outer .items .title{
  font-size: 56rpx;
  font-weight: 600;
}

.outer .items .customer{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.outer .items .pic {
  height: 500rpx;  /* 定义外面的这个 view 的高，宽是 750rpx */
  overflow: hidden;  /*图片大，view 小，那么就把多出来的图片隐藏了*/
}
/* 设置图片，按照 view 的大小，等比缩放 */
.outer .items .pic .big {
  height: 100%;
  width: 100%;
}

/* 定义 detail 的 flex 布局 */
.outer .items .detail {
  display: flex;
  flex-direction: row;

}
/* 对每个图片设置一个宽高 */
.outer .items .detail image {
  width: 100rpx;
  height: 100rpx;
  padding-right: 20rpx;
}
3）效果展示。

# 总结

其实就是把上面的几个属性灵活使用了而已。多写多练就好了。