1.實現常見的我的介面常用的功能組，不多說先上圖

本文重點講的是：

上面這張圖相信很多人都不陌生，但是要如何橫豎細縫的都很正規呢請看下面的程式碼

wxml程式碼

<view class='item'>
  <image class='left' src='/img/phone-2.png'></image>
  <view class='center'>電話諮詢</view>
  <image class='left' src='/img/right-head.png'></image>
</view
 
>

wxss程式碼

.item{
  display: flex;
  flex-direction: row;
  height: 102rpx;
  color: white;
  font-size: 25rpx;
  align-items: center;
  background-color: #262932;
}
.item image{
  height:33rpx;
  width:33rpx;
}
.item .left{
  margin: 0 40rpx;
}
.item .right{
  margin-right: 27rpx;
}
.item .center
 
{
  flex: 1;
}

沒有什麼高深的東西，相信初學者的你也能看懂，需要注意的地方主要是flex佈局時我的思想

1. 父元素先設為flex佈局
2. 新增align-items: center;
3. 中間的內容值設定flex:1實現自動補滿寬度

實現帶圖示的按鈕

你一看，這個不是自帶的button就有這個 功能麼，那為什麼還是先他，說一下樓主的初衷吧，有些圖示微信是不提供的，而且補充別的圖示還比較麻煩，不如直接使用image。匯入圖示的可以直接出門了，哈哈

wxml程式碼：

    <view class='button-i'>
        <image src
 
='/img/point.png'></image>
        <view>讚賞</view>
    </view>

wxss程式碼：

.button-i{
  border:1px solid #ffd20d;
  background-color: #ffd20d;
  padding:10rpx 30rpx;
  text-align: center;
  border-radius: 6px;
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width:208rpx;
  height:50rpx;

}
.button-i image{
  height:50rpx;
  width:50rpx;
  display: inline-block;
}

這裡也採用的flex佈局，主要思想是吧圖片變為了行內元素，通過justify-content: center和align-items: center;來實現的垂直居中顯示

感覺動手試試吧