|
|
@@ -0,0 +1,169 @@
|
|
|
+### 变更历史
|
|
|
+版本|变更内容|变更时间|变更人员
|
|
|
+:-: | :-: | :-: | :-:
|
|
|
+v0.01|初稿|2019-06-17|wuxw
|
|
|
+
|
|
|
+### 本页内容
|
|
|
+
|
|
|
+主要讲述前段开发步骤。
|
|
|
+
|
|
|
+## 组件概念
|
|
|
+
|
|
|
+vc组件框架是在WebService服务下的src\resources\components目录下html，js以及组件名+Component.java 文件组成的，主要是通过<vc:create name="listDemo"></vc:create>
|
|
|
+自定义标签完成的，<vc:create> 指令原理为将HTML文件和js文件组合成一个文件 复制到<vc:create></vc:create> 的位置，具体可以参考VueComponentElement.java类
|
|
|
+系统在启动时，将src\resources\components目录下的HTML和js加载到内存中，可以查看VueComponentTemplate.java类，在解析<vc:create name="abc"> 标签时根据name 查找对应的
|
|
|
+html和js 将HTML和js 组合在一起，将<vc:create name="abc">替换为html和js组合的内容。
|
|
|
+
|
|
|
+
|
|
|
+## 流程页面
|
|
|
+
|
|
|
+流程页面，如：地址https://demo.java110.com/flow/ownerFlow 中ownerFlow 就叫为一个流程页面，它存放在src\resources\view目录下
|
|
|
+流程页面中包含，页面基本框架 菜单，头部导航栏，尾部版权栏等，中间为组件信息，公用js和css 引入。必须以Flow结尾，如demoFlow.html
|
|
|
+
|
|
|
+
|
|
|
+## vue对象vc.component
|
|
|
+
|
|
|
+vc.component 其实就是一个vue对象，在页面加载最后去创建，页面组件中只存在一个vue对象，也就是多个组件公用一个vue对象，是用vc.extends()方法去继承
|
|
|
+vue对象，extends参数介绍如下：
|
|
|
+
|
|
|
+```
|
|
|
+vc.extends({
|
|
|
+ propTypes: {
|
|
|
+
|
|
|
+ },
|
|
|
+ data:{
|
|
|
+
|
|
|
+ },
|
|
|
+ watch:function(){
|
|
|
+ },
|
|
|
+ _initMethod:function(){
|
|
|
+
|
|
|
+ },
|
|
|
+ _initEvent:function(){
|
|
|
+
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+
|
|
|
+ }
|
|
|
+ });
|
|
|
+```
|
|
|
+
|
|
|
+### propTypes节点
|
|
|
+
|
|
|
+组件参数，一般情况下这个节点可以不用写，只有 引入组件时，需要传参时，才会用到。
|
|
|
+
|
|
|
+### data节点
|
|
|
+
|
|
|
+data节点就是vue的data节点用作数据绑定，data下的最好是一个对象，对象名取名为当前组件名+info组成，对象下再去写需要绑定的字段信息，这样做的目的是为
|
|
|
+多个组件之间取相同的字段名称 导致影响显示效果。
|
|
|
+
|
|
|
+### watch节点
|
|
|
+
|
|
|
+watch节点为 vue的watch节点
|
|
|
+
|
|
|
+### _initMethod节点
|
|
|
+
|
|
|
+组件在加载时执行的代码可以放到这里，访问data下变量或method下的方法时必须 加入前缀 vc.component. 例如访问loadData方法时，vc.component.loadData()。
|
|
|
+
|
|
|
+### _initEvent 节点
|
|
|
+
|
|
|
+组件在加载时 做事件监听用，访问data下变量或method下的方法时必须 加入前缀 vc.component. 。
|
|
|
+
|
|
|
+
|
|
|
+### methods 节点
|
|
|
+
|
|
|
+等同于 vue 的method，各个组件的方法名建议不要一直，防止冲突，访问data下变量或method下的方法时必须 加入前缀 vc.component. 。
|
|
|
+
|
|
|
+## 组件之间通信
|
|
|
+
|
|
|
+组件通信主要用 监听方法 vc.on(componentName,businessAction,function(_param){}); 和 触发方法vc.emit(componentName,businessAction,_param);
|
|
|
+
|
|
|
+### vc.on 方法
|
|
|
+
|
|
|
+componentName 当前组件名 如listDemo businessAction 业务动作 loadData, function(_param){} 再监听到事件后触发函数
|
|
|
+
|
|
|
+### vc.emit方法
|
|
|
+
|
|
|
+componentName 要触发的方法的组件名，要出发businessAction 业务动作，_param 传递参数，以对象的方式传递
|
|
|
+
|
|
|
+## 组件传参
|
|
|
+
|
|
|
+当一个组件被多个页面引用时，当组件处理完业务时，将结果传递给父组件，这样就引入一次组件就得在触发的地方多加一个触发情况，比较麻烦，测试我们引入组件参数
|
|
|
+
|
|
|
+```
|
|
|
+ propTypes: {
|
|
|
+ emitChooseOwner:vc.propTypes.string
|
|
|
+ },
|
|
|
+```
|
|
|
+
|
|
|
+将触发的父组件名称通过参数 emitChooseOwner 传入进来，如
|
|
|
+
|
|
|
+```
|
|
|
+ <vc:create name="listDemo"
|
|
|
+ emitChooseOwner="parentComponent"></vc:create>
|
|
|
+
|
|
|
+```
|
|
|
+
|
|
|
+在组件中使用时，用$props.emitChooseOwner 方式使用，也就是在变量之前加入 $props. 如：
|
|
|
+
|
|
|
+```
|
|
|
+ vc.emit($props.emitChooseOwner,'chooseOwner',_owner);
|
|
|
+
|
|
|
+```
|
|
|
+
|
|
|
+## vc 组件提供函数
|
|
|
+
|
|
|
+### vc.http.post方法
|
|
|
+
|
|
|
+vc.http.post(componentCode,componentMethod,param,options,successCallback,errorCallback); http post 异步请求方法
|
|
|
+
|
|
|
+componentCode 一般为当前组件名 是java组件的beanId
|
|
|
+
|
|
|
+componentMethod 为组件中方法名
|
|
|
+
|
|
|
+param 为post的参数
|
|
|
+
|
|
|
+options 为 默认传 { emulateJSON:true } 对象
|
|
|
+
|
|
|
+successCallback 成功时的回调函数
|
|
|
+
|
|
|
+errorCallback 失败时的回调函数
|
|
|
+
|
|
|
+### vc.http.get方法
|
|
|
+
|
|
|
+vc.http.get(componentCode,componentMethod,param,successCallback,errorCallback); http get 异步请求方法
|
|
|
+
|
|
|
+componentCode 一般为当前组件名 是java组件的beanId
|
|
|
+
|
|
|
+componentMethod 为组件中方法名
|
|
|
+
|
|
|
+param 为get的参数
|
|
|
+
|
|
|
+successCallback 成功时的回调函数
|
|
|
+
|
|
|
+errorCallback 失败时的回调函数
|
|
|
+
|
|
|
+### vc.jumpToPage方法
|
|
|
+
|
|
|
+vc.jumpToPage(url) 为页面跳转方法
|
|
|
+
|
|
|
+url为跳转页面的地址 如跳转到业主页面则 写 /flow/ownerFlow
|
|
|
+
|
|
|
+### vc.getCurrentCommunity 方法
|
|
|
+
|
|
|
+vc.getCurrentCommunity(); 获取当前菜单方法，返回值为如 {"communityId":"123213","name":"测试小区"}
|
|
|
+
|
|
|
+### vc.copyObject方法
|
|
|
+
|
|
|
+vc.copyObject(org,dst);将org 对象中属性拷贝到 dst对象中属性相同的属性值
|
|
|
+
|
|
|
+### vc.getParam 方法
|
|
|
+
|
|
|
+vc.getParam(_key); 获取当前地址栏上的参数值
|
|
|
+
|
|
|
+### vc.objToGetParam 方法
|
|
|
+
|
|
|
+vc.objToGetParam(obj); 对象转为get参数方法，不包含？号
|
|
|
+
|
|
|
+
|
|
|
+
|
wuxw