HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

HTML5+ plus.navigator cookie 安卓版本兼容性的问题

plus HTML5 HTML5+ navigator Cookie

这个问题在我开发时快要逼疯我了,官方文档也没写
http://www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator.getCookie

只能人肉排雷了,话说html+的接口都没有测过吗?

平台 genymotion 模拟器 android 6.0/android 7.0 window10 1803

  1. 新建项目
  2. 打开7.0 模拟器
  3. hbuilderx 运行.运行到模拟器, 自动安装基座
  4. 打开webview调试
  5. 打开Application选项卡,找到cookie,可以看到,里面有一条name为sessionid的记录
  6. 打开Console 执行 plus.navigator.getCookie(url); 返回null

重复以上步骤,用的是6.0的模拟器 可以得到cookie记录

关于 HTML+ cookie 的api还有很多问题,而且官网上也没写

希望官方能尽快核实

这是我人肉趟雷一星期,才发现的. 开发的时候用的是6.0的系统,装7.0系统上不管用,悲哀啊

继续阅读 »

这个问题在我开发时快要逼疯我了,官方文档也没写
http://www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator.getCookie

只能人肉排雷了,话说html+的接口都没有测过吗?

平台 genymotion 模拟器 android 6.0/android 7.0 window10 1803

  1. 新建项目
  2. 打开7.0 模拟器
  3. hbuilderx 运行.运行到模拟器, 自动安装基座
  4. 打开webview调试
  5. 打开Application选项卡,找到cookie,可以看到,里面有一条name为sessionid的记录
  6. 打开Console 执行 plus.navigator.getCookie(url); 返回null

重复以上步骤,用的是6.0的模拟器 可以得到cookie记录

关于 HTML+ cookie 的api还有很多问题,而且官网上也没写

希望官方能尽快核实

这是我人肉趟雷一星期,才发现的. 开发的时候用的是6.0的系统,装7.0系统上不管用,悲哀啊

收起阅读 »

关于uni-app中试用 vuex 的 moduls 的问题

如果按照 vuex 的 modules 写法,在组件中拿不到 modules 中 state 中定义的数据 ,
写到 store/index 的 state 才可以,
有没有遇到这样的问题,对 vuex 中 支持是不是有限?

如果按照 vuex 的 modules 写法,在组件中拿不到 modules 中 state 中定义的数据 ,
写到 store/index 的 state 才可以,
有没有遇到这样的问题,对 vuex 中 支持是不是有限?

graceUI 发布 IM即时通讯组件,支持 文本、图片、语音多种模式,完善的录音、图片预览、历史记录功能

graceUI uniapp

2022年06月13日 GraceUI 6.0 版本正式发布

GraceUI 是一款成熟完善的、为uni-app量身打造的优秀的UI框架!经过近4年的维护已经成为组件多、界面丰富、运行稳定的 uni-app 专业UI框架 !
GraceUI 第一版发布于2018年9月,4年多来我们一直坚持收集反馈,高效、高频更新!从1.0到6.0 GraceUI 已经变得更加丰富、兼容性更好~
在此也感谢近万名使用者的一路相伴,感谢你们的支持与反馈~
官网 : https://www.graceui.com/

1. 丰富的组件及样式

GraceUI 的组件、样式、布局、界面非常丰富,总量 150+!您可以使用他们快速的完成应用页面的布局~

1.1 基础布局组件及样式

页面布局 · Flex布局 · 元素定位 · 文本颜色 · 背景样式 · 阴影效果 · 圆角边框 · 文本样式 · 内置图标 · 样式动画

1.2 常用布局

宫格布局 · 头部导航 · 底部导航 · 切换导航 · 吸顶容器 · 动态吸顶 · 通用列表 · 滑动列表 · 新闻列表 · 评论列表 · 图文卡片 · 名片卡片 · 滚动区域 · 遮罩弹层 · 局部选项卡 · 全屏选项卡 · 分段切换 · 折叠面板 · 普通表格 · 数据表格 · 分类展示 · 横向公告 · 返回顶部 · 弹出菜单 · 功能菜单 · 时间轴 · 侧边抽屉 · 图标分类 · 横向日期

1.3 加载组件

加载组件 · 全屏加载 · 下拉刷新 · 刷新组件 · 上拉加载

1.4 常用组件

徽章组件 · 标签组件 · 滚动公告 · 无缝滚动 · 按钮组件 · 进度按钮 · 搜索组件 · 星级评价 · 通用标题 · 倒计时 · 轮播组件 · 日历时间 · 区间滑块 · 进度圆环 · 城市选择 · 地区联动 · 步骤提示 · 链接组件 · 优惠券组件 · 为空展示 · 图片选择 · 多图上传 · 头像群组 · 数值动画 · 日期时间选择 · 时间段选择器

1.5 对话框组件

顶部消息框 · 模态对话框 · 底部对话框 · 底部消息框

