微信小程式實戰_商城1
最近公司比較閒我給大家帶來一個微信小程式的商城實戰項
功能：再這個專案中主要有五大模組：首頁 店鋪 搜尋 動態 我的 等五大模組（主要參考拼多多商城小程式）
這裡是拼多多商城首頁
接下來是我的商城的首頁實現
商城的具體功能就不再陳述 大部分商城都前篇一律 主要功能都是實現線上購物！
今天主要搭建專案架構以及首頁頁面！
首先我們再本地建立一個專案資料夾 我這裡取名就叫shangcheng
接著我們開啟微信web開發者工具
微信web開發者工具的下載和安裝這裡就不再陳述
接下來我們開啟開發者工具
然後點選專案>新建專案
ps:如果你是第一次使用登陸過後會直接進入這個小程式專案管理介面
然後我們就可以看到小程式專案管理介面，
專案目錄：選中我們之前在本地新建的shangcheng資料夾作為我們的專案目錄
AppID：如果你有小程式的AppID，可以直接填寫，如果沒有可以勾選紅線處的小程式，後期也可以再次填寫我們的AppID
專案名稱：新增我們的專案名稱
然後選中建立普通快速啟動模板即可 點選確定進入專案
好了這裡可以看到工具為我們快速搭建起了一個專案
那我們就開始編寫吧！Go!
首先我們先來看一下專案結構這個是開發者工具為我們搭建的一套模板
這裡是微信小程式的專案結構目錄 我這裡不做主要講解具體請參考 點選開啟連結
然後我們先開啟app.json 檔案
pages是我們的頁面集合 裡面填寫我們頁面的在專案中位置
首先我們先在pages 將我們需要的五個底部模組註冊進入
"pages":[
"pages/index/index",
"pages/store/store",
"pages/search/search",
"pages/dynamic/dynamic",
"pages/my/my"
],然後我們點選ctrl+s儲存 開發者工具會為我們自動編譯
ps: 如果您的工具沒有自動編譯請點選
這是我們就會發現專案目錄結果裡面增加了，我們註冊的五個介面的問價夾
現在我們開啟其中資料夾會發現在所有生成的資料夾中都有xxx.js , xxx.wxml , xxx.wcss , 以及 xxx.json
ps:如果您的工具沒有問您建立您也可以自己動在最開始的專案資料夾中根據pages[]裡面填寫的位置手動建立，
或者點選工具中間的“+”加號進行建立
接下來我們為我們的專案常見底部導航欄
首先我們在本地開啟專案檔案（就是我們第一步在本地建立的那個資料夾）
在裡面根資料夾裡建立static/icon/tabbar這樣一個目錄結構當然也可以在工具裡建立（這個目錄用於給我們存放底部導航的圖示）
建立完成後就將我們的準備好的圖示放入tabber資料夾裡面 我的圖示是在阿里巴巴向量圖示庫裡面下載的 附上鍊接 點選開啟連結 在這裡我們需要兩套圖示 一套為未選中狀態，一套為選中狀態 ，您可以根據自己的喜好在圖示庫裡下載
一切做好之後可以在我們的開發者工具裡面看到我們放入的圖片
接下來繼續修改app.json
附上app.json檔案
{
"pages":[
"pages/index/index",
"pages/store/store",
"pages/search/search",
"pages/dynamic/dynamic",
"pages/my/my"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
},
"tabBar": {
"backgroundColor": "#fafafa",
"borderStyle": "white",
"list": [
{
"iconPath": "static/icon/tabbar/index.png",
"selectedIconPath": "static/icon/tabbar/index_select.png",
"pagePath": "pages/index/index",
"text": "首頁"
},
{
"iconPath": "static/icon/tabbar/store.png",
"selectedIconPath": "static/icon/tabbar/store_select.png",
"pagePath": "pages/store/store",
"text": "店鋪"
},
{
"iconPath": "static/icon/tabbar/search.png",
"selectedIconPath": "static/icon/tabbar/search_select.png",
"pagePath": "pages/search/search",
"text": "搜尋"
},
{
"iconPath": "static/icon/tabbar/dynamic.png",
"selectedIconPath": "static/icon/tabbar/dynamic_select.png",
"pagePath": "pages/dynamic/dynamic",
"text": "動態"
},
{
"iconPath": "static/icon/tabbar/my.png",
"selectedIconPath": "static/icon/tabbar/my_select.png",
"pagePath": "pages/my/my",
"text": "我的"
}
]
}
}我們在app.json 裡面加入了tabBar陣列
tabBar裡面主要的屬性有
iconPath:未選中之前的圖示
selectedIconPath:選中之後的圖示
pagePath:頁面的地址（和我們在pages裡面註冊的一樣）
text:導航名稱
來我們看一下效果 切換導航看一下效果
接下來我們來編寫首頁程式碼 先填入靜態資料
首先編寫頂部輪播圖 我們現在static資料夾下建立image/index用來存放我們需要的靜態圖片
ps：由於微信小程式大小限制為2M所以我們以後的圖片還是要放到後臺這裡只是為了調取方便編寫前端介面方便而用，之後我們會將其刪掉，下一篇將做首頁的前後互動，我們會把資料和圖片都放入後臺
然後我們編寫程式碼
index.wxml頁面程式碼：
<!--index.wxml-->
<view class="">
<view class="space-banner" >
<swiper
autoplay="{{true}}" interval="{{2000}}" duration="{{1000}}">
<swiper-item>
<image src="../../static/image/index/1.png" mode="aspectFill" class="slide-image"/>
</swiper-item>
<swiper-item>
<image src="../../static/image/index/2.png" mode="aspectFill" class="slide-image"/>
</swiper-item>
<swiper-item>
<image src="../../static/image/index/3.png" mode="aspectFill" class="slide-image"/>
</swiper-item>
</swiper>
</view>
</view>index.wcss頁面程式碼
.space-banner{
position: relative;
}
.space-banner swiper{
width: 100%;
height: 320rpx;
}
.space-banner .slide-image{
width: 100%;
height: 320rpx;
}輪播圖效果
這裡我們使用了swiper元件 裡面的具體引數請看微信api 元件 點選開啟連結
index.wcss就是對輪播圖的樣式程式碼
頁面最終效果圖
下面兩個地方都是使用了scroll-view滑塊檢視容器
接下來對於控制元件的展示和實現和樣式就不一 一 講解
由於這個專案的圖片都是存在專案以及展示都是寫的裡面沒有後臺以及展示的資料都是再介面寫死的(主要看看展示效果)對於首頁方可直接執行
對於已經填入AppId的朋友可以
點選預覽然後用您登陸微信web開發工具的微訊號掃一掃進行手機預覽
下一篇給大家 搭建springboot+mysql 的後端專案來對我們的首頁進行互動