【记录】基于uni-app开发的微信小程序商城项目

ank_lin

已于 2023-02-10 22:31:22 修改

阅读量4.2k

点赞数 2

CC 4.0 BY-SA版权

文章标签：微信小程序

于 2022-07-04 13:01:07 首次发布

本文链接：https://blog.youkuaiyun.com/MILK_LL/article/details/125569629

本文详述了基于uni-app开发微信小程序商城的过程，包括项目结构解析、起步、框架搭建、网络请求配置、Git管理、页面组件开发、数据获取与处理、登录支付功能以及项目发布等关键步骤。涉及tabbar页面、分包管理、搜索组件、商品列表和详情、购物车功能、登录模块等核心功能的实现。

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

一、项目基本结构

（一）tabbar页面

首页分类

购物车

我的(用户中心)

（二）非tabbar页面

搜索

商品列表

商品详情

微信支付

结构解析：

1. 构建一个小程序，需要先将小程序的页面结构分类、理清。

现大多数小程序页面结构分为tabbar页面和非tabbar页面。tabbar页面作为小程序的主体框架，所以应该先搭建好tabbar页面，非tabbar页面在此框架上运行。

2. 由于存在tabbar页面和非tabbar页面，因此将小程序项目分为主包和分包

主包：小程序启动页或tabbar页面以及公共资源
分包：非tabbar页面和私有资源

普通分包页面：先下载主包，再跳转至普通分包运行普通分包的页面

独立分包页面：不依赖于主包，可自己独立运行(配置时加上："independent" : true)

配置pages.json

// 主包----pages：tabbar页面放入
    "pages": [
		{
            "path" : "pages/home/home",
            "style" : {}
        }
        ,{
            "path" : "pages/cate/cate",
            "style" : {}
        }
        ,{
            "path" : "pages/cart/cart",
            "style" : {}
        }
        ,{
            "path" : "pages/my/my",
            "style" : {}
        }
    ],
--------------------------------------------------
// subPackages(数组)：每个分包为一个对象，每个分包的pages(数组)可包含多个非tabbar页面(对象)
// {
        root: 该分包在项目中的目录
        name: 分包别名
        pages: [{
                    path: 非tabbar页面在此分包下的路径
                    style: 非tabbar页面的配置
                }]
        independent: true   // 与root平级，加上independent:true，则此分包为独立分包
    }
--------------------------------------------------
	"subPackages":[
		{
			"root":"subpkg",
            "name":"p1",
			"pages":[{
                    "path" : "goods_detail/goods_detail",
                    "style" : {}
                }
                ,{