1.6 表单相关

表单元素 · 表单验证 · 数值框 · 数字键盘 · 可选标签 · 点选按钮 · 下拉选择

1.7 文章相关

文本编辑器 · 编辑器解析 · 富文本加强 · 展开全文

1.8 JS 工具库

时间转换 · 网络请求 · 随机数值 · md5转换 · 系统信息

1.9 常用界面库

搜索界面 · 登录注册 · 个人中心 · 购物车 · 订单中心 · 图片剪裁 · 商品详情 · 图片懒加载 · 骨架加载 · 抽奖活动 · 瀑布流 · 选择问卷 · 地址列表 · 添加地址 · 证件上传 · 滚动推荐 · 短信验证 · 排行榜 · 商城套装 · 即时通讯

2. 强大的版本支持 业界首款成熟的基于uni-app 的 nvue UI 框架

GraceUI 6.0 基于 vue3.0 同时支持 nvue,为app端更流畅的体验提供了极大的便利~
nvue 普通版本基本同步,想优化您的app?添加一个 .nuve 复制 vue 代码即可迅速完成~

3. 更好的兼容性、更稳定

GraceUI 自发布以来已经有上万名使用者,在开发的过程中不断给我们最真实的反馈,我们更是以积极的心态面对每一个反馈,及时确认问题并及时修正(最快10分钟哦)~经过一年多的 "锤炼",GraceUI 变得极度稳定、兼容性极好~ 感谢每一份反馈,感谢每一位支持者~

您不需要费力的去布局,有 GraceUI 就够了 ^_^

4. Grace.JS 化繁为简,只为热爱 ~

Grace.js 是 GraceUI 框架的 js 框架,目标是 " 简化您的 uni-app 及 微信小程序 api 操作,同时提供丰富、好用的 js 工具,大幅度提高您的开发效率" 。

5. 收费说明

GraceUI 6.0 版本售价 299元
收费只是最基本的维护开销,不是"赚钱的买卖",我们更认为是您的一种信任,对于我们更多的是责任!所以这里不是淘宝,不是简单的交易!我们希望得到正向的反馈、正向的帮助,不断完善,最终成为"组件多、稳定性好" 的UI框架!
一次性收费永久免费更新 ~

官网 :

https://www.graceui.com/

继续阅读 »

2022年06月13日 GraceUI 6.0 版本正式发布

GraceUI 是一款成熟完善的、为uni-app量身打造的优秀的UI框架!经过近4年的维护已经成为组件多、界面丰富、运行稳定的 uni-app 专业UI框架 !
GraceUI 第一版发布于2018年9月,4年多来我们一直坚持收集反馈,高效、高频更新!从1.0到6.0 GraceUI 已经变得更加丰富、兼容性更好~
在此也感谢近万名使用者的一路相伴,感谢你们的支持与反馈~
官网 : https://www.graceui.com/

1. 丰富的组件及样式

GraceUI 的组件、样式、布局、界面非常丰富,总量 150+!您可以使用他们快速的完成应用页面的布局~

1.1 基础布局组件及样式

页面布局 · Flex布局 · 元素定位 · 文本颜色 · 背景样式 · 阴影效果 · 圆角边框 · 文本样式 · 内置图标 · 样式动画

1.2 常用布局

宫格布局 · 头部导航 · 底部导航 · 切换导航 · 吸顶容器 · 动态吸顶 · 通用列表 · 滑动列表 · 新闻列表 · 评论列表 · 图文卡片 · 名片卡片 · 滚动区域 · 遮罩弹层 · 局部选项卡 · 全屏选项卡 · 分段切换 · 折叠面板 · 普通表格 · 数据表格 · 分类展示 · 横向公告 · 返回顶部 · 弹出菜单 · 功能菜单 · 时间轴 · 侧边抽屉 · 图标分类 · 横向日期

1.3 加载组件

加载组件 · 全屏加载 · 下拉刷新 · 刷新组件 · 上拉加载

1.4 常用组件

徽章组件 · 标签组件 · 滚动公告 · 无缝滚动 · 按钮组件 · 进度按钮 · 搜索组件 · 星级评价 · 通用标题 · 倒计时 · 轮播组件 · 日历时间 · 区间滑块 · 进度圆环 · 城市选择 · 地区联动 · 步骤提示 · 链接组件 · 优惠券组件 · 为空展示 · 图片选择 · 多图上传 · 头像群组 · 数值动画 · 日期时间选择 · 时间段选择器

1.5 对话框组件

顶部消息框 · 模态对话框 · 底部对话框 · 底部消息框

1.6 表单相关

表单元素 · 表单验证 · 数值框 · 数字键盘 · 可选标签 · 点选按钮 · 下拉选择

1.7 文章相关

文本编辑器 · 编辑器解析 · 富文本加强 · 展开全文

1.8 JS 工具库

