3 | 小程序实战之首页设计（tabbar + 头部搜索框+ 轮播图 + 使用promise优化原生的请求 + 分类导航 + 楼层)

最新推荐文章于 2024-07-06 22:23:57 发布
最新推荐文章于 2024-07-06 22:23:57 发布
阅读量1.8k 收藏 14
点赞数 2
分类专栏： 小程序实战1_购物商城
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nsx_truth/article/details/108007096
版权

前言

由于项目很多数据（如图片等）都是从后台调用的，这里给一个API接口文档，但是，我不会讲解怎么在后台写代码，因为这是一个小程序实战，主要学的是怎么去设计一个小程序，至于未来，我会再写一个基于SpringBoot的小程序开发实战的笔记！

1. 效果

在这里插入图片描述

2. tabbar底部导航栏

已在上一节（2 | 小程序实战之项目搭建）完成

3. 头部搜索框

由于很多页面都需要使用头部搜索框，所以，为了实现动态化，我们需使用自定义组件

3.1 新增组件

在components文件夹下新增 SearchInput 组件
在这里插入图片描述

3.2 声明组件

在需要搜索栏的页面的 json 文件中采用键值对的方式（"名字”: “路径”）加入这个自定义组件
index.json

{
  "usingComponents": {
    "SearchInput":"/components/SearchInput/SearchInput"
  },
  "navigationBarTitleText": "优选"
}
3.3 引用组件

在页面的 wxml 的文件使用标签名引用自定义组件
index.wxml

<view class="index">
  <!-- 搜索框开始 -->
  <SearchInput></SearchInput>
  <!-- 搜索框结束 -->
</view>
3.4 设计自定义组件

SearchInput.wxml

<view class="search_input">
<navigator url="/pages/search/index" open-type="navigate">
  搜索
</navigator>
</view>

SearchInput.less
这里使用less替代wxss，本人觉得这样写比较舒服，可读性好，而且你保存后，开发工具还会自动生成wxss文件，纯属个人喜好

.search_input{
  height: 90rpx;
  padding: 10rpx;
  background-color: var(--themeColor);
  navigator{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border-radius: 15rpx;
    color: #666;
  }
}

SearchInput.wxss

.search_input {
  height: 90rpx;
  padding: 10rpx;
  background-color: var(--themeColor);
}
.search_input navigator {
  height: 100%;
  display: flex;
  background-color: #fff;
  justify-content: center;
  align-items: center;
  color: #666;
  border-radius: 15rpx;
}

在这里插入图片描述

4. 轮播图

4.1 获取轮播图的数据接口
https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata
4.2 调用接口

（1）现在首页的index.js文件中创建一个swiperList空数组

data: {
    swiperList:[]
  },

（2）在onLoad发送异步请求给swiperList空数组赋值

//Page Object
Page({
  data: {
    swiperList:[]
  },
  //options(Object)
  onLoad: function(options) {
    var reqTask = wx.request({
      url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
      success: (result) => {
        this.setData({
          swiperList:result.data.message
        })
      }
    });  
  }
});

把wx.request其它的属性（data、method等）删除，是因为都有默认值

4.3 解决域名不合法

由于我们调用的接口的域名没有添加到小程序的后台配置中，所以会报域名不合法的错，即没有权限请求接口，以下有两种解决方法（前提你输入了你自己的appId）：

（1）勾选不校验合法域名，。。。 但是，要上线的小程序这种方法不可取，因为要上线的小程序域名都得合法
在这里插入图片描述

（2）将域名添加到小程序的后台配置（要上线的小程序必须这么做），先登入小程序官网
在这里插入图片描述

在这里插入图片描述

这里就加入这的合法域名是：

api-hmugo-web.itheima.net/

注意： 保存更改好域名后，要重启微信开发工具才生效

4.4 渲染轮播图

1 swiper标签存在默认的宽度和高度
100% * 150px
2 image标签也存在默认的宽度和高度
320px * 240px
3 设计图片和轮播图
1 先看一下原图的宽高 750 * 340
2 让图片的高度自适应 宽度 等于100%
3 让swiper标签的高度 变成和图片的高一样即可
4 图片标签
mode属性 渲染模式
widthFix 让图片的标签宽高 和 图片标签的内容的宽高都等比例的发生变化
index.wxml

<view class="index">
  <!-- 搜索框开始 -->
  <SearchInput></SearchInput>
  <!-- 搜索框结束 -->
  <!-- 轮播图开始 -->
  <view class="index_swiper">
    <swiper autoplay indicator-dots circular>
      <swiper-item wx:for="{{swiperList}}" wx:key="goods_id">
        <navigator url="{{item.navigator_url}}">
          <image src="{{item.image_src}}" mode="widthFix" />
        </navigator>
      </swiper-item>
    </swiper>
  </view>
  <!-- 轮播图结束 -->
