# Zidjin Std Uniapp

**Repository Path**: zhaoxiangming/zidjin-std-uniapp

## Basic Information

- **Project Name**: Zidjin Std Uniapp
- **Description**: Жидзин（中文：矢争；英文：Zidjin或Zj）标准Uniapp组件库。名字来源于俄语Жить(生活)+один(之一)的组合，寓意：生活很简单，做好属于自己的领域之唯一，就足够了！
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: http://zidjin.hzhuishi.cn/
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2020-12-21
- **Last Updated**: 2023-11-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ht-zidjin-zxm

##  第一章、约束说明

### 一、约束说明

1、

### 二、基础技术知识

1. Vue （需V2.6+）
2. Uniapp （需HBilider V3.0+）
3. Vuex（需HBilider V3.0+）
4. Vue Router
5. Vue Components
6. MVC
7. Message Queue（可选）
8. eslint
9. jsdoc
10. axios

### 三、命名规范

#### 文件命名

| 属类                    | 所在目录                       | 前辍       | 命名法     | 备注 |
| ----------------------- | ------------------------------ | ---------- | ---------- | ---- |
| 页面文件                | src/pages 或 src/views         | 无         | kebab-case |      |
| Vue Components 普通组件 | src/components                 | ht-或其它  | kebab-case |      |
| Vue Components 单例组件 | 页面目录下                     | com-       | kebab-case |      |
| Vuex 状态模块           | src/store/                     | mod- 或 无 | kebab-case |      |
| java script 静态文件    | src/utils/ 或者 src/static/js/ | 视情况决定 | 视情况决定 |      |
| 内置图标                | static/icons                   | icon-      | kebab-case |      |
| 图片                    | static/images                  | 无         | kebab-case |      |

#### 数据类型命名

| 命名法                  | 适用类型                         | 备注 |
| ----------------------- | -------------------------------- | ---- |
| camelCase 驼峰命名法    | 变量、属性、方法、函数、键       |      |
| PascalCase 大驼峰命名法 | 类、组件                         |      |
| kebab-case 烤串命名法   | 样式、信号(emit)、标签属性(prop) | 建议 |
| snake_case 蛇形命名法   | 键、某些需要替代空格的           |      |



### 四、格式规范





##  第二章、组件说明

### zj-uview-form 表单

该组件生成用户表单。实现新建、修改、编辑、查看。

- 基本使用

```
<zj-uview-form />
```

- Props 属性

| 参数     | 说明                      | 类型               | 默认值                      | 可选值 |
| -------- | ------------------------- | ------------------ | --------------------------- | ------ |
| headers  | 数据表头                  | Array[Object, ...] | 见下表                      | 见下表 |
| formData | 生成key-value对象。需sync | Object             | {headers.key:headers.value} | /      |
| onlyRead | 表单只读                  | Boolean            | false                       | true   |

- headers 属性中的字段数据(Item)参数

| 键          | 说明                                                         | 类型          | 必选 | 默认值                                                       | 可选值                                                       |
| ----------- | ------------------------------------------------------------ | ------------- | ---- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| key         | 键名                                                         | String        | 是   | /                                                            | 例："sex"                                                    |
| label       | 标签文字                                                     | String        | 否   | /                                                            | 例："姓名"                                                   |
| type        | 输入类型。                                                   | String        | 否   | text 文本                                                    | number 数字<br />textarea 文本域<br />select 下拉单选<br />checkbox 多选框<br />date 日期区间<br />images 查看/上传图片 |
| value       | 值                                                           | String\|Array | 否   | /                                                            | /                                                            |
| placeholder | 占位文字                                                     | String        | 否   | "请输入文字"或"无"(只读)                                     | /                                                            |
| list        | 可选项。仅当type为select、checkbox时                         | Array         | 否   | [{value: '1',label: '省',<br/>  children: [{<br />    value: '11',label: '市'}, ...]<br/> }, ...] | /                                                            |
| **title**   | 分组标题。不                                                 | String        | 否   |                                                              |                                                              |
| **groups**  | 分组，分组内容是headers属性的迭代。一张表单可以按此字段分组，分组前后空出边距，更为美观。但也导致了数据的”增删改查“变得复杂。 | **headers**   | 否   | /                                                            | /                                                            |
| required    | 是否必填项                                                   | Boolean       | 否   | false                                                        | true                                                         |
| split       | 拆分字符。checkbox时，Array转String的分隔符                  | String        | 否   | /                                                            | /                                                            |
| editable    | 可编辑。如果表单onlyRead为真，全局禁编辑。                   | Boolean       | 否   | true                                                         | false                                                        |
| emit        | 当前字段被改变时，将触发的信号名                             | String        | 否   | /                                                            | /                                                            |
| hide        | 隐藏当前字段                                                 | Boolean       | 否   | false                                                        | true                                                         |

```json
[
    {
        key: 'company_name',
        label: '公司名称',
        type: 'text',
        value: '北京某某科技有限公司',
        placeholder: "请输入公司名称",
        rules: [
            { 
                required: true, 
                message: '请输入姓名', 
                // 可以单个或者同时写两个触发验证方式 
                trigger: ['change','blur'],
            }
        ],
        required: true,
    },
]

```



