我寫小程式像菜虛鯤——3、附: 實戰部分內容

coder-pig發表於2019-07-04

因為文章太長，所以把實戰部分拆分到本節中~

0x0、佈局實戰：寫個摳腚優鮮的首頁

看那麼多，總得練下手，隨手找個小程式參(chao)考(xi)下吧，這裡選擇的是每日優鮮，利用上一節學到的姿勢反編譯一波，拿下圖片素材。如果不知道如何反編譯微信小程式，可自行查閱上一節：《我寫小程式像菜虛鯤——2、雞你太美》，反編譯後的檔案如下：

開啟images資料夾，可以看到小程式裡用到的一些圖示：

試下把反編譯後的專案匯入到微信開發者工具中，設定記得關下域名檢驗

2333，這已經不算是開卷考試了，而是拿著參考答案來做題了，行吧，開始幹活，實現下這個頁面~

① 設定標題與底部tab選項卡

把標題設定為摳腚優鮮，開啟app.json 進行如下配置：

"navigationBarTitleText": "摳腚優鮮",
複製程式碼

接著是底部tab選項卡，關於tabBar的詳細介紹可自行查閱官方文件：
developers.weixin.qq.com/miniprogram…
把反編譯後的專案裡的images目錄直接拷貝到專案中，開啟app.json，新增下述配置：

"tabBar": {
    "color": "#969696",
    "selectedColor": "#ff4891",
    "borderStyle": "white",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首頁",
        "iconPath": "images/tab-bar-home.png",
        "selectedIconPath": "images/tab-bar-home-active.png"
      },
      {
        "pagePath": "pages/index/index",
        "text": "賺錢",
        "iconPath": "images/tab-bar-group-sign.png",
        "selectedIconPath": "images/tab-bar-group-sign-active.png"
      },
      {
        "pagePath": "pages/index/index",
        "text": "分類",
        "iconPath": "images/tab-bar-category.png",
        "selectedIconPath": "images/tab-bar-category-active.png"
      },
      {
        "pagePath": "pages/index/index",
        "text": "購物車",
        "iconPath": "images/tab-bar-cart.png",
        "selectedIconPath": "images/tab-bar-cart-active.png"
      },
      {
        "pagePath": "pages/index/index",
        "text": "我的",
        "iconPath": "images/tab-bar-mine.png",
        "selectedIconPath": "images/tab-bar-mine-active.png"
      }
    ]
  },
複製程式碼

接著執行看下效果：

② 頁面區域劃分

寫介面之前先劃分一下區域，如圖，劃分成六個：

  • ① 頂部欄：定位部分 + 搜尋部分
  • ② Banner輪播圖
  • ③ 新人福利
  • ④ 資訊標籤
  • ⑤ 商品分類
  • ⑥ 懸浮提醒

劃分完，接著一個個來實現~

③ 頂部欄

頁面結構如下：

<!-- index.wxml -->
<view class="container">
  <!-- 頂部欄 -->
  <view class="top-wrapper">
    <!-- 定位部分 -->
    <view class="location_box">
      <image class="location_icon" src="{{yx.location_icon_url}}"></image>
      <image class="express_icon" src="{{yx.express_icon_url}}"></image>
    </view>
    <!-- 搜尋部分 -->
    <view class="search-wrapper">
      <image class="search_icon" src="{{yx.search_icon_url}}"></image>
      <text class="search_text">搜尋</text> 
    </view>
  </view>
</view>
複製程式碼

樣式調整順序如下：

  • 定點陣圖片寬高44rpx * 44rpx，快速圖片寬高120rpx * 30rpx；
  • 搜尋字型大小28rxp，字型顏色#969696；
  • 頂部欄寬度佔滿100%，高度88rpx，flex佈局，space-between兩端佔滿，垂直居中；
  • 定位部分左側偏移16rpx；
  • 搜尋部分，flex佈局，寬高534rpx * 60rpx，圓角12rpx，背景顏色#f5f5f5，
    Item水平居中，垂直居中；
  • 搜尋部分右側偏移16rpx；
  • 搜尋文字右側偏移16rpx；

