小程序學習之基礎

1.垂直居中

display:flex;    

flex-direction:column;  //列垂直

align-items: center;   //居中

這樣在整個view中，全部的元素都會垂直居中顯示

<view class="container">

<image class="user-avatar" src="/images/avatar.jpg"></image>

<text>hello 李破</text>

<view>

<text>開啓小程序之旅</text>

</view>

</view>

.container{

display:flex;

flex-direction: column;

}

2.text垂直居中

wxss

.moto-container{

border:1px solid #405f80;

width:200rpx;

height:80rpx;

border-radius: 5px;

text-align: center;

}

.moto{

font-size:22rpx;

font-weight: bold;

line-height: 80rpx;

color:#405f80;

}

wxml

<view class="moto-container">

<text class="moto">開啓小程序之旅</text>

</view>

text的line-height與view的height一致

 

3.設置全屏自適應高度  背景色

方法一：
小程序wxml是隱藏了一個最外層的page標籤，這裏須要給page添加height爲100%  而後給page設置背景色
page{
  height:100%;
  background-color: #b3d4db;
}

方法二：
須要最上面的顯示電池包括時間信號的手機樣式也顯示背景  則須要在app.json裏面設置

{
  "pages": [
    "pages/welcome/welcome"
  ],
  "window": {
    "navigationBarBackgroundColor": "#b3d4db"
  }
}

 

4.rpx  px單位   設計圖以iphone6爲準  若是設計圖是500px  那麼在微信開發者工具裏用iphone6 設置寬度爲500rpx

由於在iphone6裏面  1px=1rpx  其餘的手機就會自適應 

通常若是須要作自適應的就用rpx  可是其餘的好比要突出標題文字之類的  就用px