1.項目技術選型
小程序的第三方開發框架，例如
- 騰訊的wepy ：語法類似vue
- 美團mpvue：語法類似vue
- 京東taro：語法類似react
- 滴滴chameleon：語法類似vue
- uniapp：語法類似vue
- 原生框架：MINA
考慮到原生的版本迭代較快，我們先用原生框架
2.黑馬優購小程序搭建步驟
- 新建小程序項目
- 搭建目錄結構
（1）styles 存放公告樣式
（2）components 存放組件
（3）lib 存放第三方庫
（4）utils 自己的幫助庫
（5）request 自己的接口幫助庫
至此配置如下：
- 搭建項目的頁面
- 引入字體圖標
引入阿里圖標庫 ，在styles中創建iconfont.wxss文件，放入下面鏈接內容
//at.alicdn.com/t/font_2180986_xu7t62w171i.css
引入后，在app.wxss中引入，這樣這個css就可以全局使用
/**app.wxss**/
@import "./styles/iconfont.wxss";
- 搭建項目tabbar結構
2.1 搭建項目的tabbar結構
項目tabbar結構就是優購下面的首頁、分類、購物車、我的這些圖標在app.json文件中，和windows同層級
"tabBar": {
"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"
}
]
},
定義導航條顏色為紅色，app.json中進行
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#eb4450",
"navigationBarTitleText": "黑馬優購",
"navigationBarTextStyle":"black"
},
下面實現以下功能
第一個自定義組件，類似於搜索框，很多頁面都用，所以我們將它自定義組件，而且點擊它會自動變換，實際上是一個導航鏈接。
自定義組件文件夾中
<!--components/SearchInput/SearchInput.wxml-->
<view class="SearchInput">
<view class="back">
<!-- open-type="navigate"表示跳轉的是非tabbar頁面 -->
<navigator url="/pages/search/index" open-type="navigate">搜索</navigator>
</view>
</view>
/* components/SearchInput/SearchInput.wxss */
.back{
background-color: white;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10rpx;
}
.SearchInput{
height:90rpx;
padding: 15rpx;
background-color:var(--themeColor);
/* border: 1rpx solid black; */
display: flex;
justify-content: center;
align-items: center;
}
index文件夾中：
<!--index.wxml-->
<view class="pyg_index">
<!-- 搜索框 開始 -->
<SearchInput>開始</SearchInput>
<!-- 搜索框 結束 -->
</view>
{
"usingComponents": {
"SearchInput":"../../components/SearchInput/SearchInput"
},
"navigationBarTitleText": "優購首頁"
}
2.2.獲取輪播圖數據
獲取輪播圖數據分為：
- 1獲取輪播圖的接口數據
- 2是接口數據與輪播圖標簽結合
<!--index.wxml-->
<view class="pyg_index">
<!-- 搜索框 開始 -->
<SearchInput>開始</SearchInput>
<!-- 搜索框 結束 -->
<!-- 輪播圖開始 -->
<view class="index_swiper">
<!-- 1.swiper標簽默認寬度高度是100%*150px
2.image標簽頁存在默認寬度和高度 320px*240px
3.我們需要設計下輪播圖的寬高 原圖是 750*340
我們需要設置圖片的高度自適應，而寬度等於100%
我們需要設置swiper標簽高度和圖片的高度一樣
圖片標簽z自帶mode屬性，渲染模式
widthfix：讓圖片的標簽寬高與內容（也就是真正圖片）寬高等比例發生變化
-->
<swiper autoplay="true" indicator-dots circular>
<swiper-item wx:for="{{swiperList}}" wx:key="goods_id">
<navigation-bar>
<image src="{{item.image_src}}"mode="widthfix"></image>
</navigation-bar>
</swiper-item>
</swiper>
</view>
<!-- 輪播圖結束 -->
</view>
//index.js
// 0 引入用來發送請求的方法
import {request} from "../../request/index.js";
//獲取應用實例
Page({
/**
* 頁面的初始數據
*/
data: {
// 輪播圖數組
swiperList:[]
},
/**
* 生命周期函數--監聽頁面加載
*/
onLoad: function (options) {
// // 1.發送數據獲取請求
// wx.request({
// url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
// success: (result) => {
// this.setData({
// swiperList:result.data.message
// })
// },
// })
request({url:"https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata"})
.then(result=>{
this.setData({
swiperList:result.data.message
})
})
},
2.3.獲取導航模塊數據
獲取輪播圖數據分為：
- 1獲取導航的接口數據
- 2是接口數據與導航圖標簽結合（也就是渲染）
//index.js
// 0 引入用來發送請求的方法
import {request} from "../../request/index.js";
//獲取應用實例
Page({
/**
* 頁面的初始數據
*/
data: {
// 輪播圖數組
swiperList:[],
//導航數組
cateList:[]
},
/**
* 生命周期函數--監聽頁面加載
*/
onLoad: function (options) {
// // 1.發送數據獲取請求
// wx.request({
// url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
// success: (result) => {
// this.setData({
// swiperList:result.data.message
// })
// },
// })
// request({url:"https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata"})
// .then(result=>{
// this.setData({
// swiperList:result.data.message
// })
// })
this.getSwiperList();
this.getCateList();
},
// 獲取輪播圖數據
getSwiperList(){
request({url:"https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata"})
.then(result=>{
this.setData({
swiperList:result.data.message
})
})
},
//獲取導航數據
getCateList(){
request({url:"https://api-hmugo-web.itheima.net/api/public/v1/home/catitems"})
.then(result=>{
this.setData({
cateList:result.data.message
})
})
},
<!-- 導航開始 -->
<view class="index_cate">
<navigator wx:for="{{cateList}}"
wx:key="name">
<image mode="widthFix" src="{{item.image_src}}"></image>
</navigator>
</view>
<!-- 導航結束 -->
.index_cate{
display: flex;
border: solid 1rpx black;
}
.index_cate navigator image{
width: 185rpx;
padding: 20rpx;
}
/**index.wxss**/
.index_swiper{
swiper{
width: 750rpx;
height: 340rpx;
image{
width: 100%;
// 高height不用管 因為image的mode設置為widthFix
}
}
}
.index_cate{
display: flex;
navigator{
padding: 20rpx;
flex:1;/*讓所有彈性盒模型對象的子元素都有相同的長度，忽略它們內部的內容*/
image{
width: 100%;
}
}
}
.index_floor{
.floor_group{
.floor_title{
padding: 10rpx;
image{
border:1rpx solid black;
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 white;
}
&:nth-child(2),&:nth-child(3){
border-bottom: 10rpx solid white;
}
image{
width: 100%;
height: 100%;
}
}
}
}
}
<!--index.wxml-->
<view class="pyg_index">
<!-- 搜索框 開始 -->
<SearchInput>開始</SearchInput>
<!-- 搜索框 結束 -->
<!-- 輪播圖開始 -->
<!-- 1.swiper標簽默認寬度高度是100%*150px
2.image標簽頁存在默認寬度和高度 320px*240px
3.我們需要設計下輪播圖的寬高 原圖是 750*340
我們需要設置圖片的高度自適應widthFix，而寬度等於100%
我們需要設置swiper標簽高度和圖片的高度一樣
圖片標簽z自帶mode屬性，渲染模式
widthfix：讓圖片的標簽寬高與內容（也就是真正圖片）寬高等比例發生變化
-->
<view class="index_swiper">
<swiper autoplay="true" indicator-dots circular>
<swiper-item wx:for="{{swiperList}}" wx:key="goods_id">
<navigation-bar>
<image src="{{item.image_src}}"mode="widthFix"></image>
</navigation-bar>
</swiper-item>
</swiper>
</view>
<!-- 輪播圖結束 -->
<!-- 導航開始 -->
<view class="index_cate">
<navigator wx:for="{{cateList}}" wx:key="name">
<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_titile">
<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">
<image mode="{{index2===0?'widthFix':'scaleToFill'}}" src="{{item2.image_src}}"></image>
</navigator>
</view>
</view>
</view>
<!-- 樓層結束 -->
</view>