时间转换 · 网络请求 · 随机数值 · md5转换 · 系统信息

1.9 常用界面库

搜索界面 · 登录注册 · 个人中心 · 购物车 · 订单中心 · 图片剪裁 · 商品详情 · 图片懒加载 · 骨架加载 · 抽奖活动 · 瀑布流 · 选择问卷 · 地址列表 · 添加地址 · 证件上传 · 滚动推荐 · 短信验证 · 排行榜 · 商城套装 · 即时通讯

2. 强大的版本支持 业界首款成熟的基于uni-app 的 nvue UI 框架

GraceUI 6.0 基于 vue3.0 同时支持 nvue,为app端更流畅的体验提供了极大的便利~
nvue 普通版本基本同步,想优化您的app?添加一个 .nuve 复制 vue 代码即可迅速完成~

3. 更好的兼容性、更稳定

GraceUI 自发布以来已经有上万名使用者,在开发的过程中不断给我们最真实的反馈,我们更是以积极的心态面对每一个反馈,及时确认问题并及时修正(最快10分钟哦)~经过一年多的 "锤炼",GraceUI 变得极度稳定、兼容性极好~ 感谢每一份反馈,感谢每一位支持者~

您不需要费力的去布局,有 GraceUI 就够了 ^_^

4. Grace.JS 化繁为简,只为热爱 ~

Grace.js 是 GraceUI 框架的 js 框架,目标是 " 简化您的 uni-app 及 微信小程序 api 操作,同时提供丰富、好用的 js 工具,大幅度提高您的开发效率" 。

5. 收费说明

GraceUI 6.0 版本售价 299元
收费只是最基本的维护开销,不是"赚钱的买卖",我们更认为是您的一种信任,对于我们更多的是责任!所以这里不是淘宝,不是简单的交易!我们希望得到正向的反馈、正向的帮助,不断完善,最终成为"组件多、稳定性好" 的UI框架!
一次性收费永久免费更新 ~

官网 :

https://www.graceui.com/

收起阅读 »

车牌号虚拟软键盘组件

uniapp插件 uniapp 虚拟键盘 组件

手上有一个练手的停车场的项目,需要绑定车牌号,既(省)+(英文大写/数字)。但是现有的键盘是没法满足这个需求的。
鉴于uni-app的强大生态圈,于是我决定做了这个键盘。效果如下


附件可下载
使用方法

        <plate-keyboard :type='keyboardType' :show='keyboardShow' @hit="hitKeyboard" @complete="complete"></plate-keyboard>

type:键盘类型 1、省份键盘 2、数字英文键盘
show: 显示键盘 true/false
hit: 点击键盘回调,会直接返回点击内容,键盘类型用type自行判断,点击删除返回的是delete
complete: 点击完成的回调

继续阅读 »

手上有一个练手的停车场的项目,需要绑定车牌号,既(省)+(英文大写/数字)。但是现有的键盘是没法满足这个需求的。
鉴于uni-app的强大生态圈,于是我决定做了这个键盘。效果如下


附件可下载
使用方法

        <plate-keyboard :type='keyboardType' :show='keyboardShow' @hit="hitKeyboard" @complete="complete"></plate-keyboard>

type:键盘类型 1、省份键盘 2、数字英文键盘
show: 显示键盘 true/false
hit: 点击键盘回调,会直接返回点击内容,键盘类型用type自行判断,点击删除返回的是delete
complete: 点击完成的回调

收起阅读 »

[分享经验]开发者工具箱---很多好用的工具在里面

名称: 开发者神器库1.0

语言: 中文

平台: win7/win8/win10

下载地址: https://pan.baidu.com/s/14Bz45GuCyL7lSiZANmT0xw

简介:

开发者神器库是一款集合前后端开发者常用工具的仓库。图片处理、逆向破解工具、设计师/美工、等等一系列工具......

继续阅读 »

名称: 开发者神器库1.0

语言: 中文

平台: win7/win8/win10

下载地址: https://pan.baidu.com/s/14Bz45GuCyL7lSiZANmT0xw

简介:

开发者神器库是一款集合前后端开发者常用工具的仓库。图片处理、逆向破解工具、设计师/美工、等等一系列工具......

收起阅读 »

简单的MUI登录和重置密码页面模板

mui


一款简单的MUI框架的手机移动端登录和重置密码页面模板,首先进入手机登录界面模板,点击忘记密码转到重置密码页面。

下载地址:https://www.sucaihuo.com/templates/4428.html
至于下载需要积分,签到个到就够了

继续阅读 »


一款简单的MUI框架的手机移动端登录和重置密码页面模板,首先进入手机登录界面模板,点击忘记密码转到重置密码页面。

下载地址:https://www.sucaihuo.com/templates/4428.html
至于下载需要积分,签到个到就够了

收起阅读 »

这个代码提示 能改成颜色提示吗?看着很不舒服。

