我寫小程序像菜虛鯤——三、附: 實戰部份內容
由於文章太長，因此把實戰部分拆分到本節中~css
0x0、佈局實戰：寫個摳腚優鮮的首頁
看那麼多，總得練下手，隨手找個小程序參(chao)考(xi)下吧，這裏選擇的是每日優鮮，利用上一節學到的姿式反編譯一波，拿下圖片素材。若是不知道如何反編譯微信小程序，可自行查閱上一節：《我寫小程序像菜虛鯤——二、雞你太美》，反編譯後的文件以下：html
打開images文件夾，能夠看到小程序裏用到的一些圖標：web
試下把反編譯後的項目導入到微信開發者工具中，設置記得關下域名檢驗express
2333，這已經不算是開卷考試了，而是拿着參考答案來作題了，行吧，開始幹活，實現下這個頁面~json
① 設置標題與底部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"
}
]
},
複製代碼
接着運行看下效果：bash
② 頁面區域劃分
寫界面以前先劃分一下區域，如圖，劃分紅六個：微信
- ① 頂部欄：定位部分 + 搜索部分
- ② 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;
}
複製代碼
相關文章
- 1. 我寫小程序像菜虛鯤——三、你能17張牌把我秒殺，我當場把電腦屏幕吃掉
- 2. 如何看待「菜虛鯤」
- 3. 實戰mpvue寫小程序
- 4. python部份內容存檔
- 5. 三級菜單小程序
- 6. 實驗三：內部模塊化的命令行菜單小程序V2.0
- 7. 小程序雲開發實戰三：編寫雲函數代碼
- 8. java String 部份內容
- 9. Web Service 部份內容簡述（2）
- 10. 寫個小小的三子棋程序！
- 更多相關文章...
- • Eclipse 內容輔助 - Eclipse 教程
- • XSD 混合內容 - XML Schema 教程
- • Docker容器實戰(七) - 容器眼光下的文件系統
- • Docker容器實戰(六) - 容器的隔離與限制
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 我寫小程序像菜虛鯤——三、你能17張牌把我秒殺，我當場把電腦屏幕吃掉
- 2. 如何看待「菜虛鯤」
- 3. 實戰mpvue寫小程序
- 4. python部份內容存檔
- 5. 三級菜單小程序
- 6. 實驗三：內部模塊化的命令行菜單小程序V2.0
- 7. 小程序雲開發實戰三：編寫雲函數代碼
- 8. java String 部份內容
- 9. Web Service 部份內容簡述（2）
- 10. 寫個小小的三子棋程序！