# uni-mall-demo

**Repository Path**: wangfs/uni-mall-demo

## Basic Information

- **Project Name**: uni-mall-demo
- **Description**: uni商城系统，个人练手模板，谨慎使用。
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2021-02-20
- **Last Updated**: 2021-02-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 介绍

uni商城系统。

## 项目结构

通过项目结构，你将清楚明白你即将入手的是一个怎么样的项目，你可能需要什么，如何快速的把它变成自己的产品。
### 功能模块

- [x] [首    页](https://gitee.com/running-cat/tacomall-uniapp/tree/master/pages/index) 首页支持轮播展示，商品分类入口，秒杀等功能
- [x] [商品分类](https://gitee.com/running-cat/tacomall-uniapp/tree/master/pages/category) 商品分类
- [x] [购 物 车](https://gitee.com/running-cat/tacomall-uniapp/tree/master/pages/cart) 提供购物车操作
- [x] [用户模块](https://gitee.com/running-cat/tacomall-uniapp/tree/master/pages/center) 包括登录用户系类功能（登录，个人中心，账户）
- [x] [搜    索](https://gitee.com/running-cat/tacomall-uniapp/tree/master/pages/search) 商品搜索
- [x] [商品模块](https://gitee.com/running-cat/tacomall-uniapp/tree/master/pages/goods) 商品信息展示（详情，评价，购买）
- [x] [订单模块](https://gitee.com/running-cat/tacomall-uniapp/tree/master/pages/checkout) 订单支付流程页面

### 程序预览

以下为程序在手机端的运行预览图（取至部分功能页面）

<table border="0">
    <tr>
        <td>首页</td>
        <td>商品分类</td>
        <td>购物车</td>
        <td>我的</td>
        <td>商品详情</td>
    </tr>
    <tr>
        <td><img title="码上talk" src="http://img.codingtalk.cn/WHjZJJh1586355355657" height="340" width="170"/></td>
        <td><img title="码上talk" src="http://img.codingtalk.cn/MmNmCR21586355392776" height="340" width="170"/></td>
        <td><img title="码上talk" src="http://img.codingtalk.cn/25NbeMD1586355410426" height="340" width="170"/></td>
        <td><img title="码上talk" src="http://img.codingtalk.cn/nrnzKwr1586355431298" height="340" width="170"/></td>
        <td><img title="码上talk" src="http://img.codingtalk.cn/r8yRj251586355442801" height="340" width="170"/></td>
    </tr>
</table>

### 代码描述

~~~
tacomall-uniapp                     项目
├─api                               接口模块
├─common                            公共less,js
├─hybrid                            H5页面
├─libs                              js库
├─model                             数据模型
├─pages                             页面
│  ├─account                        个人账号
│  ├─cart                           购物车
│  ├─category                       分类
│  ├─center                         个人中心
│  ├─checkout                       订单确认
│  ├─evaluate                       商品评价
│  ├─goods                          商品详情
│  ├─h5                             webview页面
│  ├─index                          首页
│  ├─login                          登录
│  ├─order                          订单列表
│  ├─search                         搜索
│  ├─transaction                    订单完成
├─platforms                         跨平台页面，样式
├─plugins                           vue插件
├─service                           开放平台服务
├─static                            静态资源
├─store                             全局状态树
├─utils                             工具库
├─wxcomponents                      微信UI库
├─App.vue                           vue根组件
├─config.js                         全局配置
├─main.js                           js入口
├─manifest.json                     uniapp配置
~~~

## 上手指南

我们希望开源的项目能够让每一个人都能够一看就懂，轻松上手，但这并不意味者我们不需要做任何东西，相反，在正式运行项目前，你必须完成以下步骤。

### 环境要求

为了避免运行开发中遇到一些意想不到的问题，我们推荐你安装如下环境。

1. Git
2. Node9+
3. hbuilder
4. 微信开发者工具

### 安装步骤

通过以下步骤，你将很快看见项目运行起来了！

1. 克隆项目

```
git clone https://gitee.com/running-cat/tacomall-uniapp.git
```
2. 配置hbuilder

项目依赖于hbuilderx进行跨平台代码运行编译，在开发前，我们需要确保配置好hbuilder编辑器中的**Node路径**和**微信开发者工具路径和端口**

3. 导入项目

打开hbuilderx，选择导入该项目

4. 更换微信小程序appid

想要开发微信小程序，我们需要拥有属于自己的微信小程序appid。当然，我们可以通过微信小程序测试号获取。

```
manifest.json > mp-weixin > appid
```

## 测试

看到这里，我们认为你已经正确配置启动项目了，接下来你将通过微信开发者工具看到实际效果。

```
运行 > 运行到小程序模拟器 > 微信小程序
```

## 部署

我们提供了docker容器化部署方案，详情请查看[部署](https://gitee.com/running-cat/tacomall-springcloud/blob/master/LICENSE)，但并不意味着你不得不选择docker部署，你仍然可以自由选择你喜欢的部署方式进行部署。

## 使用的框架

项目中使用到以下框架（不限于）

| 框架             | 说明                                                         |
| -------------------- | ------------------------------------------------------------ |
| vue              | 代码编写基础                      |
| vuex        | 提供页面数据共享 |
| uniapp    | 跨平台解决方案      |

## 版权声明

项目在[Apache License 2.0]下自由使用。