guiplan官网

生成静态页面


如果我们选择的是无框架或bootstrap框架,这边存储的文件类型为静态html文件。
软件会自动将html,js,css,图片 自动存放好,代码也自动引用好。几乎不需要做任何操作一键就能快速搭建一个静态页面。

保存页面

每次修改会自动保存,也可以直接点击保存或用快捷键ctrl + s进行保存。




每个文件(html,js,css)都可以进行更换存储位置,并且html引用文件代码也会自动更新。




点击文本框可以修改这些文件的存储位置



打开文件


点击打开文件可以打开所选文件的源代码



vue项目则是直接打开vue源代码进行混合开发


多语言支持


除了保存html格式的文件以外,也可以保存其他格式。比如php,jsp,asp,py等。
也可以直接可视化嵌套其他语言的脚本代码。也就是选择html存储位置的时候可以自己

输入文件格式。如下图

预览页面


如果你是设计师,产品经理,前端开发小白只是想做一个简单的展示型网页或只是想做一个漂亮静态页面,我们完全可以不用框架制作静态页面线上预览即可

预览器介绍

预览器其实就相当于浏览器,guiplan2.0之前有编辑区域与预览区域但由于编辑区与预览区的实际效果相差太大。

所以guiplan2.0之后将编辑区域与预览区域合二为一,也就是说我们的软件预览效果其实就是页面的渲染之后的真实效果。

预览区的页面无论是静态页面还是vue编译之后的页面,我们都可以进行可视化操作。

它与传统的浏览器不同的是,我们都知道浏览器调试工具调试之后的代码需要复制粘贴才能使用,还需要频繁的去切换浏览器与编辑器。而我们可以直接去可视化编辑去修改所选元素。

如下图所选元素,预览区域有红色边框与灰色阴影标记,最右边则会显示该元素的所有属性,其中包括样式,vue交互,以及元素属性。
我们可以直接去可视化修改,页面会同步更新,代码会自动生成。


同样的我们还支持调试工具,点击下图调试图标即可打开调试工具,我们将彻底摆脱了浏览器的调试


线上预览

只需要点击线上地址。

(图1)
就可以预览线上的静态页面,线上页面支持vue的交互,比如双向绑定,点击事件,循环指令等。
但要注意的是线上预览不支持vue框架里的组件渲染,比如uniapp里的view标签,uni-input标签,element-ui里的el-button标签,el-input标签等

所以如果是做vue项目最好选择本地预览。


实时刷新

静态页面点击上图线上预览右边的实时刷新,开启实时刷新之后,每次修改都会刷新页面,如果没开启,则需要手动点击刷新才能看到实际效果


本地预览

本地预览分为两种,

  1. 第一种是不需要开启服务,直接打开静态文件,通常这一类地址为静态文件,只需要拖拽页面到浏览器即可查看到效果如下图

    我们也可以把当前页面的预览地址复制到软件中来,如下

    这样我们就可以进行可视化操作了。
  2. 第二种需要开启服务的项目,常用都是vue项目。如uniapp项目需要通过命令或在hbuilx里启动服务,启动完之后会有一个本地页面地址,他是带有端口的,一般是8080将这个页面的预览地址复制到软件中如下图

    这样我们同样也可以进行可视化操作如下图

    哪怕是编译好的页面,也就是非静态页面,都支持可视化操作。
    当然如果当前页面需要通过首页登录,或者各种想过的条件才能预览,也可以将预览页面设置为首页,然后执行相关的操作之后(登录)跳转到当前页面。只要能在guiplan软件中打开所选的页面,我们就可以进行可视化操作。

刷新页面


我们在制作页面的过程中难免会有一些布局被做的不符合要求,但又想撤销回来。

可以按快捷键ctrl + z 撤销,但页面关闭之后是无法再撤销的,这时可以选择历史版本来进行还原。


历史版本与还原


我们在制作网页的过程中,每次保存都会存储一次历史缓存。可用于还原历史版本。
点击 右上角省略号->历史版本 会弹出图2对话框显示所有的缓存列表。
点击图片2列表中任意一个缓存文件即可自动还原为所选的历史版本

(图1)

(图2)

点击恢复到本地即可还原版本

注意:还原之后需要手动点击保存才能看到实际效果

清空历史缓存


由于服务器缓存存储空间有限,我们对缓存数量做了限制。
如果提示缓存数量不足,可以右上角省略号->清空历史版本 清理相关的缓存文件,或开通vip扩大缓存数量


分离保存html,css


介绍