HBuilderX bug已确认

这个代码提示 能改成颜色提示吗?看着很不舒服,鸡皮疙瘩掉一地。

这个代码提示 能改成颜色提示吗?看着很不舒服,鸡皮疙瘩掉一地。

做一个APP软件要多少钱?

5+App开发

与传统APP开发模式相比,云计算模式开发APP,不仅可以大幅缩短开发周期,并可让开发自己成本节省9成左右。

创新云计算开发模式为什么可以更省时、省钱?

从渠道开发角度来说,首发打通了苹果APP+安卓APP+小程序+微官网+移动网站平台的连贯开发,意味着企业只需进行一次APP开发,即可拥有上述所有主流移动渠道平台,并可配置PC/移动端管理平台、配送端平台等全部产品。

从APP功能开发角度来说,基于“PaaS+SaaS”创新云计算模式的云平台,可以有效降低开发门槛,从而大幅提升APP开发效率,进而降低软件APP制作周期与开发成本。

从APP运营角度来讲,企业只需配备1-2人,只需会进行简单的电脑操作,即可进行平台运营维护,无需自建技术团队,运营成本也能得到大幅压缩。

从APP应用角度来看,可以快速搭建最新、最热、最有效的场景化移动电商APP平台,拥有全套的一站式APP制作解决方案!

继续阅读 »

与传统APP开发模式相比,云计算模式开发APP,不仅可以大幅缩短开发周期,并可让开发自己成本节省9成左右。

创新云计算开发模式为什么可以更省时、省钱?

从渠道开发角度来说,首发打通了苹果APP+安卓APP+小程序+微官网+移动网站平台的连贯开发,意味着企业只需进行一次APP开发,即可拥有上述所有主流移动渠道平台,并可配置PC/移动端管理平台、配送端平台等全部产品。

从APP功能开发角度来说,基于“PaaS+SaaS”创新云计算模式的云平台,可以有效降低开发门槛,从而大幅提升APP开发效率,进而降低软件APP制作周期与开发成本。

从APP运营角度来讲,企业只需配备1-2人,只需会进行简单的电脑操作,即可进行平台运营维护,无需自建技术团队,运营成本也能得到大幅压缩。

从APP应用角度来看,可以快速搭建最新、最热、最有效的场景化移动电商APP平台,拥有全套的一站式APP制作解决方案!

收起阅读 »

力谱云专家告诉你,靠谱的APP是如何制作的?

5+App开发

> 移动蓝海市场,商机无限,越来越多的企业开始寻求制作,并运营一款专属于自己的靠谱APP。那么,究竟开发一个APP要多少钱呢?

开门见山,目前通过传统开发模式,制作一个手机APP软件商城的价格普遍在30万元左右。并且,开发APP的成本会随着需求难易度,以及开发周期长短的影响进而走高,可以说是一个上不封顶的高成本投入项目。

传统开发模式下,开发一款普通电商APP究竟为何如此昂贵?

首先,目前制作一个靠谱的手机APP,普遍会需要开发iOS APP、安卓APP、微信小程序、微官网、移动网站等主流APP应用平台,进行大批流量导入。并且,平台方还需要需要PC端运营管理平台,以及便捷的移动端运营平台,进行日常订单、物流、产品等方面的跟进。此外,还会需要服务器方面的部署。这几大方面的开发逻辑各不相同,需要一一从零开始制作。

其次,传统开发模式下,人工成本繁杂,至少需要前后端各自配备一名工程师,一位UI设计师,一位测试员,以及产品经理进行项目统筹。并且,开发周期冗长,需要数月的制作时间,也存在项目开发失败的风险。

另外,除了满足单一的APP功能之外,靠谱的商家,一般会提供许多细分功能,而这些功能都需要庞大的业务系统进行支撑。比如,在开发一个电商APP时,除了商品交易等基础电商功能之外,还会涉及到用户登录注册、购物车、会员管理、订单管理等功能,每个单一功能都需要无数细小功能进行支撑,才能完善业务逻辑。在传统开发模式中,这些细微的功能,都会需要从零起步,一步步进行研磨。

继续阅读 »

> 移动蓝海市场,商机无限,越来越多的企业开始寻求制作,并运营一款专属于自己的靠谱APP。那么,究竟开发一个APP要多少钱呢?

开门见山,目前通过传统开发模式,制作一个手机APP软件商城的价格普遍在30万元左右。并且,开发APP的成本会随着需求难易度,以及开发周期长短的影响进而走高,可以说是一个上不封顶的高成本投入项目。

传统开发模式下,开发一款普通电商APP究竟为何如此昂贵?

首先,目前制作一个靠谱的手机APP,普遍会需要开发iOS APP、安卓APP、微信小程序、微官网、移动网站等主流APP应用平台,进行大批流量导入。并且,平台方还需要需要PC端运营管理平台,以及便捷的移动端运营平台,进行日常订单、物流、产品等方面的跟进。此外,还会需要服务器方面的部署。这几大方面的开发逻辑各不相同,需要一一从零开始制作。

