1. 搜索框组件
1.1 创建文件夹及组件
创建搜索框组件
1.2 在首页中使用组件
- 在首页
index的index.json文件的usingComponents属性中添加需要使用的组件名称和组件路径。
"usingComponents": {
"SearchInput": "../../components/SearchInput/SearchInput"
}
- 在
index.wxml中使用
<view>
<SearchInput></SearchInput>
</view>
1.3 定义搜索组件
- 定义组件 :
<view class="search_input">
<navigator url="/pages/search/index" open-type="navigate">
搜索
</navigator>
</view>
- 使用
less的方式定义组件样式 :
.search_input {
height: 90rpx;
background-color: var(--themeColor);
padding: 10rpx;
navigator {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
border-radius: 15rpx;
color: #ccc;
}
}
2. 首页轮播图
2.1 获取轮播图的接口数据
接口文档：轮播图接口地址。
在
index.js的data区域定义一个变量用于接收获取到的轮播图数据:
data: {
// 轮播图列表
swiperDataList: []
},
微信小程序发送一个请求 : 参考文档。
在
onLoad生命周期函数中发送请求 :
/**
* 页面开始加载的时候触发
* @param {*} options
*/
onLoad: function(options) {
var reqTask = wx.request({
url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
data: {},
header: { 'content-type': 'application/json' },
method: 'GET',
dataType: 'json',
responseType: 'text',
success: (result) => {
this.setData({
swiperDataList: result.data.message
})
},
fail: () => {},
complete: () => {}
});
}
- 出现以下问题：有两种解决方案，如果项目后期需要上线请选择第二种方式
域名为添加到自己的白名单中
解决以上问题的方式
配置完成域名之后需要在小程序项目配置界面进行刷新
- 此时再小程序调试器中的
AppData中就可以查看接收变量中已经接收到值了:
调试器中的AppData中查看
2.2 动态渲染轮播图数据
- 动态渲染首页轮播图
wxml：
<view class="index_swiper">
<swiper>
<swiper-item
wx:for="{{swiperDataList}}"
wx:key="goods_id">
<navigator>
<image src="{{item.image_src}}" mode="widthFix" />
</navigator>
</swiper-item>
</swiper>
</view>
- 样式文件
less
.index_swiper {
swiper {
width: 750rpx;
height: 340rpx;
image {
/* 设置宽度为 100% 高度自适应 */
width: 100%;
}
}
}
swiper标签存在默认的宽度和高度100% *150pximage标签也存在默认的高度和宽度320px *240px- 设计图片和轮播图
3.1 首先看一下轮播图的宽高750 * 340
3.2 让图片的高度自适应宽度等于100%
3.3 让swiper标签高度变成和图片一样高即可- 图片标签属性
4.1mode渲染模式widthFix让图片标签的宽高 和 图片的内容等比例缩放
- 微信小程序中
rpx单位计算:参考
2.3 将原生的请求修改为 promise 方式
- 在
request文件夹下创建一个index.js文件，编写如下内容:
/**
* export 导出
* @param {*} params
*/
export const request = (params) => {
return new Promise((resolve, reject) => {
var reqTask = wx.request({
// 解构出参数
...params,
success: (result) => {
resolve(result);
},
fail: (err) => {
reject(err);
}
});
})
}
- 在
index首页的index.js文件中导入，请求的对象，并使用：
// 0. 引入用来发送请求的方法
import { request } from "../../request/index.js";
//options(Object)
/**
* 页面开始加载的时候触发
* @param {*} options
*/
onLoad: function(options) {
// 1. 发送异步请求获取获取轮播图数据，优化的手段可以通过ES6的promise来解决
/**
* 使用promise 方式优化
*/
request({ url: "https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata" }).then(result => {
this.setData({
swiperDataList: result.data.message
});
});
}
3. 分类导航
3.1 获取首页分类导航的数据
getCatesListData() {
request({ url: "https://api-hmugo-web.itheima.net/api/public/v1/home/catitems" }).then(
result => {
this.setData({
catesList: result.data.message
});
}
)
},
3.2 编写页面结构
<!-- 分类导航开始 -->
<view class="index_cate">
<navigator
hover-class="none"
wx:for="{{catesList}}"
wx:key="{{item.name}}">
<!-- widthFix 宽高等比例缩放 -->
<image src="{{item.image_src}}" mode="widthFix"/>
</navigator>
</view>
<!-- 分类导航结束 -->
3.3 编写页面样式
/* 分类导航 开始 */
.index_cate {
display: flex;
navigator {
float: 1;
width: 200rpx;
height: 200rpx;
padding: 30rpx;
image {
width: 100%;
}
}
}
/* 分类导航 结束 */
4. 楼层模块
4.1 获取商品楼层数据
getFloorListData() {
request({ url: "https://api-hmugo-web.itheima.net/api/public/v1/home/floordata" }).then(
result => {
this.setData({
floorList: result.data.message
})
}
)
},
4.2 编写楼层结构渲染数据
<!-- 商品楼层 开始 -->
<view class="index_floor">
<view class="floor_group"
wx:for="{{floorList}}"
wx:key="floor_title"
wx:for-item="item1"
wx:for-index="index1">
<view class="floor_title">
<image src="{{item1.floor_title.image_src}}" mode="widthFix"/>
</view>
<view class="floor_list">
<navigator
wx:for="{{item1.product_list}}"
wx:key="name"
wx:for-item="item2"
wx:for-index="index2">
<image mode="{{index2===0?'widthFix':'scaleToFill'}}" src="{{item2.image_src}}"/>
</navigator>
</view>
</view>
</view>
<!-- 商品楼层 结束 -->
4.3 编写页面样式
/* 商品楼层 开始 */
.index_floor {
.floor_group {
.floor_title {
padding: 10rpx 0;
image {
// 继承父元素的宽度
width: 100%;
height: 100%;
}
}
.floor_list {
overflow: hidden;
navigator {
float: left;
width: 33.333%;
// 让后四张图片的高等于第一张图片的高度
&:nth-last-child(-n + 4) {
// -n +4 代表后四个
/* 原图的宽高就是 232 * 386 */
// 232 / 386 = 33.33vm / height
// 33.33vm * 386 / 232 这是第一张图片的高度
height: (33.33vw*386/232)/2;
border-left: 10rpx solid #fff;
}
&:nth-child(2),
&:nth-child(3) {
border-bottom: 10rpx solid #fff;
}
image {
// 继承父元素的宽度
width: 100%;
height: 100%;
}
}
}
}
}
/* 商品楼层 结束 */
