微信小程序商城項目：
頁面顯示：
部分代碼顯示：
//app.js
App({
//onLaunch,onShow: options(path,query,scene,shareTicket,referrerInfo(appId,extraData))
onLaunch: function(options){
},
onShow: function(options){
},
onHide: function(){
},
onError: function(msg){
},
//options(path,query,isEntryPage)
onPageNotFound: function(options){
},
});
{
"pages": [
"pages/index/index",
"pages/category/index",
"pages/goods_list/index",
"pages/goods_detail/index",
"pages/cart/index",
"pages/collect/index",
"pages/order/index",
"pages/search/index",
"pages/user/index",
"pages/feedback/index",
"pages/login/index",
"pages/auth/index",
"pages/pay/index"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#EB4450",
"navigationBarTitleText": "商城項目",
"navigationBarTextStyle": "white"
},
"tabBar": {
"color": "#999",
"selectedColor": "#ff2d4a",
"backgroundColor": "#fafafa",
"position": "bottom",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/index/index",
"text": "首頁",
"iconPath": "icons/home.png",
"selectedIconPath": "icons/home-o.png"
},
{
"pagePath": "pages/category/index",
"text": "分類",
"iconPath": "icons/category.png",
"selectedIconPath": "icons/category-o.png"
}
,
{
"pagePath": "pages/cart/index",
"text": "購物車",
"iconPath": "icons/cart.png",
"selectedIconPath": "icons/cart-o.png"
}
,
{
"pagePath": "pages/user/index",
"text": "我的",
"iconPath": "icons/my.png",
"selectedIconPath": "icons/my-o.png"
}
]
},
"sitemapLocation": "sitemap.json"
}
@import "./styles/iconfont.wxss";
/* 在微信小程序中 不支持 通配符 '*' */
page,view,text,swiper,swiper-item,image,navigator{
padding: 0;
margin: 0;
box-sizing: border-box;
}
/*
主題顏色 通過變量來實現
1 less 中 存在 變量這個知識
2 原生的css和wxss也是支持 變量
*/
page{
/* 定義主題顏色 */
--themeColor:#EB4450;
/*
定義統一字體大小 假設設計稿 大小是 375px
1px= 2rpx
14px = 28rpx
*/
font-size: 28rpx;
}
image{
width: 100%;
}
index頁面：
// 0 引入 用來發送請求的 方法 一定要把路徑補全
import { request } from "../../request/index.js";
Page({
data: {
// 輪播圖數組
swiperList: [],
// 導航 數組
catesList:[],
// 樓層數據
floorList:[]
},
// 頁面開始加載 就會觸發
onLoad: function (options) {
// 1 發送異步請求獲取輪播圖數據 優化的手段可以通過es6的 promise來解決這個問題
// wx.request({
// url: 'https://api.zbztb.cn/api/public/v1/home/swiperdata',
// success: (result) => {
// this.setData({
// swiperList: result.data.message
// })
// }
// });
this.getSwiperList();
this.getCateList();
this.getFloorList();
},
// 獲取輪播圖數據
getSwiperList(){
request({ url: "/home/swiperdata" })
.then(result => {
this.setData({
swiperList: result
})
})
},
// 獲取 分類導航數據
getCateList(){
request({ url: "/home/catitems" })
.then(result => {
this.setData({
catesList: result
})
})
},
// 獲取 樓層數據
getFloorList(){
request({ url: "/home/floordata" })
.then(result => {
this.setData({
floorList: result
})
})
},
})
index.json：
{
"usingComponents": {
"SearchInput": "../../components/SearchInput/SearchInput"
},
"navigationBarTitleText": "項目首頁"
}
index.wxml：
<view class="pyg_index">
<!-- 搜索框 開始 -->
<SearchInput></SearchInput>
<!-- 搜索框 結束 -->
<!-- 輪播圖 開始 -->
<view class="index_swiper">
<!--
1 swiper標籤存在默認的寬度和高度
100% * 150px
2 image標籤也存在默認的寬度和高度
320px * 240px
3 設計圖片和輪播圖
1 先看一下原圖的寬高 750 * 340
2 讓圖片的高度自適應 寬度 等於100%
3 讓swiper標籤的高度 變成和圖片的高一樣即可
4 圖片標籤
mode屬性 渲染模式
widthFix 讓圖片的標籤寬高 和 圖片標籤的內容的寬高都等比例的發生變化
-->
<swiper autoplay indicator-dots circular>
<swiper-item
wx:for="{{swiperList}}"
wx:key="goods_id"
>
<navigator url="{{item.navigator_url}}">
<image mode="widthFix" src="{{item.image_src}}"></image>
</navigator>
</swiper-item>
</swiper>
</view>
<!-- 輪播圖 結束 -->
<!-- 導航 開始 -->
<view class="index_cate">
<navigator
wx:for="{{catesList}}"
wx:key="name"
url="/pages/category/index"
open-type="switchTab"
>
<image mode="widthFix" src="{{item.image_src}}" ></image>
</navigator>
</view>
<!-- 導航 結束 -->
<!-- 樓層 開始 -->
<view class="index_floor">
<view class="floor_group"
wx:for="{{floorList}}"
wx:for-item="item1"
wx:for-index="index1"
wx:key="floor_title"
>
<!-- 標題 -->
<view class="floor_title">
<image mode="widthFix" src="{{item1.floor_title.image_src}}"></image>
</view>
<!-- 內容 -->
<view class="floor_list">
<navigator
wx:for="{{item1.product_list}}"
wx:for-item="item2"
wx:for-index="index2"
wx:key="name"
url="{{item2.navigator_url}}"
>
<image mode="{{index2===0?'widthFix':'scaleToFill'}}" src="{{item2.image_src}}"></image>
</navigator>
</view>
</view>
</view>
<!-- 樓層 結束 -->
</view>
index.less：
.index_swiper{
swiper{
width: 750rpx;
height: 340rpx;
image{
width: 100%;
}
}
}
.index_cate{
display: flex;
navigator{
padding: 20rpx;
flex: 1;
image{
width: 100%;
}
}
}
.index_floor{
.floor_group{
.floor_title{
padding: 10rpx 0;
image{
width: 100%;
}
}
.floor_list{
// 清除浮動
overflow: hidden;
navigator{
float: left;
width: 33.33%;
/* 後四個超鏈接 */
&:nth-last-child(-n+4){
/* 原圖的寬高 232 *386 */
// 232 / 386 = 33.33vw / height
// 第一張圖片的高度 height:33.33vw * 386 / 232
height:33.33vw * 386 / 232 /2 ;
border-left: 10rpx solid #fff;
}
/* 2 3 兩個超鏈接 */
&:nth-child(2),
&:nth-child(3){
border-bottom: 10rpx solid #fff;
}
image{
width: 100%;
height: 100%;
}
}
}
}
}
index.wxss：
.index_swiper swiper {
width: 750rpx;
height: 340rpx;
}
.index_swiper swiper image {
width: 100%;
}
.index_cate {
display: flex;
}
.index_cate navigator {
padding: 20rpx;
flex: 1;
}
.index_cate navigator image {
width: 100%;
}
.index_floor .floor_group .floor_title {
padding: 10rpx 0;
}
.index_floor .floor_group .floor_title image {
width: 100%;
}
.index_floor .floor_group .floor_list {
overflow: hidden;
}
.index_floor .floor_group .floor_list navigator {
float: left;
width: 33.33%;
/* 後四個超鏈接 */
/* 2 3 兩個超鏈接 */
}
.index_floor .floor_group .floor_list navigator:nth-last-child(-n+4) {
/* 原圖的寬高 232 *386 */
height: 27.72711207vw;
border-left: 10rpx solid #fff;
}
.index_floor .floor_group .floor_list navigator:nth-child(2),
.index_floor .floor_group .floor_list navigator:nth-child(3) {
border-bottom: 10rpx solid #fff;
}
.index_floor .floor_group .floor_list navigator image {
width: 100%;
height: 100%;
}
2020年的寒假過的很特別，記錄一下，還剩300天，接下來好好準備考研。。。