微信小程序電商實戰-首頁（上）

嗨，你們好！通過近兩週的精心準備終於開始微信小程序電商實戰之路嘍。那麼最終會作成什麼樣呢？固然能夠確定不會只作一個靜態demo哦，先把咱們小程序電商實戰的總體架構發出來曬一下，請看下圖：

 

架構圖.png

好了，不囉嗦了 咱們先看首頁長什麼樣吧！

 

首頁效果圖.gif

爲了可以更好的表達出來，首頁準備分紅兩次寫完。
第一部分先實現以下的功能

 

Hi.World-home_top.gif

劃分模塊

你們都知道電商平臺通常分爲首頁、商品分類、購物車和我的中心4個核心模塊，那麼咱們先在app.json的page裏添加以下代碼

"pages":[ "pages/home/home", "pages/classify/classify", "pages/cart/cart", "pages/personal/personal" ] 

1、設置頭部

"window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "Hi.World", "navigationBarTextStyle":"black" } 

背景顏色爲白色，名稱是Hi.World

2、首頁搜索

上面素材看到的搜索部分顏值並不高，是由於錄屏工具的問題，實際效果看下圖。

 

搜索.png

搜索用到了template 模板技術，建立wxSearch 模板目錄，添加wxSearch.js、wxSearch.json、wxSearch.wxml、wxSearch.wxss
此處省略模板代碼，能夠直接到Git上如今源碼：地址https://github.com/yundianzixun/wxSearch-master
將下載的模板包放到和pages 同級目錄，以下圖所示：

 

項目目錄.png

接下來咱們把搜索模板放到首頁，會用到 home.wxml和home.wxss

home.wxml

<!--導入wxSearch.wxml--> <import src="/wxSearch/wxSearch.wxml"/> <!--search start--> <view class="wxSearch-section"> <view class="wxSearch-pancel"> <input bindinput="wxSearchInput" bindfocus="wxSerchFocus" value="{{wxSearchData.value}}" bindblur="wxSearchBlur" class="wxSearch-input" placeholder='面膜'/> <view class="placeholder"> <icon class="weui-icon-search_in-box" type="search" size="14"></icon> </view> <view class='wxSearch-button'> <text>商品分類</text> </view> </view> </view> <!--引入模板，注意 is="wxSearch" 和模板template name名稱相對應--> <template is="wxSearch" data="{{wxSearchData}}"/> 

home.wxss

<!--引入搜索模板樣式--> @import "/wxSearch/wxSearch.wxss"; 

好啦，保存運行一下看看效果吧！

3、製做導航欄

先看咱們要實現的效果圖

 

導航欄.png

這個導航欄不是小程序底部導航欄，因此要寫在頁面裏，在你須要導航欄的地方加入以下代碼就能夠實現，這裏以首頁爲例：

home.wxss

/*設置頁面總體佈局*/ page{ display: flex; flex-direction: column; height: 100%; } .navbar{ flex: none; display: flex; background: #fff; } .navbar .item{ position: relative; flex: auto; text-align: center; line-height: 80rpx; font-size:14px; } /* 頂部導航字體顏色 */ .navbar .item.active{ color: #e1007e; } /* 頂部指示條屬性 */ .navbar .item.active:after{ content: ""; display: block; position: absolute; bottom: 0; left: 0; right: 0; height: 5rpx; background: #e1007e; width: 70%; margin: 0px auto; } 

home.wxml

<!--導航欄--> <view class="navbar"> <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap">{{item}}</text> </view> 

在home.wxml咱們使用bindtap進行點擊事件監聽，設置事件名稱爲「navbarTap」而且在home.js裏設置這個事件對應的邏輯處理。咱們在組件上使用wx:for控制屬性綁定一個數組，便可使用數組中各項的數據重複渲染該組件。默認數組的當前項的下標變量名默認爲index，數組當前項的變量名默認爲item，想要了解wx:for能夠參考該資料：https://www.w3cschool.cn/weixinapp/weixinapp-list.html（強烈建議若是還不會用wx:for必定要看看，由於在作數據循環渲染的時候常常要用）

home.js

<!--導航欄-->  
// pages/home/home.js var app = getApp() Page({ data: { navbar: ['今日推薦', '時尚', '國際', '美妝', '母嬰', '居家'], currentTab: 0, }, // 導航切換監聽 navbarTap: function (e) { console.debug(e); this.setData({ currentTab: e.currentTarget.dataset.idx }) }, }) 

備註：navbar 放置的是導航欄數據集合，currentTab：0 是位置座標 第一次頁面加載默認爲0（第一個位置），currentTab: e.currentTarget.dataset.idx是把當前用戶點擊的Tab座標傳給currentTab。

4、首頁輪播Banner

先看效果圖

 

輪播Banner.gif

依然在home 模塊，須要改動的頁面有home.js、home.wxml、home.wxss

home.wxml

<!-- banner start--> <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{imgUrls}}"> <swiper-item> <image src="{{item}}" /> </swiper-item> </block> </swiper> <!-- banner end--> 

swiper 是微信提供的滑塊視圖容器，直接能夠拿來用，記住 <swiper> 裏面必定要包含 <swiper-item>，自定義的 view 是無效的，控件的經常使用屬性，

• indicator-dots 是否顯示面板指示點
• autoplay 是否自動切換
• interval 自動切換時間間隔
• duration 滑動動畫時長
  想要了解多請查看微信官方swiper視圖容器
  關於wx:for 上面已經介紹過了，不囉嗦了~~~

home.wxss

/* 設置swiper屬性 */ swiper { height: 300rpx; padding: 2px 10px; } /*設置圖片屬性*/ swiper-item image { width: 100%; height: 100%; } 

home.js

indicatorDots: true, //設置是否顯示面板指示點 autoplay: true, //設置是否自動切換 interval: 3000, //設置自動切換時間間隔,3s duration: 1000, // 設置滑動動畫時長1s imgUrls: [ 'https://a4.vimage1.com/upload/flow/2017/10/20/117/15084947982974.jpg', 'https://a2.vimage1.com/upload/flow/2017/11/07/73/15100619325212.jpg', 'https://b.vimage1.com/upload/mst/2017/11/04/139/23b96f0e89abed2d9415e848fc3715ff_604x290_80.jpg' ] 

具體swiper 屬性設置看註釋~~~

總結

咱們的微信小程序電商實戰-首頁（上） 的內容已經講完了，咱們回顧一下 一共實現了3個功能，分別是：首頁搜索、導航欄和輪播。若是有什麼問題能夠隨時在下方留言哦，若是對你們有幫組請幫忙分享轉發一下吧 ~~~

下期預告

下期會來完成小程序電商實戰-首頁的實時熱銷榜、福利專場和我的中心+購物車的浮動佈局，上效果圖：

 

下期預告.gif

做者：IT實戰聯盟Lin 連接：https://www.jianshu.com/p/f490c62643d3 來源：簡書 簡書著做權歸做者全部，任何形式的轉載都請聯繫做者得到受權並註明出處。