如果你当前项目不是用的vue开发,或者只想要一个静态页面,然后进行二次开发。
我们提供了丰富的过滤功能,会将当前页面的html,css以及vue相关的js代码都进行过滤。

分离保存html与css操作

我们只需要点击如下图下拉框如下图1,然后右边文本框即可选择要保存的文件如下图2

 

(图1)
这样我们就能保存对应的文件

下拉框类型介绍

  1. 动态vue文件则会自动保存项目的html,css,以及js交互 到vue格式的文件中
  2. 静态html页面会将html,css代码保存html格式的文件中,并添加head,body,html等标签组装成一个完整html文件
  3. 纯html文件则只会保存html代码,也就是页面里的html结构代码,并且不会自动添加css样式代码,也不会自动添加head,body,html等标签
  4. 纯css文件则只会过滤所有配置好的样式,并保存到css文件中

    手动引用

    当然保存后的html代码中,css的引用需要自己去编写代码。如:
    <link rel="stylesheet" href="./test.css"> 

    混合开发

    更多移步文档http://template.guiplan.com/apiword/CrSV6Zgn/idKT6vjz
  5. vue代码注释之外可以手写代码混合开发。如下注释都有start与end标记,注意:里面的代码不可以手动修改,手动修改之后系统会自动覆盖你修改之后的代码。包括系统自动生成的html代码也不能手动修改。可视化基本支持定制所有的布局,尽量用可视化进行开发。

下载与启动项目


后台管理系统

移步文档http://template.guiplan.com/apiword/bN6pjtPt/idAuNb3F

移动端小程序

移步文档 http://template.guiplan.com/apiword/aiu2FTm9/idfW1gN3

静态页面

静态页面不需要启动任何服务直接创建即可。

生成vue文件


我们在前面章节中讲到了分离保存,如果我们的项目是用vue框架制作的,这时我们只需保存vue文件即可将项目中用的html,css,js等代码统一存储起来。

查看vue文件路径

在创建页面的时候会根据页面的配置自动生成一个vue文件的绝对路径,鼠标悬浮文本框的时候可以看到完整的路径如下图:

修改vue路径

如果要修改这个路径,我们只需要点击上图的文本框,会自动弹出文件浏览器进行选择保存文件。

注意的是:修改了存储路径需要手动去修改路由页面以及预览地址,否则页面无法显示

查看vue文件

点击如下图箭头所指图标即可查看文件

会根据存储类型打开文本框里对应的文件,比如静态html文件,会自动打开html格式的文件。

手写代码混合开发

部分代码可以手写修改,但要注意自动生成的代码不可手动修改,请移步文档http://template.guiplan.com/apiword/CrSV6Zgn/idKT6vjz


路由配置


在前面几个步骤中我们下载好了vue项目,做好页面保存vue文件,但如果要让其显示出来,我们就少不了路由的配置。注意:路由配置只用于线下版。线上版的静态页面是纯html页面,无需路由配置。

uniapp路由配置

创建页面的时候会有一个勾选按钮,勾选之后会自动注册页面

如果想自己手动配置的话,可以找到pages.json文件去修改配置如下图

自动生成的页面配置也可以直接打开文件来进行修改

element-ui

  1. 我们提供的koajsAdmin开源框架,可以在软件中一键下载,一键安装。创建页面的时候只需勾选上图的自动注册即可
  2. 手动配置路由在文件src->router->router.js文件中手动配置路由代码如下图
  3. 如果不是用我们的开源框架则需要根据自己项目的路由配置文件进行自行配置

代码编写器


介绍

代码编辑器用于手写代码,目前可用到的地方有修改变量内容,修改函数方法里的内容,修改源代码等。
这里以打开源代码为例。界面如下

手写代码

注意:打开源代码手写代码只能写在注释之外
变量与方法都可以随意编写,编辑器也支持常用的快捷键操作比如按alt补全单词,按ctrl+F打开搜索。

快速插入变量

最右边自定义变量中会自动列出当前项目下所创建的所有变量,如果变量是对象类型还会自动解析对象。只需要点击插入按钮即可自动将代码插入到光标所指位置如下图,这样我们就不需要去记变量名称,也不需要去找变量在哪里了。

快速插入方法

同样的在自定义方法中会显示当前页面创建的所有方法,同样的只需要点击以下即可自动插入方法。

快速插入api

插入api则是快速插入框架中常用到的方法,比如提示信息,ajax请求。这里以uniapp为例。快速插入提示信息代码如下图,后续会持续更新添加更多常用的api方法进来。

