Zen Framework 1.0

Appearance

四、前端函数 ​

1. 请求函数 ​

  • zen 框架所有请求都以 post 形式发送，$.get只是$.post 的别名，提升代码可读性

  • $.post(config,context)

  • 用例: $.post({url:String,data:Object})

  • 请求函数的异常处理，统一层默认做了处理，无需 then 捕获，统一用 await 获取返回值

1.1 ajax请求： ​

ajax 基础配置说明 ​

属性名说明类型默认值枚举值
url请求接口地址String--
encrypt参数是否加密Boolean--
data请求数据Object--
file上传文件FileItem--
success自定义成功回调Function入参：ZenResult
fail自定义异常回调Function入参：Error-

ajax 的上下文参数 context ​

vue 上下文对象，非必填参数，配置后会根据上下文控制请求重复提交，手写请求建议填写

1.2 Websocket 请求 ​

后端实现 IWebsocketHandle 接口后，即可开启 websocket 类型请求

请求函数 $.ws(type:String, data:Object, callback:Function, timeout=6000)

属性名说明类型默认值枚举值
data消息数据Object--
listener服务器端消息推送监听器Function--

使用举例：const result = await $.ws('test',{data:'hello'})

1.3 SSE 大模型事件驱动请求 $.sse(data:Object, listener: Function) ​

使用举例：$.sse({mode:11}, (result)=>{ console.log(result) })

2. 消息函数 ​

2.1 $.fail(message:String) ​

  • 函数别名：$.error(message:String)

  • 失败消息提示

2.2 $.success(message:String) ​

  • 成功消息提示

2.3 $.loading(message:String) ​

  • 加载状态消息

  • 返回 Element UI 的 loading 对象，加载完成后，需要调用 loading.close() 函数关闭

2.4 $.confirm(message：String,okFunc:Function,cancelFunc:Function) ​

  • 二次确认消息，无线场景下 cancelFunc 无取消函数时，不显示取消按钮
属性名说明类型默认值枚举值
message消息内容String--
okFunc确认后回调函数Function必填-
cancelFunc取消后回调函数Function选填-

3. 常用函数 ​

3.1 异步资源加载 ​

  • 用 await 等待资源加载完成

  • $.lib(resources:Array) ：加载 lib 目录下资源

  • $.resource(resources:Array) ：加载外部资源

3.2 全局事件总线 ​

  • $.on(eventName:String,callback:Function) 全局事件监听

  • $.emit(eventName:String,...args) 触发事件

  • $.once(eventName:String,callback:Function) 只监听一次事件

  • $.off(eventName:String) 卸载事件

3.3 科学计算 ​

  • $.calc(num1, numb2, "+") 加法运算

  • $.calc(num1, numb2, "-") 减法运算

  • $.calc(num1, numb2, "*") 乘法运算

  • $.calc(num1, numb2, "/") 除法运算

3.4 节流与抖动函数 ​

  • $.throttle(callback:Function,delay=400) 节流函数

  • $.debounce(callback:Function,delay=400) 抖动函数

3.5 $.print(dom:Element, title:String) ​

  • 扩展 configs 配置

3.6 $.wxApi(apiName:String|Array, options:Object, isDebug:Boolean) ​

3.7 await $.scan(scanType = ['qrCode']) ​

  • 基于微信授权的二维码，条形码扫码函数

3.8 await $.camera(target?:string) ​

  • 基于微信授权的手机拍照函数，照片自动上传到服务器，返回图片 URL 链接

3.9 $.color(rgb:string) ​

3.10 await $.sucker(imageURL?:string) ​

  • 采集图片基础信息，包含图片尺寸，主颜色，次颜色，边缘背景色等信息

3.11 $.huedisc({color=zen.color, count = 6, alpha = 0.85, hueRange = 210}) ​

  • 邻近色盘生成器 color 基础色，count 生成个数，alpha 颜色透明度,hueRange 相邻角度

3.12 $.extend(configs:Object, entitys:Object) ​

  • 数据 schema 扩展，自定义模型对象

  • 举例： $.extend(configs, { 'number': { document: 3, type: 'autoid' } })

  • 给 number 字段添加 document 属性和指定类型

3.13 $.getParams(url:String) ​

  • 获取 url 中的 queryString

3.14 $.dayjs(date:Date) ​

  • 返回高阶的 dayjs 对象

3.15 $.omit(target:Object,attrs:Array) ​

  • 创建减化对象

3.16 $.uid() ​

  • 创建随机 ID 字符串

3.17 $.confrim(message:String,callback:Func) ​

  • 二次确定对话框

3.18 $.toCanvas(el:Element,options:Object) ​

  • 基于 html2canvas 的图片生成函数

  • 使用 await 调用，返回一个 canvas 对象

  • 通过 canvas.toDataURL("image/png")转成图片

  • 举例：const canvas = await $.toCanvas(this.$el)

3.19 $.open(url:String) ​

  • 打开新链接

3.20 $.cookie(name:String,value:String) ​

  • 获取或设置本地 cookie

3.21 $.token() ​

  • 获取登录 token 信息

3.22 $.nick(userId) ​

  • 获取指定用户的昵称

3.23 $.gotoLogin() ​

  • 跳转到登录页面

3.24 zen.setup({ com: App, routes, dict,components,autoMounted=true }) ​

  • 创建应用实例，返回 vue instance 和 root dom 对象

3.25 zen.path(filePath) ​

  • 获取环境中的资源路径，不加载资源