</view>

.index_swiper{
  swiper{
    // 可以不写，默认 750rpx = 100%
    width: 750rpx;
    // swiper的高度要等于原图的高度，
    // 否则切换成宽为750px的页面图片无法撑开
    height: 340rpx;
    image{
      // 加入widthFix 高度自适应了不用写
      width: 100%;
    }
  }
}
4.5 使用promise优化原生的请求

如果要嵌套异步请求（如下图），会感到很不直观，而且还不易维护
在这里插入图片描述

所以，接下来讲解如何使用promise优化原生的请求，至于为什么，方便啊！ 想了解更多的promise知识点，见参考文档1 参考文档2

实现步骤：
（1）在request文件夹的index.js下创建promise对象

// export代表导出promise对象(这里指request变量名)
export const request=(params)=>{
  // 创建一个Promise对象
  // resolve,reject 是 Promise 内置方法
  return new Promise((resolve,reject)=>{
    // 发起异步请求
    wx.request({
      // 解构params
      // 即...params = url: 'https://api-hmugo-web.省略'
      ...params,
      success:(result)=>{
        resolve(result);
      },
      fail:(err)=>{
        reject(err);
      }
    });
  })
}

（2）在首页的index.js中引入上面的文件并使用使用promise的方式发起异步请求

// 引入用来发送请求的方法 一定要把路径补全
import {request} from "../../request/index.js"
Page({
  data: {
    swiperList:[]
  },
  //options(Object)
  onLoad: function(options) {
    // 原生的请求
    // wx.request({
    //   url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
    //   success: (result) => {
    //     this.setData({
    //       swiperList:result.data.message
    //     })
    //   }
    // });
    // 使用promise优化原生的请求
    request({url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata'})
      .then(result=>{
        // 这里 result 函数返回值会传递到request的index.js文件中的 success:(result)=>{ ...}函数中
        this.setData({
          swiperList:result.data.message
        })
      })
  }
});

在这里插入图片描述

5. 分类导航

5.1 获取分类导航的数据接口
https://api-hmugo-web.itheima.net/api/public/v1/home/catitems
5.2 调用接口

（1）现在首页的index.js文件中创建一个 cateList 空数组

data: {
    swiperList:[],
    cateList:[]
  },

（2）发送异步请求给cateList空数组赋值


// 引入用来发送请求的方法 一定要把路径补全
import {request} from "../../request/index.js"
Page({
  data: {
    swiperList:[],
    cateList:[]
  },
  //options(Object)
  onLoad: function(options) {
    // 使用promise优化原生的请求
    this.getSwiperList();
    this.getCateList();
  },
  // 获取轮播图数据
  getSwiperList(){
    request({url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata'})
      .then(result=>{
        // 这里 result 相当于request的index.js文件中的 success:(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
        })
      })
  }
});
5.3 渲染分类导航

index.wxml

<view class="index">
  <!-- 搜索框开始 -->
  <SearchInput></SearchInput>
  <!-- 搜索框结束 -->
  <!-- 轮播图开始 -->
  <view class="index_swiper">
    <swiper
     autoplay
     indicator-dots
     circular
    >
      <swiper-item wx:for="{{swiperList}}" wx:key="goods_id">
        <navigator url="{{item.navigator_url}}">
          <image src="{{item.image_src}}" mode="widthFix" />
        </navigator>
      </swiper-item>
    </swiper>
  </view>
  <!-- 轮播图结束 -->
  <!-- 导航栏开始 -->
  <view class="index_cate">
    <navigator
     wx:for="{{cateList}}"
     wx:key="name"
     url="pages/category/index"
     open-type="navigate"
    >
      <image src="{{item.image_src}}" mode="widthFix" />
    </navigator>
  </view>
  <!-- 导航栏结束 -->
</view>

index.less

.index_cate{
  display: flex;
  navigator{
    padding: 20rpx;
    flex: 1;
    image{
      // 由于image并没有继承 navigator 的布局
      // 所以这里设置 width: 100%; 继承父组件的大小
      width: 100%;
    }
  }

在这里插入图片描述

6. 楼层

6.1 获取楼层的数据接口
https://api-hmugo-web.itheima.net/api/public/v1/home/floordata
6.2 调用接口

（1）现在首页的index.js文件中创建一个 floorList 空数组

data: {
    swiperList:[],
    cateList:[],
    floorList:[]
  },

（2）发送异步请求给floorList空数组赋值

// 引入用来发送请求的方法 一定要把路径补全
import {request} from "../../request/index.js"
Page({
  data: {
    swiperList:[],
    cateList:[],
    floorList:[]
  },
  //options(Object)
  onLoad: function(options) {
    // 原生的请求
    // wx.request({
    //   url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
    //   success: (result) => {
    //     this.setData({
    //       swiperList:result.data.message
    //     })
    //   }
    // });
    // 使用promise优化原生的请求
    this.getSwiperList();
    this.getCateList();
    this.getFloorList()
  },
  // 获取轮播图数据
  getSwiperList(){
    request({url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata'})
      .then(result=>{
        // 这里 result 相当于request的index.js文件中的 success:(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
        })
      })
  },
  //获取楼层数据
  getFloorList(){
    request({url:"https://api-hmugo-web.itheima.net/api/public/v1/home/floordata"})
      .then(result=>{
        this.setData({
          floorList:result.data.message
        })
      })
  },
});
6.3 渲染楼层

这里有点难度，渲染楼层涉及嵌套循环
index.wxml


<!-- 楼层开始 -->
  <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"
         url="{{item2.navigator_url}}"
        >
          <image mode="widthFix" src="{{item2.image_src}}" />
        </navigator>
      </view>
    </view>
  </view>
  <!-- 楼层结束 -->

index.less

.index_floor{
  .floor_group{
    .floor_title{
      image{
        width: 100%;
      }
    }
    .floor_list{
       // 内容会被修剪，并且其余内容不可见
      overflow: hidden;
      navigator{
        // 左对齐让它们在一行上放
        float: left;
        width: 33.33%;
        image{
          width: 100%;
        }
      }
    }
  }
}

在这里插入图片描述

这样还不完美，后四个超链接的图片高度应该与第一张图片高度一致，每张图片的高度，应该是第一张图片的一半，继续优化 👇👇👇
index.wxml

  <!-- 楼层 开始 -->
  <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>
  <!-- 楼层 结束 -->

index.less

.index_floor{
  .floor_group{
    .floor_title{
      padding: 10px 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%;
        }
      }
    }
  }
}

在这里插入图片描述
至此首页的设计已弄完 🤮🤮（让我干呕一下）

༺鲸落༻
关注
  • 2
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序轮播图，搜索栏，九宫格布局的做法
JasonLam的博客
03-07 5825
2018_3_7学习总结日志最近算是入门了微信小程序的小程序端吧，因为大一学习过html+css，然后再补一些js知识就去捣鼓了，我觉得这是学习的比较快的方法吧，实践出真知哈哈。
微信小程序，首页布局的实现
11-29
微信小程序，首页布局的实现 https://blog.csdn.net/qq_21036939/article/details/84618207
微信小程序-首页制作 - (图解+代码流程)
最新发布
Envyᥫᩣ的博客
07-06 2189
微信小程序作为轻量级的应用平台，为用户和开发者提供了便捷的服务访问和丰富的功能体验。制作一个吸引人的小程序首页是至关重要的，它不仅是用户的第一印象，也直接影响到用户的留存与活跃度。在设计小程序首页时，融入文章摘要的元素，可以有效地提升内容的可读性和吸引力，让用户在短时间内获取关键信息，激发阅读兴趣。
微信小程序：实现微信小程序应用首页开发 （本地生活首页）
Forever_Hopeful的博客
02-18 2703
微信小程序：实现微信小程序应用首页开发 （本地生活首页）
微信小程序----自定义首页
tsy19920721的博客
10-18 1283
微信小程序-----自定义首页 如果想要一打开小程序就显示自己想要的界面，就可以在app.json的文件中，在画框2的地方输入文件路径，注意不要带文件类型。哪个页面想当首页，就把哪个文件路径放在第一位。 ...
微信小程序---主菜单入口形式的首页
lzh445096的博客
05-25 674
此页面作为主菜单入口形式的首页，可以把主要模块的入口作为按键放在首页，类似于宣传页的感觉
微信小程序：完成一个tabbar+下拉刷新组件，需要经历什么坑
03-29
在最近的微信小程序开发中，遇到一个比较坑的界面开发，说坑并不是因为它难，而是这其中包括了太多的开发时所要填的坑了，今天准备将这些填完的小坑一个个刨出来仔细啃啃，做一个demo分享一下。 需求分析 简单梳理...
小程序源码 自定义tabbar (代码+截图)
06-19
小程序源码 自定义tabbar (代码+截图)小程序源码 自定义tabbar (代码+截图)小程序源码 自定义tabbar (代码+截图)小程序源码 自定义tabbar (代码+截图)小程序源码 自定义tabbar (代码+截图)小程序源码 自定义tabbar ...
vue3+taro+nutui+pina小程序空白框架
03-25
4. Pina：Pina 是一个专门为微信小程序设计的状态管理库，它借鉴了Redux和Vuex的思想，提供了一种简洁、易用的方式来管理小程序中的状态。Pina 的特点是轻量、高效，它简化了小程序中的数据流管理，使得状态管理更为...
微信小程序——自定义tabbar（截图+源码）.zip
05-08
微信小程序——自定义tabbar（截图+源码）.zip 微信小程序——自定义tabbar（截图+源码）.zip 微信小程序——自定义tabbar（截图+源码）.zip 微信小程序——自定义tabbar（截图+源码）.zip 微信小程序——自定义...
球鞋商城小程序源码+截图
05-26
3. **app.json**：此文件用于配置小程序的整体信息，包括页面路径、窗口表现、网络超时时间、底部TabBar样式等。它是JSON格式，不允许添加注释和任何JavaScript代码。 4. **project.config.json**：这是微信开发者...
微信小程序开发--首页及详情页开发
Aurora_1970s的博客
10-24 3647
一、常用组件 在之前的封装请求数据的模块中请求轮播图的数据 1.首页轮播图数据的请求以及渲染 1.轮播图数据的请求pages/index/index.js data: { bannerlist:[] //存放轮播图数据的列表 }, onLoad: function () { //请求首页轮播图的数据 request({ url : '/banner' //注意接口不要写错 }).then(res => { console.log(res
微信小程序中navbar及默认首页的实现
qq_42628504的博客
06-13 2616
小程序中想要默认页面展示的页面应该在app.json文件中的pages中配置第一个文件路径就是自己默认展示的第一个页面 2.配置navbar，也就是有几个切换的tab页面
微信小程序开发（三）————首页的制作（一）
pjc
09-30 6702
首先大家先打开自己电脑桌面上的微信开发者工具，打开之后呢，大家自行找到自己创建的welcome目录（如果没有的话，请先看我的第二篇文章），打开welcome目录下面的welcome.wxml文件。上面还有一句我们自己写的“hello world !”，如图： welcome.wxml 我们的代码就是在welcome.wxml里面书写，在书写之前呢，我先介绍三个标签，分别是<view&gt...
微信小程序--首页界面 demo（一）
海到无边天作岸 山登绝顶我为峰
11-09 5284
效果图 仅含上两部分 wxml <view class="{{scrollTop>120?'top':'topx'}}"> <view class="top_a"> <view class="top_imgx"> <image class="top_img" src="https://tvax1.sinaimg.cn/crop.0.0.512....
微信小程序学习1《语法、创建项目、tabbar、搜索框、轮播图》
x-dragon8899的博客
09-24 2576
一、环境准备 1、注册账号 https://mp.weixin.qq.com/wxopen/waregister?action=step1 2、获取APPID 3、下载开发工具并安装 下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 二、运行工具 1、扫码登录 2、新建项目 三、语法 1、text/view ...
微信小程序实现获取用户信息替换用户名和头像到首页
shengyin714959的博客
06-07 325
1、点击打开目录2、删除除了project.config.json（项目配置文件）以外所有文件。3、新建“app.json”4、接下来我们在app.json中写入配置15、保存，我们可以看到编译器报错，因为目前文件为空1、首先在app.json中写入12345第一个pages：指的是项目里面有哪些页面；第二个pages：指的是pages目录。保存，一定要先保存要不然建好回车没有反应。2、右击pages新建目录，命名为index，在index下新建pages命名为index注意：需要在pages下新建目录才能
【uniapp开发从0开始做一个小程序-04(搜索框+轮播图)】
qq_43303646的博客
05-03 1485
【uniapp开发从0开始做一个小程序-04(搜索框+轮播图)】 目录 第一项：做一个搜索框 第二项：做一个顶部菜单栏 第三项：做一个轮播图 第一项：做一个搜索框 1 -1：首先修改pages.json文件里面的index页面显示内容，将页面顶部标题改为“首页” 1-2：删除原来的testButton按钮，运行一下之前的colorui项目，在组件->操作条bar中选择自己喜欢的搜索框。然...
微信小程序，首页的实现
qq_21036939的博客
11-29 2729
源码位置https://download.csdn.net/download/qq_21036939/10815970   昨天晚上画时间实现了一下首页效果，轮播图+网格布局+列表 总体感觉像轮播图这种相比Android用着要方便很多（不过Android轮播图控件一般都用封装好的，也不麻烦），在布局定义这块，感觉比Android要麻烦的多（前端菜鸟，也没话说） 1，swiper的使用 ...
vue3+vant移动端tabbar
07-11
Vue3和Vant是非常流行的移动端开发工具，结合它们来创建一个移动端的TabBar是非常简单的。 首先，你需要安装Vue3和Vant的相关依赖，可以使用npm或者yarn来进行安装。 然后，你可以在Vue的根组件中引入Vant的Tabbar...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值