插入接口

在接口配置中配置好了接口之后,编辑器后端接口面板可以显示所有配置过的接口。

只需要点击插入参数与插入接口,软件会自动将接口以及相关的调用代码插入进来。

并且会自动添加好api的引用


注意:接口配置中需要一键插入api这样会自动生成api的调用代码,这样我们就不需要手写接口地址,请求方式等代码。


编辑变量或函数(v2.17.0)

函数与变量涉及使用的时候会经常修改,但每次去大纲树里去找变量或函数,操作步骤繁琐,效率太低,体验太差。本次更新代码编写器对所有的变量与函数添加了'编辑'按钮,如要修改变量或函数可快速切换变量或函数,可直接去修改代码。



快捷键

Alt 快速出现代码补全

Ctrl+D 选中光标所占的文本,继续操作则会选中下一个相同的文本。

Alt+F3 选中文本按下快捷键,即可一次性选择全部的相同文本进行同时编辑。

Ctrl+L 选中整行,继续操作则继续选择下一行。

Ctrl+Shift+L 在选中的每行行尾插入光标,即可同时编辑这些行。

Ctrl+Shift+M 选择括号内的内容。

Ctrl+M 光标移动至括号内结束或开始的位置。

Ctrl+Enter 在下一行插入新行。

Ctrl+Shift+Enter 在上一行插入新行。

Ctrl+← 向左单位性地移动光标,快速移动光标。

Ctrl+→ 向右单位性地移动光标,快速移动光标。

shift+↑ 向上选中多行。

shift+↓ 向下选中多行。

Shift+← 向左选中文本。

Shift+→ 向右选中文本。

Ctrl+Shift+← 向左单位性地选中文本。

Ctrl+Shift+→ 向右单位性地选中文本。

Ctrl+Shift+↑ 将光标所在行和上一行代码互换。

Ctrl+Shift+↓ 将光标所在行和下一行代码互换。

Ctrl+Alt+↑ 向上添加多行光标,可同时编辑多行。

Ctrl+Alt+↓ 向下添加多行光标,可同时编辑多行。

Ctrl+J 合并选中的多行代码为一行。

Ctrl+Shift+D 复制光标所在整行,插入到下一行。

Tab 向右缩进。

Shift+Tab 向左缩进。

Ctrl+K+K 从光标处开始删除代码至行尾。

Ctrl+Shift+K 删除整行。

Ctrl+/ 注释单行。

Ctrl+K+U 转换大写。

Ctrl+K+L 转换小写。

Ctrl+Z 撤销。

Ctrl+Y 恢复撤销。

Ctrl+T 左右字母互换。

Ctrl+F 打开底部搜索框,查找关键字。

Ctrl+shift+F 查找并替换

Ctrl+H 查找并替换

Ctrl+G 打开搜索框自动搜索

如需格式化代码则可直接点击”格式化按钮“



插入文件 v2.17.1

在开发中有很多时候要写各种引用,如<script src='..' 或者import aa from '../' 而每次这这种引用也很容易出错,还得不断去寻找文件在哪里。本次在代码编辑器中添加了插入文件功能。

点击插入文件,打开文件浏览器选择文件之后会自动生成引用代码。

如果是静态页面则自动生成script src的引用代码。

vue页面则生成import from 的引用代码。

下载整个项目


(暂时只支持guiplan1.0。2.0后续会慢慢开放)

下载步骤

  1. 在之前的项目管理中,我们可以直接去点击下载去下载整个项目
  2. 也可以在页面制作界面中 点击文件->下载整个项目去下载
  3. 软件会自动打包当前项目所有文件,并打开浏览器进行下载压缩包

    文件结构

    结构图如下
  4. cache文件夹则是服务器存储的所有缓存文件,后续这些缓存文件可以导入到guiplan自动生成网页结构(目前暂时没开发此功能)
  5. css文件夹会存储当前项目自动生成的所以css文件
  6. images文件夹会存储当前项目中用到的所有图片
  7. js文件夹 会存储当前项目自动生成的js文件
  8. html文件 也就是项目当中所生成的所有页面,也就是我们自己创的页面
  9. 将文件解压出来,双击html文件即可用浏览器打开静态页面
  10. 相关的css,js,图片等。在html中都自动引用好了,我们只需要格式化代码即可进行二次开发
  11. 注意: 服务器保存的所有文件不包含本地生成vue,为了大家的项目安全,vue交互逻辑不会保存到服务器
进群学习:
请加微信号guiplan
文字