對應樣式檔案如下：

.top-wrapper {
  display: flex;
  width: 100%;
  height: 88rpx;
  align-items: center;
  justify-content: space-between;
}

.location_box {
  margin-left: 16rpx;
}

.location_icon {
  width: 44rpx;
  height: 44rpx;
}

.express_icon {
  width: 120rpx;
  height: 30rpx;
}

.search-wrapper {
  display: flex;
  width: 534rpx;
  height: 60rpx;
  border-radius: 12rpx;
  background-color: #f5f5f5;
  align-items: center;
  justify-content: center;
  margin-right: 16rpx;
}

.search_icon {
  width: 26rpx;
  height: 26rpx;
  margin-right: 16rpx;
}

.search_text {
  font-size: 28rpx;
  color: #969696;
}
複製程式碼

執行結果如下：

④ Banner輪播圖

小程式提供了一個滑塊檢視容器swiper元件，利用它可以實現簡單的輪播圖。詳細官方文件：
developers.weixin.qq.com/miniprogram…

頁面結構如下：

  <!-- Banner -->
  <view class="banner-wrapper">
    <!-- 輪播圖部分 -->
    <swiper class="banner-swiper">
      <block wx:for="{{yx.banner_urls}}">
        <swiper-item>
          <image class="banner_image" src="{{item}}" mode="widthFix"></image>
        </swiper-item>
      </block>
    </swiper>
    <!-- 當前頁數 -->
    <view class="pagination">1/5</view>
  </view>
複製程式碼

樣式調整順序如下：

  • 最外層view寬度100%；
  • 輪播圖swiper元素高度280rpx;
  • 介面返回的輪播圖是750px*448px的, 不做處理直接顯示會顯示不全，可通過裁剪或設定偏移來解決這個問題，每日優鮮採用的 向上負偏移來解決，即向上偏移：280rpx-448rpx=-168rpx。
  • 頁數使用絕對定位，距離底部15rpx，右側20rpx，背景rgba(0, 0, 0, 0.3)，圓角24rpx，字型白色#FFFFFF，大小24rpx，內邊距8rpx 15rpx。

對應樣式檔案如下：

.banner-wrapper {
  width: 100%;
  position: relative;
}

.banner-swiper {
  height: 280rpx;
}

.banner-item {
  overflow: hidden;
  display: block
}

.banner_image {
  width: 100%;
  margin-top: -168rpx;
}

.pagination {
  position: absolute;
  bottom: 15rpx;
  right: 20rpx;
  background: rgba(0, 0, 0, 0.3);
  line-height: 1;
  padding: 8rpx 15rpx;
  border-radius: 24rpx;
  color: #fff;
  font-size: 24rpx;
}
複製程式碼

執行結果如下：

不過現在只能手動滑切換圖片，接著新增定時自動滑動和頁數變化，swiper提供下面三個屬性：

  • autoplay：是否自動切換。
  • interval：自動切換的時間間隔。
  • duration：滑動動畫時長。

新增上述屬性到程式碼中：

<swiper class="banner-swiper" autoplay="true" interval="5000" duration="5000">
複製程式碼

編譯後可以看到圖片已經能自動滾動了，接著繫結下頁面切換的事件，當頁面改變時切換右下角那個頁數的顯示，新增下述程式碼：

<!-- index.js -->
current: 1,

onPageChange: function(e) {
    this.setData({
      current: e.detail.current + 1
    })
},

<!-- index.wxml -->
<swiper ..bindchange="onPageChange">
<view class="pagination">{{current}}/5</view>
複製程式碼

執行結果如下：

⑤ 新人福利

頁面結構如下：

