Hello World

步骤

以下为Web项目页面开发中的步骤说明

1. 在码云注册个人帐户并设置好ssh公钥，并将用户名发给管理员。具体操作见文档。
2. 准备好开发环境
3. 拉取管理员创建好的项目,命令为git clone git@gitee.com:daokes/helloworld.git
4. 下载项目依赖包yarn
5. 运行测试命令npm t
6. 完成页面、组件、和服务开发
7. 合并&提交代码

以下为服务开发的步骤说明

1. 同页面开发步骤1,2,3,4
2. 运行测试命令npm t
3. 服务代码开发
4. 服务调(测)试
5. 合并&提交代码

注 开发推荐Chrome浏览器

名词解释

项目目录结构说明

• .vscode
  • launch.json vscode 配置文件
• css
  • daokes.css 项目自定义样式文件
  • iconfont.css 项目所用文字图标文件
• dist
  • * 源码构建后的文件
• images
  • * 项目中使用到的静态图片文件
• pages
  • * 项目中使用到的静态页面文件
• service
  • del.js 删除服务
  • test.js 服务测试
  • tsconfig.json 配置文件
  • src
    • * 服务代码
• src
  • atom
    • * 通用原子操作
• feidao.json 测试服务使用的配置文件
• src
  • @page 页面代码，每个页面为一个目录，使用页面名字英文名，如user,detail等
    • html.ts 页面html代码
    • n.ts 页面服务端入口,n表示Node.js,下同
    • ns.ts 页面服务端事件响应对照关系
    • nb.ts 页面服务端入口（开发模拟服务端操作）
    • nbs.ts 页面服务端事件响应对照关系（开发模拟服务端操作）
    • na001.ts 页面服务端响应,001为三位顺序编码
    • b.ts 页面浏览器端入口,b表示Browser，下同
    • s.ts 页面浏览器端事件响应对照关系
    • a001.ts 页面浏览器端响应,001为三位顺序编码
  • @component 组件代码，每个组件为一个目录，命名规则zj-@page-001 @page为组件所在的页面名称，如果为公用的组件，@page为common,001为三位顺序编码
    • n.ts 组件服务端入口，只能用于处理初始化渲染页面及页面逻辑跳转等逻辑。
    • ns.ts 组件服务端事件响应对照关系
    • na001.ts ,001为三位顺序编码
    • nb.ts 组件服务端入口（开发模拟服务端操作）
    • nbs.ts 组件服务端事件响应对照关系（开发模拟服务端操作）
    • nba001.ts 组件服务端响应,001为三位顺序编码
    • b.ts 组件浏览器端入口，只能用于处理页面事件逻辑
    • s.ts 组件浏览器事件响应对照关系
    • a001.ts 组件浏览器端响应,001为三位顺序编码

详细说明

项目分为开发模式和发布模式

开发模式

• 组件划分
  • 根据页面布局划分，例如：页头和页尾
  • 根据功能划分，例如：列表和详情
• 页面代码执行顺序
  • [@page][nb]文件
  • [@component][nb]文件
  • [@page][b]文件
  • [@component][b]文件
• 页面
  • nb文件
    • 引入组件，页面的nb文件只能引入@component的nb文件。例如：import zj001 from '../zj-h5manage-001/nb'，若有多个组件则依次引入。
    • 引入响应文件，即要执行的内容；例如：import nba001 from './nba001'，若有多个响应则依次引入，nb文件引入的响应必须是nba开头的文件。
    • 将引入的响应存入要执行的JS对象daoke中，例如：const daoke = { nba001 };，若有多个响应则依次存入，需注意***；
    • 将引入的组件在页面初始化时进入载入并初始化，例如：const params = await init(html, url, s, daoke, zj001);，init函数的前5个参数为固定参数，若有多个组件则依次传入init函数。
  • nbs文件
    • nbs文件存储是nb文件的所有的事件，例如："fd-events-init": ["nba001"]
    • 事件fd-event-init为固定事件，并在页面初始化时框架会调用此事件；事件对应的值为响应数组，数组中有多个响应的话会依次执行；响应的名称必须和3中daoke的key值保持一致。
  • b文件
    • 引入组件，页面的b文件只能引入@component的b文件。例如：import zj001 from '../zj001/b';,若有多个组件则依次引入。
    • 引入响应文件，即要执行的内容；例如：import a001 from './a001';，若有多个响应则依次引入，b文件引入的响应必须是a开头的文件。
    • 将引入的响应存入要执行的JS对象daoke中，例如：const daoke = { a001 };，若有多个响应则依次存入，需注意***；
    • 将引入的组件在页面初始化时进入载入并初始化，例如：await init(s, daoke, zj001, zj002, _zj_common_001, _zj_common_002);，init函数的前3个参数为固定参数，若有多个组件则依次传入init函数。
  • s文件
    • s文件存储是b文件的所有的事件，例如："fd-events-init": ["a001"]
    • 事件fd-event-init为固定事件，并在页面初始化时框架会调用此事件；事件对应的值为响应数组，数组中有多个响应的话会依次执行；响应的名称必须和3中daoke的key值保持一致。
  • html文件
    • html文件内容为展示页面的body内容。例如：`<div data-feidao-type=”zj001” id=”zj001” data-feidao-actions=”ec-001:ec-001” data-feidao-force-visible=true class=”bg-black-rgba6 ht100-per w100-per pos-f pos-t0 pos-l0 display-n” style=”z-index:101;”>
    提示

    </i">删除后不可恢复，是否确认删除？</div>

    </div></div>` - 组件的绑定，组件是在`html`中进行绑定的，使用的是自定义属性`data-feidao-type`，属性的值即组件的编号需和`4.1.3`和`4.3.4`中组件初始化传入的组件编号保持一致。 - 框架为使页面显示效率提高，只初始化可视区域内的组件，不在可视区域内的组件只有处在可视区域内是才进行初始化；但在开发过程中，组件A已初始化完成，组件B暂未初始化，A需要调用B组件进行显示，这时就需要将组件B进行强制性初始化，使用自定义属性`data-feidao-force-visible=true` - 事件的绑定，组件中所有的事件是通过自定义属性`data-feidao-actions`绑定的。 - 用户事件绑定，自定义属性的值为`click:eu-001`可绑定多个用户事件，使用`,`分隔即可。事件名可以是`html`所有的用户事件名，事件名对应的值为事件编号，对应`4.4`中的key值。 - 调用事件，调用事件是在组件节点上绑定的，例如：`data-feidao-actions="ec-001:ec-001"`
