# gz-uniapp

**Repository Path**: gezicode/gz-uniapp

## Basic Information

- **Project Name**: gz-uniapp
- **Description**: 格子前端(Uniapp,vue3)快速开发框架
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 6
- **Forks**: 3
- **Created**: 2023-04-14
- **Last Updated**: 2025-09-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<p align="center">
	<img alt="logo" src="https://oscimg.oschina.net/oscnet/up-18775c8e131ae8c499fe490f916eaf42253.png">
</p>
<h1 align="center" style="margin: 30px 0 30px; font-weight: bold;">格子代码(UNIAPP) v2.0.0</h1>
<h4 align="center">基于uniapp的前端快速开发框架</h4>
<h4 align="center">可用于基础项目，可用于学习</h4>

## 平台简介

格子基础项目是一套全部开源的快速开发平台，毫无保留给个人及企业免费使用。

- 阿里云折扣场：[点我进入](https://www.aliyun.com/minisite/goods?userCode=6y32neqd)，腾讯云秒杀场：[点我进入](https://curl.qcloud.com/vrYKsW9c)&nbsp;&nbsp;
- 阿里云优惠券：[点我领取](https://www.aliyun.com/minisite/goods?userCode=6y32neqd)，腾讯云优惠券：[点我领取](https://curl.qcloud.com/vrYKsW9c)&nbsp;&nbsp;

#### 样式插件

#### 核心功能

| 功能     | 说明                                                         |
| -------- | ------------------------------------------------------------ |
| 统一Api  | 使用方式：this.$api.*。<br />详细请见：README.md             |
| 工具类   | 包含toast，modal，跳转页面，空值判断，文件分享，校验字符串等。<br />使用方式：this.$common.*<br />详细请见：README.md |
| 设计规范 | 配置文件：[uni.scss](./uni.scss)。<br />规范配置：颜色，边距，间距等<br />样式使用：外边距(m-3)，内边距(p-3)，flex换行(flex flex-wrap)等<br />详情请见：下方【样式规范】 |
| 自动分页 | 只需传入接口名，即可自动实现分页。<br /><br />使用说明：[README.md](./qmf-baseproj-weapp/components/gz-page/README.md) |
| 文件上传 | 多文件上传组件。<br />使用说明：[README.md](./qmf-baseproj-weapp/components/gz-upfile-list/README.md) |
| 配置分包 | /subpkg                                                      |

## 演示图

<table>
<tr>
    <td><img src="https://oscimg.oschina.net/oscnet/up-91f8b15480313600ff94891b26a13da44bb.png"/></td>
    <td><img src="https://oscimg.oschina.net/oscnet/up-7903781b5f882530e73df7434173e9d25ec.png"/></td>
    <td><img src="https://oscimg.oschina.net/oscnet/up-201d38ba24174328e80f5bca07b48c927be.png"/></td>
    <td><img src="https://oscimg.oschina.net/oscnet/up-f4f2f30f5ab18160acec4a58f679df0cdca.png"/></td>
</tr>
</table>

## 前端学习

```
vue：
	官方文档：https://vuejs.bootcss.com/guide/
	代码规范：https://vuejs.bootcss.com/style-guide/
uni-app:
	官方文档：https://uniapp.dcloud.net.cn/
colorui:
	源码地址：https://github.com/weilanwl/ColorUI
	学习地址：http://docs.xzeu.com/#/info/%E5%BF%AB%E9%80%9F%E5%BC%80%E5%A7%8B/%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98
	演示地址：https://colorui.yanwei.xin
uni-ui插件库：
	官方组件：https://uniapp.dcloud.net.cn/component/uniui/uni-ui.html
	插件市场：https://ext.dcloud.net.cn/
```

## 统一样式规范

[./uni.scss](./uni.scss)：设计规范文件，与摹客/蓝湖规范一致.

样式插件：[ColorUI源码](https://ext.dcloud.net.cn/plugin?id=239) [ColorUi展示](https://colorui.yanwei.xin/#/)，高颜值，高度自定义的Css组件库

### 统一设置

```scss
/* 主色 */
$uni-primary: #10AEFF;	//正常
$uni-primary-disable: mix(#fff,$uni-primary,50%);	//禁用
$uni-primary-light: mix(#fff,$uni-primary,80%);	//镂空

// 辅助色
//成功
$uni-success: #4cd964;		//正常
$uni-success-disable: mix(#fff,$uni-success,50%);//禁用
$uni-success-light: mix(#fff,$uni-success,80%);	//镂空
//警示
$uni-warning: #f0ad4e;      	//正常  
$uni-warning-disable: mix(#fff,$uni-warning,50%);//禁用
$uni-warning-light: mix(#fff,$uni-warning,80%);	//镂空
//错误
$uni-error: #dd524d;			//正常
$uni-error-disable: mix(#fff,$uni-error,50%);	//禁用
$uni-error-light: mix(#fff,$uni-error,80%);	//镂空
//信息
$uni-info: #90939a;			//正常
$uni-info-disable: mix(#fff,$uni-info,50%);	//禁用
$uni-info-light: mix(#fff,$uni-info,80%);		//镂空

/* 文字色 */
$uni-main-color: #303133; 			// 主要文字
$uni-base-color: #606266;			// 常规文字
$uni-secondary-color: #909399;		// 次要文字
$uni-extra-color: #C0C4CC;			// 辅助说明

/* 样式色 */
$uni-bg-color:#F7F7F7;					//背景色
$uni-icon: #7A7E83;						//图标
$uni-bg-color-mask: rgba(0, 0, 0, 0.4);	//遮罩颜色
$uni-black: #000000;					//黑色
$uni-white: #ffffff;					//白色
$uni-transparent: rgba($color: #000000, $alpha: 0);//透明色

/* 边框颜色 */
$uni-border-color-1: #F0F0F0;
$uni-border-color-2: #EDEDED;
$uni-border-color-3: #DCDCDC;
$uni-border-color-4: #B9B9B9;

/* 边框 solid */
$uni-border-solid-color: #EDEDED;
$uni-border-solid-width: 1rpx;
$uni-border-solids-color: #EDEDED;
$uni-border-solids-width: 8rpx;

/* 文字尺寸 */
$uni-font-size-1:20rpx;
$uni-font-size-2:24rpx;
$uni-font-size-3:28rpx;//常规
$uni-font-size-4:32rpx;
$uni-font-size-5:38rpx;

/* 外边距 */
$uni-margin-1: 10rpx;
$uni-margin-2: 20rpx;
$uni-margin-3: 30rpx;//常规
$uni-margin-4: 40rpx;
$uni-margin-5: 50rpx;

/* 内边距 */
$uni-padding-1: 10rpx;
$uni-padding-2: 20rpx;
$uni-padding-3: 30rpx;//常规
$uni-padding-4: 40rpx;
$uni-padding-5: 50rpx;

/* 边框圆角 */
$uni-border-radius-1: 2rpx;
$uni-border-radius-2: 4rpx;
$uni-border-radius-3: 6rpx;//常规
$uni-border-radius-4: 12rpx;
$uni-border-radius-5: 16rpx;
$uni-border-radius-circle: 50%;
```

### 常用样式

#### 颜色

> 尺寸类分为：1(最小)，2，3(常规)，4，5(最大)
>

```html
<view class="bg">主题色</view>
<view class="bg-light">淡背景</view>
<view class="bg-line">镂空</view>

<view class="bg-success">成功</view>
<view class="bg-success-light">淡背景</view>
<view class="bg-success-line">镂空</view>

<view class="bg-warn">警示</view>
<view class="bg-warn-light">淡背景</view>
<view class="bg-warn-line">镂空</view>

<view class="bg-error">错误</view>
<view class="bg-error-light">淡背景</view>
<view class="bg-error-line">镂空</view>

<view class="bg-info">信息</view>
<view class="bg-info-light">淡背景</view>
<view class="bg-info-line">镂空</view>
```

```html
//常规色
<view class="bg-page">页面背景</view>
<view class="bg-mask">遮罩</view>
<view class="bg-black">黑色</view>
<view class="bg-white">白色</view>
<view class="bg-transparent">透明色</view>

//边框/分割线颜色.c1最浅，c5最深
<view class="border-c1">边框颜色1</view>
<view class="border-c2">边框颜色2</view>
<view class="border-c3">边框颜色3</view>//常规
<view class="border-c4">边框颜色4</view>
<view class="border-c5">边框颜色5</view>

//文本颜色.c2最深，c5最浅
<view class="text-c2">主要文字</view>
<view class="text-c3">常规文字</view>//常规
<view class="text-c4">次要文字</view>
<view class="text-c5">辅助说明</view>

//阴影
<view class="shadow-2">阴影2</view>
<view class="shadow-3">常规</view>
<view class="shadow-4">阴影4</view>

//主题色
<view class="bg-color">背景-主题色</view>
<view class="text-color">文本-主题色</view>
<view class="border-color">边框-主题色</view>
<view class="bg-color-important">背景-主题色-强制</view>
<view class="text-color-important">文本-主题色-强制</view>
<view class="border-color-important">边框-主题色-强制</view>
```

#### 间距

外边距：`m${direction}-${size}` 

内边距：`p${direction}-${size}` 

> size值：1(最小)，2，3(常规)，4，5(最大)

```html
<view class="m-3">外边距(margin)</view>
<view class="ml-3">外边距-左(margin-left)</view>
<view class="mt-3">外边距-上(margin-top)</view>
<view class="mr-3">外边距-右(margin-right)</view>
<view class="mb-3">外边距-下(margin-bottom)</view>
<view class="mlr-3">外边距-左右(margin-left margin-right)</view>
<view class="mtb-3">外边距-上下(margin-top margin-bottom)</view>

<view class="p-3">内边距(padding)</view>
<view class="pl-3">内边距-左(padding-left)</view>
<view class="pt-3">内边距-上(padding-top)</view>
<view class="pr-3">内边距-右(padding-right)</view>
<view class="pb-3">内边距-下(padding-bottom)</view>
<view class="plr-3">内边距-左右(padding-left padding-right)</view>
<view class="ptb-3">内边距-上下(padding-top padding-bottom)</view>
```

#### 边框(radius)

格式： `radius-${direction}-${size}`

> size值：1(最小)，2，3(常规)，4，5(最大)

```html
<view class="radius-tl-3">左上圆角</view>
<view class="radius-tr-3">右下圆角</view>
<view class="radius-bl-3">设置右下圆角</view>
<view class="radius-br-3">设置右下圆角</view>

<view class="round">圆</view>
```

#### 边框(solid)

常规格式： `solid-${direction}`，加粗格式：`solids-${direction}`

```html
<view class="solid">常规</view>
<view class="solid-top">常规-上</view>
<view class="solid-right">常规-右</view>
<view class="solid-bottom">常规-下</view>
<view class="solid-left">常规-左</view>
<view class="solid-left-right">常规-左右</view>
<view class="solid-top-bottom">常规-上下</view>

<view class="solids">加粗</view>
<view class="solids-top">加粗-上</view>
<view class="solids-right">加粗-右</view>
<view class="solids-bottom">加粗-下</view>
<view class="solids-left">加粗-左</view>
<view class="solids-left-right">加粗-左右</view>
<view class="solids-top-bottom">加粗-上下</view>
```

#### 文本

格式： `text-s${size}`

> size值：1(最小)，2，3(常规)，4，5(最大)

```html
<view class="text-s1">文字大小1</view>
<view class="text-s2">文字大小2</view>
<view class="text-s3">文字大小3</view>
<view class="text-s4">文字大小4</view>
<view class="text-s5">文字大小5</view>
```

```html
<view class="text-cut">文本超出隐藏-1行</view>
<view class="text-cut-2">文本超出隐藏-2行</view>
<view class="text-cut-3">文本超出隐藏-3行</view>

<view class="text-bold">加粗</view>
<view class="text-center">居中</view>
<view class="text-left">左</view>
<view class="text-right">右</view>
<view class="text-start">开始</view>
<view class="text-end">结束</view>
<view class="text-justify">两侧对齐</view>
```

#### 布局(flex)

```html
<view class="flex">flex</view>

<!-- 【容器】方向 -->
<view class="flex-direction">横向</view>

<!-- 【容器】换行 -->
<view class="flex-wrap">从上到下换行</view>

<!-- 【容器】横向对齐(justify-content) -->
<view class="justify-start">起点对齐</view>
<view class="justify-end">终点对齐</view>
<view class="justify-center">居中对齐</view>
<view class="justify-between">两端对齐</view>
<view class="justify-around">间隔相等</view>

<!-- 【容器】纵向对齐(align-items)【用于单行】 -->
<view class="align-start">起点对齐</view>
<view class="align-end">终点对齐</view>
<view class="align-center">居中对齐</view>
<view class="align-stretch">默认(如果项目未设置高度或设为auto，项目将占满整个容器的高度)</view>
<view class="align-baseline">项目的第一行文字的基线对齐</view>

<!-- 【容器】纵向对齐(align-content)【用于多行】 -->
<view class="content-start">起点对齐</view>
<view class="content-end">终点对齐</view>
<view class="content-center">居中对齐</view>
<view class="content-between">与交叉轴两端对齐，轴线之间的间隔平均分布</view>
<view class="content-around">每根轴线两侧的间隔都相等</view>
<view class="content-stretch">主轴线占满整个交叉轴</view>

<!-- 【项目】横向对齐(align-self)【用于自身单独布局】 -->
<view class="self-start">起点对齐</view>
<view class="self-end">终点对齐</view>
<view class="self-center">居中对齐</view>
<view class="self-stretch">默认</view>
<view class="self-baseline">第一行文字的基线对齐</view>

<!-- 【项目】放大比例(flex-grow) -->
<view class="flex-1">flex:1</view>
<view class="flex-2">flex:2</view>
<view class="flex-3">flex:3</view>

<!-- 【项目】百分比(flex-basis) -->
<view class="basis-20">百分之20</view>
<view class="basis-40">百分之40</view>
<view class="basis-50">百分之50</view>
<view class="basis-60">百分之60</view>
<view class="basis-80">百分之80</view>
```

#### 布局(grid)

```html
<!-- 列数：col-* ，没有边框：no-border-->
<view class="grid col-4 no-border">
	<view class="cu-item" v-for="(item,index) in gridList">

	</view>
</view>
```

#### 浮动(float)

```html
<view class="cf">
	<view class="fl">左浮动</view>
	<view class="fr">右浮动</view>
</view>
```

### 图标

> 格式：cuIcon-*，[所有图标值](https://colorui.yanwei.xin/#/pages/basics/icon)

```html
<view class="cuIcon-search">搜索图标</view>
```

## 统一API调用

统一在[./api/api.js](./api/api.js)中编写

```
this.$api.*
【推荐使用】有方法提示。仅限于页面，组件中使用
```

```
uni.$api.*
无方法提示。在页面，组件，JS文件中均可使用
```

## 工具库

已实现常用的工具方法。

[./utils/common.js](./utils/common.js)

使用方式：

1. this.$common.*。例如this.$common.modalInfo()。有提示方法。只用于页面或组件
2. uni.$common.*。例如uni.$common.modalInfo()。无提示方法。可用于页面，组件，js文件

| 分类                     | 使用                    | 描述                           |
| ------------------------ | ----------------------- | ------------------------------ |
| 模态弹窗                 |                         |                                |
|                          | modalInfo               | 温馨提示                       |
|                          | modalWarin              | 警告提示                       |
|                          | modalError              | 系统提示                       |
| 提示框                   |                         |                                |
|                          | toastSuc                | 成功                           |
|                          | toastSucBack            | 成功后返回上一页               |
|                          | toastErr                | 失败                           |
|                          | toastLoading            | 加载处理中                     |
|                          | toastHide               | 隐藏                           |
| 对象操作                 |                         |                                |
|                          | objDeepClone            | 对象深度克隆                   |
|                          | objDeepMerge            | 对象深度合并                   |
|                          | objGetProperty          | 链式读取对象属性               |
|                          | objSetProperty          | 链式设置对象属性值             |
|                          | obj2obj                 | 将obj1的属性添加到obj2         |
| 缓存存储                 |                         |                                |
|                          | setStoFieldValue        | 设置存储字段值                 |
|                          | getStoFieldValue        | 获取存储字段值                 |
| 规则校验                 |                         |                                |
|                          | isEmail                 | 是否邮箱                       |
|                          | isPhone                 | 是否手机号                     |
|                          | isIdCard                | 是否身份证号                   |
|                          | isPostCode              | 是否邮编                       |
|                          | isName                  | 是否姓名                       |
|                          | isUrl                   | 是否网址                       |
|                          | isQQ                    | 是否QQ号                       |
|                          | isCarNo                 | 是否车牌号                     |
|                          | isChinese               | 是否汉字                       |
|                          | isLetter                | 是否字母                       |
|                          | isLetterOrNumber        | 是否字母或者数字               |
|                          | isContainsValue         | 是否包含值                     |
|                          | isNumInRange            | 数值是否在某个范围内           |
|                          | isStrLengthInRange      | 是否字符串长度是否在某个范围内 |
|                          | isArray                 | 是否是数组                     |
|                          | isJson                  | 是否是Json字符串               |
|                          | isObject                | 是否是对象                     |
|                          | isString                | 是否是字符串                   |
|                          | isNumber                | 是否是数字                     |
|                          | isInteger               | 是否整数                       |
|                          | isEmpty                 | 是否为空                       |
|                          | isDate                  | 是否普通日期                   |
|                          | isDecimal               | 是否十进制数值                 |
|                          | isAmount                | 是否是金额                     |
|                          | trimAll                 | 去掉所有空格                   |
| 移除空值                 | removeEmptyValues       |                                |
| 获取字符串中某个字符数量 | countContainsValue      |                                |
| 输入分数返回值           | getFenshuWidthFiexd     | 用于输入框内固定小数位         |
| 跳转页面                 | navTo                   |                                |
| 获取系统信息             | sys                     |                                |
| 展示客服                 | showKefu                |                                |
| 文件分享                 | uni.$common.fileShare   |                                |
| 文件预览                 | uni.$common.filePreview |                                |
| 全局唯一标识符           | getUUID                 |                                |

## 接口规范

| 接口           | 描述     | 补充                               |
| -------------- | -------- | ---------------------------------- |
| /findAllByPage | 查询分页 | 【分页列表页】                     |
| /findAllBylist | 查询列表 | 【列表页】                         |
| /findById      | 查询详情 | 【详情页查询】                     |
| /add           | 添加     | 【添加功能】                       |
| /edit          | 修改     | 【修改功能】                       |
| /delByIds      | 删除     | 【删除功能】                       |
| /export        | 导出     | 【导出功能】                       |
| /Import        | 导入     | 【导入功能】                       |
| /download      | 下载     | 【下载】                           |
|                |          |                                    |
| /find*         | 查询*    |                                    |
| /edit*         | 修改*    | 所有修改类格式。例如：editUserName |
| /add*          | 添加*    | 所有添加类格式。例如：addUserName  |

## 文件详解

| 文件                      | 说明                              |
| ------------------------- | --------------------------------- |
| api                       | 接口文件。                        |
| api/api.js                | 公共接口                          |
| colorui                   | colorui样式库                     |
| components                | 组件集合                          |
| components/uni-load-more  | 分页时加载更多。专门为gz-page使用 |
| components/gz-list        | 列表组件。只需传入api名即可。     |
| components/gz-modal       | modal组件。                       |
| components/gz-page        | 列表分页.                         |
| components/gz-upfile-list | 多文件上传组件。                  |
| css                       | 自定义样式                        |
| pages                     | 页面                              |
| pages/index/index         | 首页                              |
| pages/me/me               | 我的页面                          |
| static                    | 静态文件                          |
| subpkg                    | 分包                              |
| subpkg/commons            | 公共页面                          |
| subpkg/commons/fankui     | 反馈页面                          |
| subpkg/commons/login      | 登录页                            |
| subpkg/commons/qa         | 常见问题页                        |
| subpkg/commons/web-show   | URL、HTML统一展示页               |
| subpkg/me                 | 我的页面                          |
| subpkg/me/userinfo        | 个人资料页                        |
| uni_modules               | uni组件库                         |
| uni_modules/mp-html       | 富文本组件                        |
| utils                     | 工具类                            |
| utils/common.js           | 公共工具类                        |
| utils/http.js             | 网络请求工具类.通常用不到         |

## 打包
	安卓-获取sha1：Java/jdk-17/bin/keytool -list -v -keystore gezi.keystore

## 交流群

公众号：格子软件
微信：13716343106
邮箱：1424529270@qq.com

## 参与贡献

闫伟，杨超越，王盼盼