1.打开阿⾥巴巴字体图标⽹站 2.选择的图标 3.添加⾄项⽬ 4.下载到本地 5.将样式⽂件由.css修改为.wxss 6.⼩程序中引⼊
1.使⽤tabbar实现底部导航功能 2.使⽤⾃定义组件的⽅式实现头部搜索框 3.加载轮播图数据 4.加载导航数据 5.加载楼层数据
1.获取⾸⻚轮播图数据
https://api.zbztb.cn/api/public/v1/home/swiperdata2.获取⾸⻚分类菜单数据
https://api.zbztb.cn/api/public/v1/home/catitems3.获取⾸⻚楼层数据
https://api.zbztb.cn/api/public/v1/home/floordata1.⼩程序内置request API 2.es6的 promise 3. ⼩程序swiper 组件 4. ⾃定义组件实现搜索框
app.json文件设置
{ "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":"black" }, //tabbar "tabBar": { "color": "#999",//默认颜色 "selectedColor":"#ff2d4a",//被选中颜色 "backgroundColor":"#FAFAFA",//背景颜色 "list": [{ "pagePath": "pages/index/index",//page路径 "text": "首页", "iconPath": "./assets/tabbar/home.png",//图标 "selectedIconPath": "./assets/tabbar/home-o.png"//选中图标 }, { "pagePath": "pages/category/index", "text": "分类", "iconPath": "./assets/tabbar/category.png", "selectedIconPath": "./assets/tabbar/category-o.png" }, { "pagePath": "pages/cart/index", "text": "购物车", "iconPath": "./assets/tabbar/cart.png", "selectedIconPath": "./assets/tabbar/cart-o.png" }, { "pagePath": "pages/user/index", "text": "我的", "iconPath": "./assets/tabbar/my.png", "selectedIconPath": "./assets/tabbar/my-o.png" } ] }, "style": "v2", "sitemapLocation": "sitemap.json" }app.wxss全局样式配置
@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%; }1.component文件夹下面创建search-input文件夹 再创建组件文件 search-input.wxml代码
<!--components/search-input/search-input.wxml--> <view class="search_input"> <navigator url="/pages/search/index" open-type="navigate">搜索</navigator> </view>search-input.wxss代码
.search_input { height: 90rpx; padding: 10rpx; background-color: var(--themeColor); } .search_input navigator { height: 100%; display: flex; justify-content: center; align-items: center; background-color: #fff; border-radius: 15rpx; color: #666; }首页index.wxml引入组件
<!--index.wxml--> <view class="pyg_index"> <!-- 搜索框开始 --> <search-input></search-input> <!-- 搜索框结束 -->1. 封装promise请求 在request文件夹下面单独存放封装的promise文件
export const request=(options)=>{ //定义公共的url const baseURL='https://api-hmugo-web.itheima.net/api/public/v1' return new Promise((resolve, reject) => { wx.request({ url: baseURL + options.url, method: options.method || 'get', data: options.data || {}, success: resolve, fail: reject }) }2.首页的JS文件中发起请求获取数据并保存到data中
//index.js //获取应用实例 const app = getApp() import {request} from '../../request/index' Page({ data: { //轮播图数组 swiperList:[], }, //事件处理函数 onLoad: function (options) { this.getSwiperList() } , //发起异步请求 方法一: getSwiperList(){ request({ url:'/home/swiperdata' }).then(result=>{ this.setData({ swiperList:result.data.message }) }) }, 方法二:使用async+await更加简洁 async getSwiperList(){ const{data:res}= await request({url:'/home/swiperdata'}) this.setData({ swiperList:res.message }) } })3.保存轮播图数据后,进行页面的渲染
//代码接在搜索框后面 <!-- 轮播图开始 --> <view class="index_swiper"> <!-- swiper标签默认的宽度和高度是100%*150px image标签默认宽高是320*240px --> <swiper autoplay //这个属性是自动播放 indicator-dots //面板指示点 circular //衔接滑动 > <swiper-item wx:for="{{swiperList}}" wx:key="goods_id"> <navigator> <image mode="widthFix" src="{{item.image_src}}" /> </navigator> </swiper-item> </swiper> </view> <!-- 轮播图结束 -->轮播图尺寸设置index.less文件
.index_swiper{ swiper{ //轮播图原图的大小是750rpx*340rpx width: 750rpx; height: 340rpx; } }步骤跟轮播图一样 1.在js中先发起请求获取导航栏数据保存
Page({ data: { //轮播图数组 swiperList:[], //导航栏数组 navList:[], }, onLoad: function (options) { this.getNavList() }, getNavList(){ request({ url:'/home/catitems' }).then(result=>{ this.setData({ navList:result.data.message }) }) }, --------------------------------------- 或使用async+await async getNavList(){ const{data:res} =await request({url:'/home/catitems'}) this.setData({ navList:res.message }) } })2.index.wxml文件接上轮播图
<!-- 导航栏开始 --> <view class="index_nav"> <navigator wx:for="{{navList}}" :key="name"> <image mode="widthFix" src="{{item.image_src}}" /> </navigator> </view> <!-- 导航栏结束 -->3.index.less样式
.index_nav{ display: flex; navigator{ padding:20rpx; flex:1; } }步骤同轮播图,导航栏一样,结构样式有点不同而已 1,js中获取楼层区数据保存data中
Page({ data: { //轮播图数组 swiperList:[], //导航栏数组 navList:[], //保存楼层数组数据 floorList:[] }, //事件处理函数 onLoad: function (options) { this.getFloorList() }, getFloorList(){ request({ url:'/home/floordata' }).then(result=>{ this.setData({ floorList:result.data.message }) }) } --------------------------------------- 或使用async+await async getFloorList(){ const{data:res} =await request({url:'/home/floordata'}) this.setData({ floorList:res.message }) } })2.index.wxml文件渲染floorList数据
<!-- 楼层区域开始 --> <view class="index_floor"> <view class="floor_ground" wx:for="{{floorList}}" :key="floor_title" wx:for-item="item1" wx:for-index="index1" > <!-- 标题 --> <view class="floor_title"> <image mode="widthFix" src="{{item1.floor_title.image_src}}" /> </view> <!-- 内容 --> <view class="floor_list"> <navigator wx:for="{{item1.product_list}}" :key="name" wx:for-item="item2" wx:for-index="index2" > <image mode="{{index2===0?'widthFix': 'scaleToFill'}}" src="{{item2.image_src}}" /> </navigator> </view> </view> </view> <!-- 楼层区域结束 -->3.index.wxss中写样式
.floor_list{ navigator{ float:left; width: 33.33%; // 后四个链接 &:nth-last-child(-n+4){ // 原图的宽高 232*386 // 232/386=33.33vm/height height: 33.33vw*386 / 232 /2; border-left: 10rpx solid #fff; } image{ width: 100%; height: 100%; } } }