<!-- 新人福利 -->
<view class="welfare">
    <view class="welfare-container">
      <!-- 頂部圖片 -->
      <image class="welfare-top-image" src="{{yx.welfare_top_url}}"></image>
      <!-- 商品部分 -->
      <view class="welfare-goods-container">
        <block wx:for="{{yx.welfare_goods}}">
          <view class="goods-wrapper">
            <image class="goods-image" src="{{item.icon}}"></image>
            <image class="goods-price" src="{{item.price}}"></image>
          </view>
        </block>
      </view>
      <!-- 底部圖片 -->
      <image class="welfare-bottom-image" src="{{yx.welfare_bottom_url}}"></image>
    </view>
</view>
複製程式碼

先把商品部分的標籤註釋掉，樣式調整順序如下：

  • 最外層設定flex佈局，主軸從上往下，item居中，背景白色，上下內間距24rpx；
  • 外層設定flex佈局，主軸從上往下，item居中，寬690rpx，高434rpx，圓角12rpx，背景顏色#d4545a;
  • 頂部圖片100%，高度110rpx，左上和右上圓角12rpx;
  • 商品部分最外層設定flex佈局，主軸從上往下，item居中；
  • 商品部分外層寬度660rpx，高度212rpx，圓角12rpx，上下內間距12rpx，左右內間距20rpx；
  • 底部圖片寬660rpx，高96rpx，圓角12rpx；

對應樣式檔案如下：

.welfare {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  padding: 24rpx 0;
}

.welfare-container {
  display: flex;
  flex-direction:column;
  align-items:center;
  width: 690rpx;
  height: 434rpx;
  border-radius: 12rpx;
  background: #d4545a;
}

.welfare-top-image {
  width: 100%;
  height: 110rpx;
  border-radius: 12rpx 12rpx 0 0;
}

.welfare-goods {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.welfare-goods-container {
  width: 660rpx;
  height: 212rpx;
  box-sizing: border-box;
  border-radius: 12rpx;
  background: #fff;
  padding: 12rpx 20rpx;
}

.welfare-bottom-image{
  width: 660rpx;
  height: 96rpx;
  border-radius: 12rpx;
}
複製程式碼

執行結果如下：

接著去掉商品部分的標籤註釋，調整樣式：

  • 商品外層設定flex佈局，主軸從上往下，item居中，寬度134rpx，高度100%；
  • 商品圖片寬高130rpx；
  • 商品價格寬100%，高56rpx；
.goods-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 134rpx;
  height: 100%;
}

.goods-image {
  width: 130rpx;
  height: 130rpx;
}

.goods-price {
  width: 100%;
  height: 56rpx;
}
複製程式碼

em…商品直接穿出來了，修改下商品外層佈局flex佈局，從左網友，兩端佔滿：

