@framework/101-工程介绍.md | ●●●●● patch | view | raw | blame | history | |
@framework/102-开发规范.md | ●●●●● patch | view | raw | blame | history | |
@framework/201-请求层基类Fetcher.md | ●●●●● patch | view | raw | blame | history | |
@framework/202-数据控制层基类Pilot.md | ●●●●● patch | view | raw | blame | history | |
@framework/210-公共工具箱Tools.md | ●●●●● 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 是一个工具类,是一个处理类型判断、字符格式化等各种常见的编程任务的工具箱,它所有的方法都是静态方法 ## 引用方法