其次,传统开发模式下,人工成本繁杂,至少需要前后端各自配备一名工程师,一位UI设计师,一位测试员,以及产品经理进行项目统筹。并且,开发周期冗长,需要数月的制作时间,也存在项目开发失败的风险。

另外,除了满足单一的APP功能之外,靠谱的商家,一般会提供许多细分功能,而这些功能都需要庞大的业务系统进行支撑。比如,在开发一个电商APP时,除了商品交易等基础电商功能之外,还会涉及到用户登录注册、购物车、会员管理、订单管理等功能,每个单一功能都需要无数细小功能进行支撑,才能完善业务逻辑。在传统开发模式中,这些细微的功能,都会需要从零起步,一步步进行研磨。

收起阅读 »

iOS离线打包 - 语音识别(Speech)插件配置

iOS离线打包 语音识别 Speech 百度语音识别 讯飞语音识别

百度语音配置

将百度语音模块依赖库及资源添加到工程

依赖库 系统库 依赖资源
liblibSpeech.a、libBaiduSpeechSDK.a、libbaiduSpeech.a libc++.tbd、libz.tbd、libsqlite3.tbd、AudioToolbox.framework、AVFoundation.framework、CFNetwork.framework、CoreLocation.framework、CoreTelephony.framework、SystemConfiguration.framework、GLKit.framework BDSClientEASRResources文件夹里的资源文件

帐号配置

1.首先到百度语音官方网站 创建应用获取 appkey 等信息。

2.打开info.plist,找到baiduspeech项,填入自己帐号的信息,如果没有该项,按照下图中的格式创建

3、把BDSClientEASRResources文件夹里的资源文件引入到工程里

讯飞语音配置

添加讯飞语音插件

注: Linker Flags、framework添加方法参考该文档

依赖库 系统库 依赖资源
liblibSpeech.a、libiflySpeech.a、iflyMSC.framework AVFoundation.framework、AddressBook.framework、Contacts.framework

注意:iflyMSC.framework 库需要开发者在讯飞语音官方网站自行生成,因为需要跟您的AppId绑定,SDK内的库无法在您的App中使用;

帐号配置

首先到讯飞语音官方网站创建App,获取 appid 信息。

2.打开info.plist,找到iFly项,填入自己帐号的信息,如果没有该项,按照下图中的格式创建

注意:离线打包语言识别功能只能选一个,要么科大讯飞,要么百度语音,剩下那个需要在工程里删除

继续阅读 »

百度语音配置

将百度语音模块依赖库及资源添加到工程

依赖库 系统库 依赖资源
liblibSpeech.a、libBaiduSpeechSDK.a、libbaiduSpeech.a libc++.tbd、libz.tbd、libsqlite3.tbd、AudioToolbox.framework、AVFoundation.framework、CFNetwork.framework、CoreLocation.framework、CoreTelephony.framework、SystemConfiguration.framework、GLKit.framework BDSClientEASRResources文件夹里的资源文件

帐号配置

1.首先到百度语音官方网站 创建应用获取 appkey 等信息。

2.打开info.plist,找到baiduspeech项,填入自己帐号的信息,如果没有该项,按照下图中的格式创建

3、把BDSClientEASRResources文件夹里的资源文件引入到工程里

讯飞语音配置

添加讯飞语音插件

注: Linker Flags、framework添加方法参考该文档

依赖库 系统库 依赖资源
liblibSpeech.a、libiflySpeech.a、iflyMSC.framework AVFoundation.framework、AddressBook.framework、Contacts.framework

注意:iflyMSC.framework 库需要开发者在讯飞语音官方网站自行生成,因为需要跟您的AppId绑定,SDK内的库无法在您的App中使用;

帐号配置

首先到讯飞语音官方网站创建App,获取 appid 信息。

2.打开info.plist,找到iFly项,填入自己帐号的信息,如果没有该项,按照下图中的格式创建

注意:离线打包语言识别功能只能选一个,要么科大讯飞,要么百度语音,剩下那个需要在工程里删除

收起阅读 »

HBuilderX入门教程

教程 入门教程 HBuilderX HBuilderX入门教程

本帖文章已集成到: hx产品文档

HX是轻量编辑器和强大IDE的完美结合体。敏捷的性能,清爽的界面,强大的功能和于一身。

本文档面向入门用户,建议初学者仔细研读。

