wuye/MicroCommunity: 物业后台 @ 6c8eeb122062cd26dae449554926470d0f0cf842

变更历史

版本	变更内容	变更时间	变更人员
v0.01	初稿	2019-06-17	wuxw

本页内容

主要讲述前段开发步骤。

组件概念

vc组件框架是在WebService服务下的src\resources\components目录下html，js以及组件名+Component.java 文件组成的，主要是通过/vc:create 自定义标签完成的，vc:create 指令原理为将HTML文件和js文件组合成一个文件复制到vc:create/vc:create 的位置，具体可以参考VueComponentElement.java类系统在启动时，将src\resources\components目录下的HTML和js加载到内存中，可以查看VueComponentTemplate.java类，在解析标签时根据name 查找对应的 html和js 将HTML和js 组合在一起，将替换为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参数方法，不包含？号

front.md 5.2 KB Historia Czysty