.welfare-goods-container {
  width: 660rpx;
  height: 212rpx;
  box-sizing: border-box;
  border-radius: 12rpx;
  background: #fff;
  padding: 12rpx 20rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
複製程式碼

執行結果如下：

⑥ 資訊標籤

頁面結構如下：

<!-- 資訊標籤 -->
<view class="info-tag-container">
    <block wx:for="{{yx.tag_info_list}}">
      <view class="tag-wrapper">
        <image class="tag-image" src="{{item.icon}}"></image>
        <view class="tag-text">{{item.text}}</view>
      </view>
    </block>
</view>
複製程式碼

樣式調整順序如下：

  • 最外層高度48rpx，flex佈局，兩端對齊留白；
  • 外層flex佈局，內容居中；
  • 標籤圖片寬高24rpx，右側偏離8rpx；
  • 標籤字型顏色#ff4891，大小22rpx;

對應樣式檔案如下：

.info-tag-container {
  height: 48rpx;
  display: flex;
  justify-content: space-around;
}

.tag-wrapper {
  align-items: center;
  display: flex;
}

.tag-image {
  width: 24rpx;
  height: 24rpx;
  margin-right: 8rpx;
}

.tag-text {
  font-size: 22rpx;
  color: #ff4891;
}
複製程式碼

執行結果如下：

⑥ 商品分類

這裡的商品分類不止10個，滑動到右側還有3個，可以用官方提供的scroll-view元件來實現，詳細官方文件：
developers.weixin.qq.com/miniprogram…
scroll-view的用法也很簡單：scroll-x橫向滾動，scroll-y縱向滾動，說個小bug~

scroll-view本身的display:flex不生效，外層元素需要設定屬性white-space: nowrap，內層元素需要設定屬性display: inline-block，如果內層元素需要用到flex佈局，可以設定屬性display: inline-flex; 還有內層元素不可以用float浮動。

接著滑動部分的，一個簡單的套路是：寬度寫死 = 每個商品View的寬度 * 7，不過這種方法有點low。看了下每日優鮮的玩法，是把這裡拆分成了兩個部分，這裡照葫蘆畫瓢實現一波。

頁面結構如下：

<!-- 商品類別 -->
  <view class="good_category_container">
    <scroll-view scroll-x class="scroll-view">
      <view class="category_first">
        <block wx:for="{{yx.category_list_first}}" wx:key="key">
          <view class="good_category">
            <image class="category-image" src="{{item.icon}}"></image>
            <view class="category-text">{{item.text}}</view>
          </view>
        </block>
      </view>
      <view class="category_second">
        <block wx:for="{{yx.category_list_second}}" wx:key="key">
          <view class="good_category">
            <image class="category-image" src="{{item.icon}}"></image>
            <view class="category-text">{{item.text}}</view>
          </view>
        </block>
      </view>
    </scroll-view>
  </view>
複製程式碼

樣式調整順序如下：

  • 最外層寬度100%，設定white-space: nowrap;
  • scroll-view設定最大高度360rpx；
  • 左側部分，寬度100%，inline-flex，自動換行；
  • 右側部分，高度384rpx，inline-flex，主軸從上往下；
  • 分類外層，flex佈局，水平豎直居中，主軸從上往下，寬150rpx，頂部偏移24rpx；
  • 分類圖示，寬高104rpx；
  • 分類文字，高34rpx，行高34rpx讓文字垂直居中，字型顏色#474245，大小24rpx，頂部偏移10rpx；

對應樣式檔案如下：

.good_category_container {
  width: 100%;
  white-space: nowrap;
}

.scroll-view {
  max-height: 360rpx;
}

.category_first {
  width: 100%;
  display: inline-flex;
  flex-wrap: wrap;
}

.category_second {
  height: 384rpx;
  display: inline-flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.good_category {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 150rpx;
  margin-top: 24rpx;
}

.category-image {
  width: 104rpx;
  height: 104rpx;
}

.category-text {
  font-size: 24rpx;
  color: #474245;
  height: 34rpx;
  line-height: 34rpx;
  margin-top: 10rpx;
}
複製程式碼

執行結果如下：

⑦ 懸浮提醒

這種懸浮在頁面上，不會因為頁面滾動而滾動的部分，可以使用固定定位來實現。

頁面結構如下：

  <!-- 浮動提醒 -->
  <view class="tip-container">
    <image class="tip-image" src="{{yx.tip_image_url}}"></image>
  </view>
複製程式碼

樣式調整順序如下：

  • 外層容器設定絕對定位，寬98rpx，高130rpx，離右邊28rpx，離底部40rpx；
  • 圖片設定寬高100%；

對應樣式檔案如下：

.tip-container {
  position: fixed;
  right: 28rpx;
  bottom: 40rpx;
  width: 98rpx;
  height: 130rpx;
}

.tip-image{
  width: 100%;
  height: 100%;
}
複製程式碼

執行結果如下：

⑧ 最終效果展示

Tips：真機預覽時發現分類那裡滑動時有滾動條，可以在wxss加入下述樣式隱藏滾動條~

::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}
複製程式碼

相關文章