1. 介绍

  1. 执着于更快一步的理念,hx的左侧项目管理器是单击响应而不是双击。
  2. 单击展开目录,单击预览文件,双击打开文件。
  3. 预览文件时顶部标签卡是斜体的,此时继续预览其他文件会替换预览标签卡。双击文件后标签卡为正体,不会被替换。预览的文件一旦开始编辑,也会自动变为正式打开状态。
    预览文件
  4. 项目管理器默认是不显示图标的,可以将鼠标移到项目管理器区域,右上角会悬浮菜单,在里面可以选择显示图标。HBuilderX支持业内多种图标插件,可以在工具-插件安装中找到更多图标插件。
  5. hx的文件保存是免丢失的,并且有热退出功能。所谓热退出,就是关闭hx时不要保存文件。再次打开时仍然是之前的状态。未保存的文件也会继续原样展现。
  6. hx默认带有每30秒保存一次临时文件的策略(可以在设置里调节时间间隔)
  7. 不管是关闭hx,还是断电、崩溃,临时文件始终会自动保存。
  8. 前端预编译型语言越来越多,每次保存都触发编译比较消耗资源,有了hx,可以专注写代码而不需要隔一会按一下ctrl+s,需要编译时再保存,或编辑多个文件后按ctrl+alt+s全部保存。

2. 语法提示

拥有自研的世界级语法分析引擎一直是HBuilder系列产品傲视业内的资本。
但前端框架众多,框架的语法提示需要加载单独的语法提示库。

框架语法提示库是在页面的右下角选择。(如下图示例)

选择语法提示框

注意

  1. 框架语法库是挂在项目下的,一个项目加载了一个框架语法库后,这个项目下所有js文件或HTML文件都会在代码助手提示这个框架的语法。
  2. 但如果一个文件是单独从硬盘打开,没有整项目拖入hx,那么此时无法加载框架语法库。

3. 代码助手


hx的代码助手,可以按alt+数字选择直接选择某个项目,类似中文输入法数字选词 (如下图示例)

选词

4. 语法帮助


光标放到某api处,按下F1,就可跳转到这个api的官方手册。目前支持vue、uni-app、5+等api (如下图示例)

F1_api

5. 编辑器与项目管理器的同步


hx默认是打开的标签卡和项目管理器自动关联,切换标签卡时项目管理器也会跟随变化,如不需要此功能,可以将鼠标移到项目管理器区域,右上角会悬浮菜单,在里面可以取消“与编辑器同步”。(如下图示例)

编辑器同步

一般多项目时建议取消同步功能。

取消同步后,如需手动定位标签卡所在的项目,可以对编辑器点右键-“在项目管理器中定位”。(如下图示例)

项目管理器定位

6. 多光标


hx支持多光标,按 ctrl+鼠标左键 就可增加一个光标,ctrl+鼠标右键 可取消一个光标或选区。(如下图示例)

多光标

还可以选择相同词。ctrl+e (mac是cmd+d)可选中相同的词做批处理。(如下图示例)

选择相同词

多光标是极客必备工具,高级技巧请参考:https://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/13191

7. 列选择


hx的列选择,是alt+鼠标拖选。或者用快捷键ctrl+alt+↑。(如下图示例)

列选择

8. 选择编码、着色高亮


当你打开一个不认识的文档时,即hx的无法高亮着色,可以在右下角选择使用其他编辑器打开。

当你打开一个文件编码错乱,产生乱码时,也可以在右下角选择编码重新打开。(如下图示例)

编码

9. 转到定义


转到定义是非常常用的功能,普通编辑器不长于此,只能猜单词跳转。

HBuilderX有强大的语法分析引擎,可以准确的跳转定义位置。

转到定义的快捷键是Alt+d,鼠标操作是alt+左键单击(注意不是ctrl,因为ctrl留给了多光标)

转到定义

而HBuilderX还有一个特色是转到定义到分栏ctrl+alt+左键,可以把一个定义处的代码打开在另一侧,方便共同查看

转到定义到分栏

如何回到上一个光标位置?

在HBuilderX中,Alt+Left或点击工具栏上的<, 即可回到上一个光标位置。

备注:支持切换【Ctrl+鼠标左键】或【Alt+鼠标左键】进行转到定义 (菜单【选择】,最后一个菜单)。

切换

10. 文件快速打开


在顶部工具栏直接搜索工程下的文件名并打开,或者使用快捷键ctrl+p。(如下图示例)

搜索文件

比较常用的文件,可以在工具栏里添加到收藏夹。(如下图示例)

收藏文件

ctrl+p也是标签卡管理的重要工具,屏幕窄看不清左右打开的标签时,可以用它来浏览所有以打开的标签

11. 目录内搜索


项目管理器点右键,选:查找字符串(当前目录),可在该目录下所有文件中搜索字符串(如下图示例)

按目录查找字符串

12. 缩进调整


hx默认使用tab缩进,tab长度为4个空格。

如果你需要调整缩进长度,比如tab长度为2个空格,在工具设置-编辑器中调整。(如下图示例)

调整缩进示例

如果不喜欢使用tab而喜欢使用空格,也可以在设置中调。注意这个调节只是编辑器里敲tab按键时转为了空格,格式化时仍是tab。

