小程序项目--电商优购day01

最新推荐文章于 2022-03-14 17:32:07 发布

原创

最新推荐文章于 2022-03-14 17:32:07 发布 · 1.6k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

本文详细介绍了电商优购小程序项目的开发过程，包括搭建目录结构、引入字体图标、首页效果实现、业务逻辑设计、接口调用、关键技术应用等。通过使用小程序的swiper组件、自定义组件实现搜索框、底部tabbar导航以及楼层区数据加载，结合Promise和小程序内置API完成数据请求和页面渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小程序项目--电商优购

效果如图

搭建目录结构

在这里插入图片描述

搭建项目页面目录

在这里插入图片描述

引⼊字体图标

1.打开阿⾥巴巴字体图标⽹站
2.选择的图标
3.添加⾄项⽬
4.下载到本地
5.将样式⽂件由.css修改为.wxss
6.⼩程序中引⼊

首页效果

在这里插入图片描述

业务逻辑

1.使⽤tabbar实现底部导航功能
2.使⽤⾃定义组件的⽅式实现头部搜索框
3.加载轮播图数据
4.加载导航数据
5.加载楼层数据

接口

1.获取⾸⻚轮播图数据

https://api.zbztb.cn/api/public/v1/home/swiperdata

2.获取⾸⻚分类菜单数据

https://api.zbztb.cn/api/public/v1/home/catitems

3.获取⾸⻚楼层数据

https://api.zbztb.cn/api/public/v1/home/floordata

关键技术

1.⼩程序内置request API
2.es6的 promise
3. ⼩程序swiper 组件
4. ⾃定义组件实现搜索框

Tabbr

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"