您现在的位置：程式師世界 >> 編程語言 > >> 更多編程語言 >> Python

【DRF+Django】微信小程序入門到實戰_day01(下)

編輯：Python

（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）效果展示。
# 總結
其實就是把上面的幾個屬性靈活使用了而已。多寫多練就好了。