HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

关于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更多教程

收起阅读 »

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

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

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

Android 获取 手机本机 MAC 地址 支持 所有 Android 版本

Android Native.JS MAC地址

Native.js 获取Android 手机 MAC 物理地址, Android 版本众多,之前的方法已经不支持最新的版本获取MAC地址了

在Android 6.0 之前可以获取MAC 方法,到了6.0版本后,不再支持此方法获取MAC地址了。

此方法,支持移动网络下获取MAC地址

var Context = plus.android.importClass("android.content.Context");  
var WifiManager = plus.android.importClass("android.net.wifi.WifiManager");  
var wifiManager = plus.android.runtimeMainActivity().getSystemService(Context.WIFI_SERVICE);  
var WifiInfo = plus.android.importClass("android.net.wifi.WifiInfo");  
var wifiInfo = wifiManager.getConnectionInfo();  
    wifiInfo.getMacAddress();

Android 6.0之后动态授权对隐私保护高了, 采用的获取MAC 的方法是读取 /sys/class/net/wlan0/address ,

此方法有些型机,只能在WIFI开启的状态下才能获取到MAC 地址

var BufferedReader=plus.android.importClass("java.io.BufferedReader");  
var FileReader=plus.android.importClass("java.io.FileReader");  
var file=new FileReader("/sys/class/net/wlan0/address");       
var reader = new BufferedReader(file,256);  
var address=reader.readLine();  
    reader.close();

Android 7.0 + 以上的方法也都没用了,谷歌对隐私要求更严格了,禁止读取/sys/class/net/wlan0/address 了, 但还是有方法读取到MAC , 采用的是 NetworkInterface 对端口扫描 读取到 wlan0 的值,它就是MAC地址了,

此方法有些型机,只能在WIFI开启的状态下才能获取到MAC 地址

var NetworkInterface=plus.android.importClass("java.net.NetworkInterface");              
var networkInterface = NetworkInterface.getByName("eth1");  
networkInterface = NetworkInterface.getByName("wlan0");  
var mac=networkInterface.getHardwareAddress();

写了一个获取 MAC 的插件,封装了以上三种方法一起,可以获取所有机型的MAC的地址。

有需要的可以到这个下载: http://www.html5-app.com/show/101
获得 MacAddress.js 引到 页面就可以 ,通过以下方法,可以获得MAC 地址。

mui.plusReady(function()  
{  

    var address=Mac.address();  

});
继续阅读 »

Native.js 获取Android 手机 MAC 物理地址, Android 版本众多,之前的方法已经不支持最新的版本获取MAC地址了

在Android 6.0 之前可以获取MAC 方法,到了6.0版本后,不再支持此方法获取MAC地址了。

此方法,支持移动网络下获取MAC地址

var Context = plus.android.importClass("android.content.Context");  
var WifiManager = plus.android.importClass("android.net.wifi.WifiManager");  
var wifiManager = plus.android.runtimeMainActivity().getSystemService(Context.WIFI_SERVICE);  
var WifiInfo = plus.android.importClass("android.net.wifi.WifiInfo");  
var wifiInfo = wifiManager.getConnectionInfo();  
    wifiInfo.getMacAddress();

Android 6.0之后动态授权对隐私保护高了, 采用的获取MAC 的方法是读取 /sys/class/net/wlan0/address ,

此方法有些型机,只能在WIFI开启的状态下才能获取到MAC 地址

var BufferedReader=plus.android.importClass("java.io.BufferedReader");  
var FileReader=plus.android.importClass("java.io.FileReader");  
var file=new FileReader("/sys/class/net/wlan0/address");       
var reader = new BufferedReader(file,256);  
var address=reader.readLine();  
    reader.close();

Android 7.0 + 以上的方法也都没用了,谷歌对隐私要求更严格了,禁止读取/sys/class/net/wlan0/address 了, 但还是有方法读取到MAC , 采用的是 NetworkInterface 对端口扫描 读取到 wlan0 的值,它就是MAC地址了,

此方法有些型机,只能在WIFI开启的状态下才能获取到MAC 地址

var NetworkInterface=plus.android.importClass("java.net.NetworkInterface");              
var networkInterface = NetworkInterface.getByName("eth1");  
networkInterface = NetworkInterface.getByName("wlan0");  
var mac=networkInterface.getHardwareAddress();

写了一个获取 MAC 的插件,封装了以上三种方法一起,可以获取所有机型的MAC的地址。

有需要的可以到这个下载: http://www.html5-app.com/show/101
获得 MacAddress.js 引到 页面就可以 ,通过以下方法,可以获得MAC 地址。

mui.plusReady(function()  
{  

    var address=Mac.address();  

});
收起阅读 »