C#開發微信小程序（五）

導航： C#開發微信小程序系列

 

關於小程序項目結構，框架介紹，組件說明等，請查看微信小程序官方文檔，關於以下貼出來的代碼部分我只是截取了一些片段，方便說明問題，如果需要查看完整源代碼，可以在我的項目庫中下載：

https://e.coding.net/dwBurning/ReallyWantToApi.git
https://e.coding.net/dwBurning/LazyOrders.git

又是一個周末，九月已過半，學生們都開學了，公司招聘的應屆生也分配到部門，開始上崗了，想當年，我也是校招入職，現如今，已經開始帶新人了，不得不感慨一番時光已逝。雖然已經是“老司機”了，但是還是要保持一顆積極向上，愛學習愛生活的心。

今天給《C#開發微信小程序》一個完結，代碼部分已經沒再更新了，基於學習的目的，該篇也只是記錄一下自己學習過程中遇到的問題，為正在摸索的人以指引，可能，這就是我寫這些博文的意義了吧！

 

1）關於垂直居中的問題

如下圖獲取微信個人信息然后展示出來，調的時候花了很長的時間，這都是我對前端布局CSS屬性不熟悉的緣故，一開始我使用float，看上去好像也是合情合理，文字部分確實也沒有問題，但是我解決不了頭像垂直居中的問題，試了各種方法，都沒有達到要求，最后通過以下CSS屬性解決了問題，那么align-items與justify-content這兩個屬性分別呈現的是什么效果，可以點擊鏈接跳轉到菜鳥教程網深入的學習一下，要特別記錄一下的是display必須設置為flex，align-items的設置才生效，這兩個屬性必須是綁定在一起使用的。

align-items傳送門：https://www.runoob.com/try/playit.php?f=playcss_align-items&preval=center

justify-content傳送門：https://www.runoob.com/try/playit.php?f=playcss_justify-content&preval=space-between

display: flex;

align-items: center;

justify-content : space-between

 上述布局在移動端是很常見的，隨便打開一個微信小程序，可以說都能看到類似的布局，貼一下CSS代碼，需要的時候直接拿來用就是了

.section {
  padding: 0rpx;
}

.section .line {
  margin-left: 30rpx;
  padding-right: 30rpx;
  line-height:4;
  border-bottom: 1px solid #efefef;
  display: flex;
  align-items: center;
  justify-content : space-between
}

.section .line .avatar {
  width: 110rpx;
  height: 110rpx;
  border-radius: 50%;
}

.section .line:last-child {
  border-bottom: none;
}

.section .line .tl {
  color: #aaa;
}

 

2）關於wxml嵌套循環

如下圖我的訂單界面，存在多個訂單，每個訂單里邊又有多個菜單，那么就涉及到嵌套循環了，官方文檔中給出了一個經典的例子，9*9乘法表，當時也沒有仔細看，也沒有去做一個理解，於是要用到的時候就給自己挖坑了。

 

使用循環嵌套的時候，一定要使用wx:for-item="ordersItem"給數組的當前項變量命名（默認為item），目的就是為了區分當前屬於哪個循環，否則就會異常，導致數據出不來

 

<view class="main">
  <view wx:if="{{hasList}}" class="orders-box">
    <view class="orders-list" wx:for="{{orders}}" wx:for-item="ordersItem" wx:key="ordersItem.OrderId">
      <view class="orders-number">訂單編號：{{ordersItem.OrderId}}</view>
      <view class="orders-detail" wx:for="{{ordersItem.Menus}}" wx:key="{{ordersItem.Menus.MenuId}}">
        <image src="{{item.ImgPath}}"></image>
        <view class="">{{item.MenuName}}</view>
        <view class="">{{item.Price}}</view>
      </view>
      <view class="orders-footer">
        <text class="orders-footer-total">實付：￥{{ordersItem.TotalPrice}}</text>
        <view wx:if="{{!ordersItem.IsPaid}}">
          <button size="mini" class="orders-btn" bindtap="payOrders">付款</button>
        </view>
        <view wx:else>
          <text>交易已完成</text>
        </view>
      </view>
    </view>
  </view>
  <view wx:else>
    <view class="orders-no-data">您還沒有提交訂單哦~</view>
  </view>
</view>

 

3）貼一下如下圖所以頁面，導航部分的CSS代碼，因為這種布局在移動端也是很常見的，再次需要用的時候，直接拿來用就是了。

  <view class="navigator-box">
    <block wx:for-items="{{pages}}" wx:key="*item">
      <navigator url="{{item.page}}/{{item.page}}" class="navigator">
        <image class="navigator-img" src="../../images/{{item.page}}.png"></image>
        <view class="navigator-text">{{item.text}}</view>
        <view class="navigator-arrow"></view>
      </navigator>
    </block>
  </view>

.navigator-box {
  opacity: 1;
  position: relative;
  background-color: #fff;
  line-height: 1.41176471;
  font-size: 34rpx;
}

.navigator-box-show {
  opacity: 1;
  transform: translateY(0);
}

.navigator {
  padding: 30rpx 30rpx;
  position: relative;
  display: flex;
  align-items: center;
}

.navigator:before {
  content: " ";
  position: absolute;
  left: 30rpx;
  top: 0;
  right: 30rpx;
  height: 1px;
  border-top: 1rpx solid #d8d8d8;
  color: #d8d8d8;
}

.navigator:first-child:before {
  display: none;
}

.navigator-text {
  flex: 1;
}

.navigator-img {
  width: 60rpx;
  height: 60rpx;
  margin: 0rpx 20rpx 0rpx 10rpx;
}

.navigator-arrow {
  padding-right: 26rpx;
  position: relative;
}

.navigator-arrow:after {
  content: " ";
  display: inline-block;
  height: 18rpx;
  width: 18rpx;
  border-width: 2rpx 2rpx 0 0;
  border-color: #888;
  border-style: solid;
  transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  position: absolute;
  top: 50%;
  margin-top: -8rpx;
  right: 28rpx;
}

這一系列告一段落，最近在研究Python的Django，那么，下一篇，肯定就是與Django相關的內容！學習，永無止盡，不學很慌，學也很慌...