wanglei

wanglei

项目相关链接

• PRD：
• DEMO：

目录结构

.
├── abc.json  ------------------------- 云构建配置脚本
├── gulpfile.js  ---------------------- gulp入口文件
├── infovmcommon  --------------------- 公用vm模板
├── mock  ----------------------------- 模拟数据
│   ├── ajax-data  -------------------- json数据模拟
│   │   └── demoRpc
│   │       └── search.json
│   ├── demo  ------------------------- vm数据模拟（匹配webx的目录结构）
│   │   └── screen
│   │       └── home.js
│   └── vars.js  ---------------------- vm渲染上下文的全局变量
├── nodewebx-config.js  --------------- nodewebx服务器配置
├── package.json  --------------------- 项目配置
├── README.md  ------------------------ 说明文件
├── src  ------------------------------ 源码目录
│   ├── config.js  -------------------- seajs配置文件
│   ├── css  -------------------------- 样式目录
│   │   ├── colors.css  --------------- 色值样式文件
│   │   ├── dialog.css  --------------- 弹窗样式文件
│   │   ├── fonts.css  ---------------- 字号样式文件
│   │   ├── global.css  --------------- 全局的其他样式文件
│   │   └── index.css  ---------------- 样式文件入口
│   ├── errors  ----------------------- 异常错误码国际化资源文件
│   │   ├── en.js
│   │   └── zh-cn.js
│   ├── i18n  ------------------------- 文案国际化资源文件
│   │   ├── en.js
│   │   └── zh-cn.js
│   └── modules  ---------------------- 模块根目录
│       ├── common.base.module  ------- UI模块的基类
│       │   └── index.js
│       ├── common.errorhandler  ------ 统一异常处理逻辑
│       │   └── index.js
│       ├── common.helpers  ----------- 模板的helper定义
│       │   └── index.js
│       ├── common.setup  ------------- 应用配置文件
│       │   └── index.js
│       ├── component.lightpop  ------- 业务逻辑模块——弱提示弹层
│       │   ├── index.js
│       │   └── testsize.js
│       ├── demo.filter  -------------- 演示模块——查询表单
│       │   ├── i18n  ----------------- 模块内的国际化资源文件
│       │   │   ├── en.js
│       │   │   └── zh-cn.js
│       │   ├── index.css  ------------ 模块样式文件
│       │   ├── index.handlebars  ----- 模块模板文件
│       │   └── index.js  ------------- 模块入口文件
│       ├── demo.list  ---------------- 演示模块——查询结果
│       │   ├── i18n
│       │   │   ├── en.js
│       │   │   └── zh-cn.js
│       │   ├── index.css
│       │   ├── index.handlebars
│       │   └── index.js
│       ├── ui.calendar  -------------- UI模块——日历
│       │   └── index.js
│       ├── ui.checkbox  -------------- UI模块——复选框
│       │   └── index.js
│       ├── ui.select  ---------------- UI模块——下拉框
│       │   └── index.js
│       ├── ui.selectperson  ---------- UI模块——搜人
│       │   ├── i18n
│       │   │   ├── en.js
│       │   │   └── zh-cn.js
│       │   └── index.js
│       └── ui.tip  ------------------- UI模块——小提示
│           └── index.js
└── templates  ------------------------ webx模板目录
    └── demo
        └── templates
            ├── control
            │   └── header.vm
            ├── layout
            │   └── default.vm
            └── screen
                ├── home.vm
                └── loginSuccess.vm

环境准备

具体请参考这里

环境准备妥当之后，把项目clone下来，切换到对应分支即可开始开发。

常用命令

• 开新分支

  开新分支之前请确保当前分支的文件均已经加入版本控制，否则可能丢失

  • 小版本自动递增

  gulp newbranch

  • 指定版本

  gulp newbranch --version 1.1.0

• 启动服务器

gulp server

服务器相关配置在 nodewebx-config.js 中。

• 查看所有可用命令

yo alinw:help

• 更多git命令

Git发布操作流程

Git日常使用技巧

• 打包

gulp

本项目采用云构建，一般情况下请不要打包，直接 push 源码即可

CSS约定

• 每个模块内的样式文件，请使用模块目录名作为内部样式的闭包 class
• kuma 已经默认引入
• src/css 目录下的 css 都是共用资源，已经默认引入

路径规范

• 请使用 uriBroker这个 helper
• 每个项目使用一个 prefix，子目录请在各自模块中定义，不要写到 default.vm 里面去哦
• 用法：

app.set('ebrcPrefix', '${ebrcPrefix}');

{{uriBroker "ebrcPrefix" "selfEvaluation.htm?salaryPlanId={0}" planId}}

公用业务逻辑模块

component.* 是业务逻辑模块

lightpop

弱提示弹层

// 成功提示
Pop.success('操作成功！');

// 失败提示
Pop.error('操作失败！', function() {
    location.reload(true);
});

// 全屏加载蒙层
Pop.loading();

// 清除全屏加载蒙层
Pop.loaded();

dialog

带自动渲染/销毁的dialog

var dialog = new Dialog({
    title: '设置代理人',
    widget: '~/eproject.super.proxy/', // 内容由另一个 widget 来渲染
    params: { // widget 的初始化参数
        value: 1
    },
    onConfirm: function() { // 确定按钮的回调事件
        dialog.hide();
    }
    // onCancel 取消关闭的回调事件
});
dialog.show(); // 显示弹层

公用UI模块

ui.* 是 UI 模块

select

下拉框

<select data-widget="~/ui.select/">
    <option value="CNY">CNY</option>
    <option value="USD">USD</option>
    <option value="HKD">HKD</option>
</select>

selectperson

搜人组件

<input data-widget="~/ui.selectperson/">

tip

小提示

<div data-widget="~/ui.tip/" data-content="提示信息" data-max-width="270" data-html="false"></div>