- Metehods 方法

| 名称   | 说明     | 类型   | 默认值                                      | 可选值 |
| ------ | -------- | ------ | ------------------------------------------- | ------ |
| submit | 提交     |        |                                             |        |
| change | 表单内容 | Object | {headers.key:headers.value}，同formData属性 |        |

- 结构和逻辑

```html
主表单
<zj-uview-form>
	<zj-uview-form-item>
        <zj-uview-xxx>
            <u-xxx/>
        </zj-uview-xxx>
    </zj-uview-form-item>
</zj-uview-form>
```



### muz-item-news 新闻

该组件为数据式Vue组件（data as data）。



### muz-item

该组件为结构式Vue组件（struct as data）。

- 基本使用

```
<muz-item />
```

- Props 属性

| 参数     | 说明                      | 类型               | 默认值                      | 可选值 |
| -------- | ------------------------- | ------------------ | --------------------------- | ------ |
| headers  | 数据表头                  | Array[Object, ...] | 见下表                      | 见下表 |
| formData | 生成key-value对象。需sync | Object             | {headers.key:headers.value} | /      |
| onlyRead | 表单只读                  | Boolean            | false                       | true   |

- headers 属性中的字段数据(Item)参数

| 键    | 说明     | 类型          | 必选 | 默认值 | 可选值     |
| ----- | -------- | ------------- | ---- | ------ | ---------- |
| key   | 键名     | String        | 是   | /      | 例："sex"  |
| label | 标签文字 | String        | 否   | /      | 例："姓名" |
| value | 值       | String\|Array | 否   | /      | /          |

限定性：1、组件限于展示，不处理复杂逻辑，但有信号事件。2、

```json
{
    "lead": {
        "cover": {
            "url": "http://...jpg",
            "hot": "精华",
        },
        "avator": {
            "url": "http://...jpg",
            "sex": 1, //男1，女2，未知0
            "crown": "http://...svg",
            "is_vip": true, 
        },
		//每个item_bar使用flex-between布局
        "bars": [
        	{
                "align": "between/left/right/top/bottom",
                "list":[
                    //元素为一个atom
                    {
                        "icon": "./icon-author.svg",
                        "text": "张三",
                        "type": "author/five-star/price/likes/comments/title/summary/description/tags/button/unread",
                        "list": ["圣诞节","黄河","刘书记"],
                        "unit": "元",
                        "emit": ""
                    },
                ]
            }
        ]
    },
    "bar": {
        "list": [
            //元素为一个atom
            {
                "icon": "./icon-author.svg",
                "text": "张三",
                "type": "author/five-star/price/likes/comments/title/summary/description/tags/button/unread",
                "list": ["圣诞节","黄河","刘书记"],
                "unit": "元",
                "emit": ""
            },
        ]
    },
	//以滚动式展示的图片
	"swiper": {
        "autoplay": true,
        "list": [
            //keyname应与element相同
            {"text": "风景1", img: "http://x.xx.jpg", "url":"http://baidu.com"}, 
        ]
    },
	//以九宫格式展示的图片
	"sudoku": {
        "list": [
            {"text": "风景1", img: "http://x.xx.jpg"},
        ]
    },
	//以竖铺式展示的图片
	"photos": {
        "list": [
            {"text": "风景1", img: "http://x.xx.jpg"},
        ]
    },
	//以视频式展示的图片
	"video": {
        "url":"http://..x.url",
        "danmuku": [{"text": "红色走一波", "timestamp": 74848}, ],//弹幕
    },
	//以富文本展示的文章
	"alltext": {
        "text":"<p>...</p>",
    },
}
```

- 区别和限定

  根对象（muz-item-piece-xxx）：也是节点对象（树叶），以对象名为类型名，其属性对应组件的props。

  lead对象（muz-item-lead）：一种复合对象，其内结构与根对象概念相同。

  bars对象（muz-item-atom-xxx）：陈列数组，数组的每个元素可以是数组（树枝），也可以是节点对象

  特殊对象











### muz-item-atom





## 第末章、其它说明





#### [list](https://uniapp.dcloud.io/component/list?id=list)

app端nvue专用组件。在app-nvue下，如果是长列表，使用list组件的性能高于使用view或scroll-view的滚动。原因在于list在不可见部分的渲染资源回收有特殊的优化处理。

原生渲染的资源回收机制，与webview渲染不同。webview不需要数据有规则格式，长页面处于不可视的部分，其渲染资源会自动回收，除非webview使用区域滚动而不是页面滚动。所以vue页面只要不用scroll-view，就不需要关注这个问题。而原生渲染则必须注意。

**如果需要跨端，建议使用uni-ui的uni-list组件，它会自动处理webview渲染和原生渲染的情况，在app-nvue下使用list组件，而在其他平台则使用页面滚动。详见https://ext.dcloud.net.cn/plugin?id=24**