本文介绍了微信小程序的目录结构搭建，包括公共样式、组件、第三方库、自定义帮助库和接口帮助。接着，讲解了如何引入阿里巴巴字体图标，并展示了如何自定义tabbar。在首页实现上，详细解析了搜索框、轮播图、导航和楼层的布局及逻辑。使用了wx:for和wx:key优化渲染，并提供了相关样式和JS代码示例。最后提到了requestAPI和ES6 Promise在异步请求中的应用。
一、搭建目录结构
| 目录名 | 作用 |
|---|---|
| styles | 公共样式 |
| components | 组件 |
| lib | 第三方库 |
| utils | 自己的帮助库 |
| request | 自己的接口帮助 |
二、引入字体和图标
- 阿里巴巴字体图标网
- 添加至项目、下载到本地
- 样式文件（CSS修改为WXSS）
- 小程序导入
三、搭建tabbar结构
在app.json中添加
"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"
}
]
},
自定义组件
在components中，新建文件夹后，右键 新建components
tabs
四、首页（index）
- 搜索框（自定义组件）
- 轮播图
- 导航
- 楼层
先布局好，再写内部逻辑！ - 整一个页面为一个view
- wx:for="{{数组名}}" 数组在Js中定义
- wx:key=“url中其中一个返回参数” 作用：提高数组渲染性能
- wx:key="*this"指item数组本身
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标签的高度 变成和图片一样高
4.图片标签
mode属性 渲染模式
widthFix 让图片标签宽高和图片标签内容宽高等比例发生变化
-->
<swiper
autoplay="{{true}}"
indicator-dots="{{true}}"
circular="{{true}}"
>
<swiper-item wx:for="{{swiperList}}" wx:key="goods_id">
<navigator url="/pages/goods_detail/index?goods_id={{item.goods_id}}">
<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 src="{{item1.floor_title.image_src}}" mode="widthFix">
</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 src="{{item2.image_src}}" mode="{{index2===0?'widthFix':'scaleToFill'}}">
</image>
</navigator>
</view>
</view>
</view>
<!-- 楼层 结束 -->
</view>
index.less
```html
.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 {
image {
width: 100%;
}
}
.floor_list {
// 清除浮动
overflow: hidden;
navigator {
padding: 10rpx 0;
float: left;
width: 33.33%;
// 后4个超链接
&: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.js
// 引入 用来发送请求 的方法 一定要把路径补全
import {
request
} from "../../request/index.js";
//Page Object
Page({
data: {
// 轮播图数组
swiperList: [],
// 导航数组
catesList: [],
// 楼层数据
floorList: []
},
//页面开始加载 就会触发
onLoad: function (options) {
// // 发送异步请求 获取轮播图数据
// // 优化手段可以通过es6 promise来解决问题
// var reqTask = wx.request({
// url: "https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata",
// success: (result) => {
// this.setData({
// swiperList: result.data.message,
// })
// }
// });
request({
url: "/home/swiperdata"
})
.then(result => {
this.setData({
swiperList: result,
})
});
this.getCateList();
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.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 {
image {
width: 100%;
}
}
.floor_list {
// 清除浮动
overflow: hidden;
navigator {
padding: 10rpx 0;
float: left;
width: 33.33%;
// 后4个超链接
&: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%;
}
}
}
}
}
五、技术
- request API
在index.js中引入了import{request}from"…/…/request/index.js";
作用：url接口使用时，可以直接写不同的地方，前缀相同的可以省略。
// 同时发送一部代码次数
let ajaxTimes = 0;
export const request = (params) => {
ajaxTimes++;
// 显示加载中
wx.showLoading({
title: "加载中",
mask: true,
});
// 定义公共的url
const baseUrl = "https://api-hmugo-web.itheima.net/api/public/v1";
return new Promise(
(resolve, reject) => {
wx.request({
...params,
url: baseUrl + params.url,
success: (result) => {
resolve(result.data.message);
},
fail: (err) => {
reject(err);
},
complete: () => {
ajaxTimes--;
if (ajaxTimes === 0) {
//关闭图标
wx.hideLoading();
}
}
});
})
}
- es6的promise
作用：发送异步请求，获取轮播图、分类导航的数据
js中的 - 轮播图的swiper
- 自定义组件 搜索框
扫一扫
1108
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
