小程序优购商城项目讲解_商城类的小程序项目描述-CSDN博客

本文链接：https://blog.csdn.net/weixin_57748960/article/details/116946947

本文档详细讲解了一个微信小程序电商项目的实现过程，包括项目搭建、业务逻辑和效果展示。从新建小程序、搭建页面结构到实现首页、分类、详情、购物车、支付、登录和搜索等功能，并提供了关键步骤的参考文档和操作指南。通过此项目，读者可以掌握微信小程序的开发流程和技术要点。

摘要由CSDN通过智能技术生成

一，介绍

微信端小程序
使用微信开发者工具开发
电商类小程序

参考文档

接口地址
 微信开发文档
 阿里图标库

1.项目搭建

微信公众平台

1.新建一个小程序

填入自己小程序的appID

2.搭建⽬录结构
在这里插入图片描述
3.搭建项⽬的⻚⾯

 "pages": [
    "pages/index/index",
    "pages/category/category",
    "pages/cart/cart",
    "pages/user/user",
    "pages/good_list/good_list",
    "pages/goods_detail/goods_detail",
    "pages/collect/collect",
    "pages/order/order",
    "pages/search/search",
    "pages/feedback/feedback",
    "pages/login/login",
    "pages/aute/aute",
    "pages/pay/pay"
  ],

4. 引⼊字体图标

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

5. 搭建项⽬tabbar结构

 "tabBar": {
   
    "backgroundColor": "#fff",
    "selectedColor": "#d81e06",
    "list": [{
   
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "/assets/icon/首页.png",
        "selectedIconPath": "./assets/icon/首页1.png"
      },
      {
   
        "pagePath": "pages/category/category",
        "text": "商品",
        "iconPath": "/assets/icon/商品.png",
        "selectedIconPath": "./assets/icon/商品1.png"
      },
      {
   
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "/assets/icon/购物车.png",
        "selectedIconPath": "./assets/icon/购物车1.png"
      },
      {
   
        "pagePath": "pages/user/user",
        "text": "我的",
        "iconPath": "/assets/icon/我的.png",
        "selectedIconPath": "./assets/icon/我的1.png"
      }
    ]
  },

在这里插入图片描述

2.业务逻辑

1.首页

使⽤tabbar 实现底部导航功能
使⽤⾃定义组件的⽅式实现头部搜索框

  <search />
  //组件内容
  <view class="search">
  <navigator class="navigator" url=