退出系统
2.0 版本 weex 版本
快速开始
更新日志
快速部署框架
组件调用说明
代码块功能
data 重要说明
APP端关闭回弹
视频教程
组件库 ( 40个 )
01. 头部信息组件
02. Flex布局 + 通用样式
03. 常用文本
04. 滚动区域
05. 可移动区域
06. 徽章组件
07. 滚动公告
08. 通用列表
09. 图文列表
10. 新闻列表
11. 卡片视图
12. 多格图标
13. 局部选项卡
14. 全屏选项卡
15. 星级图标
16. 折叠面板
17. 按钮组件
18. Loading 组件
19. 全屏 Loading
20. 标题、更多、换一批
21. 横向公告
22. 底部导航
23. 表单组件
24. 数字输入框
25. 可选标签
26. 弹出层
27. 图标
28. 步骤
29. 倒计时(step)
30. 轮播组件
31. 滑动操作
32. 日历组件
33. 区间滑块
34. 顶部提示
35. 进度条、圆环进度条
36. 弹出式菜单
37. 多功能菜单
38. 数字键盘
39. 富文本加强
40. 浮层引导
界面库 ( 27个 )
01. 评论界面
02. 搜索界面
03. 登录、注册
04. 城市选择
05. echarts 【第三方】
06. 图片选择及预览
07. 设置界面
08. 下拉刷新
09. 上拉加载
10. 普通表格
11. 数据表格
12. 时间轴
13. 商品分类展示
14. 购物车
15. 条件筛选
16. 瀑布流
17. 图片剪裁
18. 商品详情 + 属性选择
19. 图片懒加载
20. 地区联动
21. IM 即时通讯
22. 骨架屏
23. 分段切换
24. 抽奖活动
25. 问卷界面
26. 地址管理界面
27. 身份证上传
表单、验证
1. 表单组件
2. 表单、数据验证
css 动画
animate.css 动画库
js 工具库
常用工具库介绍
日期时间转换
网络请求工具
随机数及字符
MD5 转换
app版本检查及更新

graceUI - 在 HBuilderX 中使用代码块功能

graceUI 代码块功能使用说明

使用 HBuilderX 代码块功能可以快速的生成常用代码,大幅度提高开发速度(2、3个字母即可完成一段代码的生成工作)!

注意 : 只能在 HBuilderX 编辑器内使用此功能!

使用步骤:

一、设置代码块

1. 打开 HBuilderX 点击 工具 -> 代码块设置 -> vue 代码块:
将 vue.json 内的内容添加到 “vue 代码块” 内,如果没有其他设置,全选覆盖即可!
2. 打开 HBuilderX 点击 工具 -> 代码块设置 -> javascript 代码块:
将 javascript.json 内的内容添加到 “javascript 代码块” 内,如果没有其他设置,全选覆盖即可(ctrl+s 保存哦)!

二、使用代码块

在 template 标签内输入 g+组件首字母即可弹出代码助手[对应组件部分];

在 script 标签内输入 g+组件首字母即可弹出代码助手[对应脚本部分];

三、组件激活列表  [在 template 标签内激活]

  激活字母             对应组件
graceui            : graceUI 初始化
-------------- flex 布局 ----------------
gpadding           : 带有间距的view
gflex              : flex view
gFlexWrap          : flex wrap
gFlexNoWrap        : flex no wrap
gFlexSpaceBetween  : flex Space Between
-------------- 文本 ---------------------
gtext              : 文本 view
gTextSmall         : 小字体文本
gh1 - 5            : h1 - 5
graceLineThrough   : 删除线
-------------- 组件 ---------------------
gscrllx            : 横向滚动
gscrlly            : 竖向滚动
glist              : 通用列表
gbox               : 九宫格
gimgitem           : 图文项目
gnewslist          : 新闻列表
gtab               : 局部选项卡
gscrollmsgY        : 滚动公告[竖向]
gscrollmsgX        : 滚动公告[横向]
gstarStatic        : 静态星级图标
gstarActive        : 动态星级图标
gaccordion         : 折叠面板
gLoading           : Loading
gfullLoading       : 全屏 Loading
gbadge             : 数字角标
gtitlecenter       : 居中标题
gtitle             : 标题 + 更多
gtitleRefresh      : 标题加换一批
gxbanner           : 横向公告
gfooter            : 底部导航
gmbanner           : 弹出式广告
gicon              : 图标
gstep              : 步骤
gswiper            : 轮播
gform              : 表单及项目
gimg               : 图片
gslider            : 滑块
galert             : 顶部消息框

四、脚本激活列表 [ 在 script 标签内激活 推荐第一行 ]

     激活字母          对应脚本
gtabdata          : 局部选项卡[data]
gtabmethods       : 局部选项卡[methods]
gstar             : 动态星级图标[methods]
gaccordion        : 折叠面板 [methods]
gLoading          : Loading [组件]
gfullLoading      : Full Loading [组件]
gchecker          : 表单验证 [组件及使用演示]