调节格式化设置,参考菜单工具-插件配置。hx支持几种格式化插件,他们都有自己的配置定义文件,请按插件配置中的说明修改设置。(如下图示例)

格式化插件

比如格式化插件Formator-Prettier,它的配置文件为:【工具】【插件配置】【formator-frettier】【formator.config.js】(如下图示例)

Formator-Prettier

在菜单编辑-缩进中,可文件的缩进从tab空格或从空格tab

13. 语法校验


hx的语法校验都是插件,在工具插件安装中选择各种校验插件,不同语言的校验插件不一样。安装校验插件后,保存文件时会自动执行语法校验。(如下图示例)

语法插件

校验概要结果会显示在状态栏,比如有2个错误(如下图),可以按F4切换到不同的错误处,画有红波浪线(如下图),鼠标移到红波浪线上会显示具体的错误信息。(如下图示例)

例子

你也可以不保存,直接点菜单工具-验证本文档校验语法 来进行校验。(如下图示例)

验证本文档语法

15. svn/git项目导入


以git为例:(git项目:需要安装git插件、以及TortoiseGit、并配置ssh秘钥)(如下图示例)

导入git项目

插件名称 Mac操作系统 Windows操作系统
svn Mac SVN教程 Windows SVN教程
git Mac Git教程 Windows Git教程

15. 预编译器(less/sass)


在【菜单】-->【插件安装】里有各种语言的预编译器,比如less、ts等。安装预编译器后,hx下的所有项目均可用共用。

sass示例: (如下图示例)

预编译器安装后使用入口在外部命令菜单中

sass使用教程

sass/less插件配置小技巧:

less、sass可以在插件配置里,配置为保存文件时自动编译。

安装less或sass插件后,进入菜单【工具】【插件配置】【compile-less】,点击package.json文件,将onDidSaveExecution修改为true。注意修改后需要重启HBuilderX才能生效

{  
  "onDidSaveExecution": true  
}

16. 更多文档教程

参考: HBuilderX更多教程

继续阅读 »

本帖文章已集成到: hx产品文档

HX是轻量编辑器和强大IDE的完美结合体。敏捷的性能,清爽的界面,强大的功能和于一身。

本文档面向入门用户,建议初学者仔细研读。

1. 介绍

  1. 执着于更快一步的理念,hx的左侧项目管理器是单击响应而不是双击。
  2. 单击展开目录,单击预览文件,双击打开文件。
  3. 预览文件时顶部标签卡是斜体的,此时继续预览其他文件会替换预览标签卡。双击文件后标签卡为正体,不会被替换。预览的文件一旦开始编辑,也会自动变为正式打开状态。
    预览文件
  4. 项目管理器默认是不显示图标的,可以将鼠标移到项目管理器区域,右上角会悬浮菜单,在里面可以选择显示图标。HBuilderX支持业内多种图标插件,可以在工具-插件安装中找到更多图标插件。
  5. hx的文件保存是免丢失的,并且有热退出功能。所谓热退出,就是关闭hx时不要保存文件。再次打开时仍然是之前的状态。未保存的文件也会继续原样展现。
  6. hx默认带有每30秒保存一次临时文件的策略(可以在设置里调节时间间隔)
  7. 不管是关闭hx,还是断电、崩溃,临时文件始终会自动保存。
  8. 前端预编译型语言越来越多,每次保存都触发编译比较消耗资源,有了hx,可以专注写代码而不需要隔一会按一下ctrl+s,需要编译时再保存,或编辑多个文件后按ctrl+alt+s全部保存。

2. 语法提示

拥有自研的世界级语法分析引擎一直是HBuilder系列产品傲视业内的资本。
但前端框架众多,框架的语法提示需要加载单独的语法提示库。

框架语法提示库是在页面的右下角选择。(如下图示例)

选择语法提示框

注意

  1. 框架语法库是挂在项目下的,一个项目加载了一个框架语法库后,这个项目下所有js文件或HTML文件都会在代码助手提示这个框架的语法。
  2. 但如果一个文件是单独从硬盘打开,没有整项目拖入hx,那么此时无法加载框架语法库。

3. 代码助手


hx的代码助手,可以按alt+数字选择直接选择某个项目,类似中文输入法数字选词 (如下图示例)

选词

4. 语法帮助


光标放到某api处,按下F1,就可跳转到这个api的官方手册。目前支持vue、uni-app、5+等api (如下图示例)

F1_api

5. 编辑器与项目管理器的同步


hx默认是打开的标签卡和项目管理器自动关联,切换标签卡时项目管理器也会跟随变化,如不需要此功能,可以将鼠标移到项目管理器区域,右上角会悬浮菜单,在里面可以取消“与编辑器同步”。(如下图示例)

编辑器同步

一般多项目时建议取消同步功能。

