WebApp【公共组件库】@前端(For Git Submodule)
Tevin
2025-03-07 2f2be05b8caedd31bfd9d68110ea8c1267971f03
知识库,优化文案
5 files modified
74 ■■■■■ changed files
@framework/101-工程介绍.md 41 ●●●● patch | view | raw | blame | history
@framework/102-开发规范.md 10 ●●●●● patch | view | raw | blame | history
@framework/201-请求层基类Fetcher.md 15 ●●●● patch | view | raw | blame | history
@framework/202-数据控制层基类Pilot.md 6 ●●●● patch | view | raw | blame | history
@framework/210-公共工具箱Tools.md 2 ●●● patch | view | raw | blame | history
@framework/101-工程介绍.md
@@ -6,16 +6,15 @@
  - [工程目录结构](#工程目录结构)
    - [短路径映射](#短路径映射)
  - [页面构成](#页面构成)
    - [页面拆分](#页面拆分)
      - [数据控制层写法](#数据控制层写法)
  - [新页面示例](#新页面示例)
    - [界面层](#界面层)
      - [H5 空白界面示例](#h5-空白界面示例)
      - [小程序空白界面示例](#小程序空白界面示例)
      - [空白样式文件示例](#空白样式文件示例)
    - [数据控制层](#数据控制层)
      - [空白数据控制层示例](#空白数据控制层示例)
      - [空白请求层示例](#空白请求层示例)
    - [界面层和数据控制层的拆分](#界面层和数据控制层的拆分)
  - [新页面模板](#新页面模板)
    - [界面层空白模板](#界面层空白模板)
      - [H5 空白界面模板](#h5-空白界面模板)
      - [小程序空白界面模板](#小程序空白界面模板)
      - [空白样式文件模板](#空白样式文件模板)
    - [数据控制层空白模板](#数据控制层空白模板)
      - [数据控制器空白模板](#数据控制器空白模板)
      - [请求集空白模板](#请求集空白模板)
## 工程介绍
@@ -84,12 +83,12 @@
    -   数据控制层(root/src/pilots/pilotsGroup/PName.js)
        -   请求层(root/src/fetchers/FName.js)
### 页面拆分
### 界面层和数据控制层的拆分
一个业务页面的界面层和数据控制层,实际上是对一个 Vue 组件的拆分,最终运行的时候,还是会合二为一,还原成原本的 Vue 实例  
因此,数据控制层其实是对这个 Vue 实例部分功能的一种转写,类似于语法糖
#### 数据控制层写法
**数据控制层写法**
例如:
@@ -131,13 +130,13 @@
更多细节,请参照《数据控制层基类Pilot》
## 新页面示例
## 新页面模板
新建页面时,页面初始内容,可参考如下空白示例
新建页面时,页面初始内容,可参考如下空白模板
### 界面层
### 界面层空白模板
#### H5 空白界面示例
#### H5 空白界面模板
H5 界面需要 CPage、CContent、CNavBar 这三个基础页面组件
@@ -177,7 +176,7 @@
</script>
```
#### 小程序空白界面示例
#### 小程序空白界面模板
```html
/**
@@ -207,7 +206,7 @@
</script>
```
#### 空白样式文件示例
#### 空白样式文件模板
```css
/**
@@ -220,9 +219,9 @@
.page-name {}
```
### 数据控制层
### 数据控制层空白模板
#### 空白数据控制层示例
#### 数据控制器空白模板
```js
/**
@@ -266,7 +265,7 @@
说明:请求异常由请求层的基类自动处理,数据控制层跳过错误的逻辑,只处理请求成功的后续业务
#### 空白请求层示例
#### 请求集空白模板
```js
/**
@framework/102-开发规范.md
@@ -181,7 +181,7 @@
```
**事件变量用 evt**  
事件 event 的简写,必须是 evt(不能用单字面 e )
事件 event 的简写,必须是 evt(不能用单字母 e )
```html
<view @tap="evt => onOrderClick(evt)"></view>
@@ -189,7 +189,7 @@
```
**报错信息用 err**  
报错 error 的简写,必须是 err(不能用单字面 e )
报错 error 的简写,必须是 err(不能用单字母 e )
```js
Taro.request({
@@ -335,8 +335,10 @@
#### 模版中的函数调用
模版中调用函数,必须显式的书写 evt 变量和箭头函数,即: `evt => null`
模版中调用函数,必须显式的书写 evt 变量和箭头函数,即: `evt => fncName()`
我们把 Taro 自身组件视为普通元素,元素绑定事件使用 `@tap` 的方式,非元素皆是组件,组件使用 `:onClick` 的方式绑定
例如:
```html
<view @tap="() => onOpenOrderDetail()"></view>
<CMenu :onItemClick="evt => onMenuItemClick(evt)" />
@@ -344,7 +346,7 @@
### CSS 属性顺序
按顺序如下:
为了避免 css 属性写重复,请按如下顺序书写:
* **文档流属性**  
    display, position, float, clear, visibility, table-layout 等
@framework/201-请求层基类Fetcher.md
@@ -13,7 +13,8 @@
## 功能说明
类 Fetcher 是一个用于处理 HTTP 请求的基类,包含了多种方法来简化和统一请求的处理,请求层的每个请求集,都必须继承此类
类 Fetcher 是一个用于处理 HTTP 请求的基类,包含了URL拼接、响应数据适配、报错提示等多种方法来简化和统一请求的处理
请求层的每个请求集,都必须继承此类
## 引用方法
@@ -170,8 +171,16 @@
## 请求调用
请求层的每一个请求集,都会实例化自身作为全局单例(数据控制层无需再示例化)
比如说,请求集 FCommon 会实例化自身为 $fetchCommon
请求层的每一个请求集,都会实例化自身作为全局单例,使用时,只需引用已经实例化好的全局单例,直接发请求即可
```js
import { Fetcher } from '@components/bases/Fetcher';
class FCommon extends Fetcher {}
// 全局单例
export const $fetchCommon = new FCommon();
```
```js
import {
@framework/202-数据控制层基类Pilot.md
@@ -13,7 +13,11 @@
## 功能说明
类 Pilot 是数据控制层的基类,用于将一个 Vue 对象的部分功能拆分出来独立申明后再合并回去,每个数据控制器都需要基础此类
Pilot 是数据控制层的基类
- 将 Vue 对象的数据绑定、方法绑定、生命周期等功能拆分出来,进行独立申明(拆分后界面层管显示,数据控制层管数据流转)
- 增加跨页通讯、键名转换等相关的能力
- 每个数据控制器都需要继承此类
- 子类实例化后,再将申明的内容合并回去
## 引用方法
@framework/210-公共工具箱Tools.md
@@ -11,7 +11,7 @@
## 功能说明
用于处理各种常见的编程任务的工具箱
Tools 是一个工具类,是一个处理类型判断、字符格式化等各种常见的编程任务的工具箱,它所有的方法都是静态方法
## 引用方法