1.0.0 • Published 9 years ago
wanglei v1.0.0
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命令
- 打包
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>
1.0.0
9 years ago