取消同步后,如需手动定位标签卡所在的项目,可以对编辑器点右键-“在项目管理器中定位”。(如下图示例)

项目管理器定位

6. 多光标


hx支持多光标,按 ctrl+鼠标左键 就可增加一个光标,ctrl+鼠标右键 可取消一个光标或选区。(如下图示例)

多光标

还可以选择相同词。ctrl+e (mac是cmd+d)可选中相同的词做批处理。(如下图示例)

选择相同词

多光标是极客必备工具,高级技巧请参考:https://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/13191

7. 列选择


hx的列选择,是alt+鼠标拖选。或者用快捷键ctrl+alt+↑。(如下图示例)

列选择

8. 选择编码、着色高亮


当你打开一个不认识的文档时,即hx的无法高亮着色,可以在右下角选择使用其他编辑器打开。

当你打开一个文件编码错乱,产生乱码时,也可以在右下角选择编码重新打开。(如下图示例)

编码

9. 转到定义


转到定义是非常常用的功能,普通编辑器不长于此,只能猜单词跳转。

HBuilderX有强大的语法分析引擎,可以准确的跳转定义位置。

转到定义的快捷键是Alt+d,鼠标操作是alt+左键单击(注意不是ctrl,因为ctrl留给了多光标)

转到定义

而HBuilderX还有一个特色是转到定义到分栏ctrl+alt+左键,可以把一个定义处的代码打开在另一侧,方便共同查看

转到定义到分栏

如何回到上一个光标位置?

在HBuilderX中,Alt+Left或点击工具栏上的<, 即可回到上一个光标位置。

备注:支持切换【Ctrl+鼠标左键】或【Alt+鼠标左键】进行转到定义 (菜单【选择】,最后一个菜单)。

切换

10. 文件快速打开


在顶部工具栏直接搜索工程下的文件名并打开,或者使用快捷键ctrl+p。(如下图示例)

搜索文件

比较常用的文件,可以在工具栏里添加到收藏夹。(如下图示例)

收藏文件

ctrl+p也是标签卡管理的重要工具,屏幕窄看不清左右打开的标签时,可以用它来浏览所有以打开的标签

11. 目录内搜索


项目管理器点右键,选:查找字符串(当前目录),可在该目录下所有文件中搜索字符串(如下图示例)

按目录查找字符串

12. 缩进调整


hx默认使用tab缩进,tab长度为4个空格。

如果你需要调整缩进长度,比如tab长度为2个空格,在工具设置-编辑器中调整。(如下图示例)

调整缩进示例

如果不喜欢使用tab而喜欢使用空格,也可以在设置中调。注意这个调节只是编辑器里敲tab按键时转为了空格,格式化时仍是tab。

调节格式化设置,参考菜单工具-插件配置。hx支持几种格式化插件,他们都有自己的配置定义文件,请按插件配置中的说明修改设置。(如下图示例)

格式化插件

比如格式化插件Formator-Prettier,它的配置文件为:【工具】【插件配置】【formator-frettier】【formator.config.js】(如下图示例)

Formator-Prettier

在菜单编辑-缩进中,可文件的缩进从tab空格或从空格tab

13. 语法校验


hx的语法校验都是插件,在工具插件安装中选择各种校验插件,不同语言的校验插件不一样。安装校验插件后,保存文件时会自动执行语法校验。(如下图示例)

语法插件

校验概要结果会显示在状态栏,比如有2个错误(如下图),可以按F4切换到不同的错误处,画有红波浪线(如下图),鼠标移到红波浪线上会显示具体的错误信息。(如下图示例)

例子

你也可以不保存,直接点菜单工具-验证本文档校验语法 来进行校验。(如下图示例)

验证本文档语法

15. svn/git项目导入


以git为例:(git项目:需要安装git插件、以及TortoiseGit、并配置ssh秘钥)(如下图示例)

导入git项目

插件名称 Mac操作系统 Windows操作系统
svn Mac SVN教程 Windows SVN教程
git Mac Git教程 Windows Git教程

15. 预编译器(less/sass)


在【菜单】-->【插件安装】里有各种语言的预编译器,比如less、ts等。安装预编译器后,hx下的所有项目均可用共用。

sass示例: (如下图示例)

预编译器安装后使用入口在外部命令菜单中

sass使用教程

sass/less插件配置小技巧:

less、sass可以在插件配置里,配置为保存文件时自动编译。

安装less或sass插件后,进入菜单【工具】【插件配置】【compile-less】,点击package.json文件,将onDidSaveExecution修改为true。注意修改后需要重启HBuilderX才能生效

{  
  "onDidSaveExecution": true  
}

16. 更多文档教程

参考: HBuilderX更多教程

收起阅读 »

能否增加一个功能:项目只读开关

在浏览依赖库时总容易不小心碰到键盘。
胸太大了没办法。

在浏览依赖库时总容易不小心碰到键盘。
胸太大了没办法。