• 组件
• nb文件
  • 引入响应文件，即要执行的内容；例如：import nba001 from './nba001';’，若有多个响应则依次引入，nb文件引入的响应必须是nba开头的文件。
  • 将引入的响应存入要执行的JS对象daoke中，例如：const daoke = { nba001 };，若有多个响应则依次存入，需注意***；
  • 组件初始化，例如：return init('zj-h5manage-001', s, feidao, daoke, html, url, query);，调用初始化方法中只有第一个参数随着不同的组件也变化，值为组件的编号，需注意***；其他参数为固定值。
• nbs文件
  • nbs文件存储是nb文件的所有的事件，例如："fd-events-init": ["nba001"]
  • 事件fd-event-init为固定事件，并在页面初始化时框架会调用此事件；事件对应的值为响应数组，数组中有多个响应的话会依次执行；响应的名称必须和4.1.2中daoke的key值保持一致。
• b文件
  • 入响应文件，即要执行的内容；例如：import a001 from './a001';，若有多个响应则依次引入，b文件引入的响应必须是a开头的文件。
  • 引入控件文件，若此组件中使用了控件。例如：import '@feidao/widgets/w-000009';， 若有多个控件则依次引入。
  • 将引入的响应存入要执行的JS对象daoke中，例如：const daoke = { a001 };，若有多个响应则依次存入，需注意***；
  • 组件初始化，例如：return init('zj-h5manage-001', s, feidao, daoke, url, query);，调用初始化方法中只有第一个参数随着不同的组件也变化，值为组件的编号，需注意***；其他参数为固定值。
• s文件
  • s文件存储是b文件的所有的事件，例如："fd-events-init": ["a001"],"eu-001": ["a002"]；多个事件的话则按照这种格式添加。
  • 事件fd-event-init为固定事件，并在页面初始化时框架会调用此事件；事件对应的值为响应数组，数组中有多个响应的话会依次执行；响应的名称必须和4.3.2中daoke的key值保持一致。

发布模式

在服务器上执行服务端代码，发布模式和开发模式区别为n文件和nb文件，n文件为服务端执行的代码，nb文件为客户端模拟服务端执行的代码

• 页面
• n文件
  • 引入组件，页面的n文件只能引入@component的n文件。例如：import zj001 from '../zj-h5manage-001/n'，若有多个组件则依次引入。
  • 引入响应文件，即要执行的内容；例如：import na001 from './na001'，若有多个响应则依次引入，n文件引入的响应必须是na开头的文件。
  • 将引入的响应存入要执行的JS对象daoke中，例如：const daoke = { na001 };，若有多个响应则依次存入，需注意***；
  • 将引入的组件在页面初始化时进入载入并初始化，例如：const params = await init(html, url, s, feidao, daoke, zj001);，init函数的前5个参数为固定参数，若有多个组件则依次传入init函数。
  • 页面头部信息，例如： ```js const html_str = `<!DOCTYPE html>
  ${html.toString()}

  </html>; `` 输入当前页面的title，并修改引入的当前页面的js文件名称。

• ns
  • ns文件存储是n文件的所有的事件，例如：'fd-server-check': [],'fd-events-init': ['na001']
  • 事件fd-event-init为固定事件，并在页面初始化时框架会调用此事件；事件对应的值为响应数组，数组中有多个响应的话会依次执行；响应的名称必须和4.1.2中daoke的key值保持一致。
  • 事件fd-server-check为检查事件，若此页面无需权限检查可不写此事件或者事件没有对应的响应。
• 组件
• n文件
  • 引入响应文件，即要执行的内容；例如：import na001 from './na001'，若有多个响应则依次引入，n文件引入的响应必须是na开头的文件。
  • 将引入的响应存入要执行的JS对象daoke中，例如：const daoke = { na001 };，若有多个响应则依次存入，需注意***；
  • 引入tpl文件，例如import p001 from './@p';
  • 组件初始化，例如：const params = await initinit('@component', s, daoke, html, url, query);，init函数的参数只需修改第一个参数即可，参数值为当前组件的编号，例如：zj-h5manage-001，组件编号需和页面定义的组件编号保持一致。