Day 23 - 前端开发工具 - HBuilder X
Day 23 - 前端开发工具 - HBuilder X
完成了后端开发,接下来就要将透过前端跨平台开发框架来存取后端的资源,底下介绍几种常见的跨平台应用开发框架。
- Flutter
- Ionic
- React native
- Apache Cordova
- Xamarin
所谓的跨平台应用开发框架就是,开发人员可以使用一套相同的代码,一次性地编码即可在多个平台上面运行起来,如 iOS, Android,Windows, macOS 以及 Linux。它减少了开发人员开发应用的时间,并且能够快速地交付。作为用户来说,当然希望使用 App 的时候能够顺畅流利,不可否认的是,使用 swift 或 android studio 开发出来的 iOS 和 Android 应用非常流畅而且高效,但是缺点就是需要耗费较长的时间来开发,比如同一个 App,需要在 swift 或 android studio 两端各自开发一遍,比较耗费人力和财力。
跨平台应用程序开发框架的好处:
- 一个代码适用于多个设备;
- 一个代码适用于多个平台;
- 一个代码可以在多个应用商店中发布成多个 app;
- 只需编写一次代码;
- 代码可以跨平台复用;
- 市场分析与测试;
- 快速成型;
- 快速开发;
然而在挑选跨平台应用程序开发框架时,需要注意的是:
- 是否开源。
- 框架的三方套件是否足够。
- 框架的执行性能。
- 是否有大厂维护,因为这关系到后期是否可以持续维护。
- 使用者的人数。
Flutter
Flutter 由 Google 开发的开源平台,可用于跨平台应用程序开发。它具有吸引力的原因是:快速的开发,富有表现力的精美使用者介面 (UI) 和类似本机的性能。使用Flutter的一些公司是 Google, eBay,BMW 等。
图 1、Flutter 官方网页
选择 Flutter 框架进行跨平台应用程序开发的主要原因:
- 高度稳定
- DART,AOT 编译语言
- 平稳的开发周期
- 强大的热加载功能
- 满足各种需求的UI套件
- 完美匹配的 Flutter 现在拥有 200 万用户(统计至 2021 年),并且还在不断增加。
Ionic
Ionic 是用于跨平台应用程序开发的增长最快且领先的开源框架。针对移动设备进行了优化的UI组件库和工具有助于快速构建交互式应用程序。使用 Ionic 的企业包括 GE,空中客车,Panera 等。
图 2、Ionic 官方网页
选择 Ionic 进行跨平台应用程序开发的主要原因:
- 开发人员友好
- 庞大的社区
- 角度优势
- 一个代码即可
- Cordova edge
- 高标准的UI
- 简化测试
React native
由 Facebook 在 2015 年开发的 React Native 可帮助企业使用 Swift,Objective C 和 Java 等语言构建类似于本机的应用程序。使用 React Native 框架的一些企业是 Facebook, Skype, Tesla 等。
图 3、React 官方网页
选择 React 本机框架进行跨平台应用程序开发的主要原因:
- 现成的组件
- 社区驱动
- 热加载
- 开源
- React Native for Web 功能
- 高度可靠
- 本地功能易于访问
- 本机UI组件的实现
Apache Cordova
Apache Cordova 是一个著名的跨平台应用程序开发框架,该框架使用 Web 技术,包括 HTML,CSS 和 JavaScript。使用 Apache Cordova 的一些企业是 Walmart,Adobe,QrStore 等。
图 4、Cordova 官方网页
选择Cordova框架进行跨平台应用程序开发的主要原因:
- 可重用代码
- 熟悉的技术
- 强大的社区支持
- 广泛的插件
- 免费和开源
- 离线开发
- 调试
- 实时重载
Xamarin
Xamarin是微软的 .NET 平台的扩展,是开发人员和企业最受信任和喜爱的框架之一。 Xamarin 使用 C# 开发所有内容。使用Xamarin跨平台框架的一些企业是阿拉斯加航空,美国癌症协会,JustGiving等。
图 5、Xamarin 官方网页
选择Xamarin框架进行跨平台应用程序开发的主要原因:
- 开源和免费
- 本机性能
- 用于访问本机功能
- XAML的基本框架,用于使用C#构建动态移动应用程序
- 用于通用模式的库,例如Model * View ViewModel(MVVM)
- 具有语法突出显示,代码完成,设计器以及其他专门用于开发移动页面的功能
因为笔者现在在大陆高教任教,发现中国开发者习惯使用的跨平台框架并非上述的这些,而是由 DCloud 即数字天堂(北京)网络技术有限公司所开发的 HbuilderX 这个 IDE 介面,在这个介面下可以开发网页前端程式,下图是 DCloud 官网的首页,标榜着 12 亿用户使用着由 DCloud 的开发工具所开发出来的 app,有 900 万的开发者使用着他们所提供的开发工具。
图 6、DCloud 官方网页
在此说明一下主要会使用到的开发工具 HbuilderX 以及跨平台框架 5+App。
HBuilderX
HBuilder 中 H 指的是 HTML 的首字母,Builder 是建设者构造者,X 是 HBuilder 的下一代版本,也简称HX。它是为前端开发者服务的通用 IDE,或者称为编辑器,与 VS Code, sublime, WebStorm 的功能类似。
可以用来开发普通 web 项目,也可以开发 DCloud 出品的 uni-app 项目、5+App 项目、wap2app 项目。目前有 900万开发者在使用HBuilder。旧版的 HBuilder 是红色 logo,已于 2018 年停止更新,绿色 logo 的 HBuilderX 是新版替代品。
HX 的特点如下:
- 轻巧:仅 10M 左右的绿色发行包(不含插件)。
- 极速:不管是启动速度、大文档打开速度、编码提示,都极速响应 C++ 的架构。
- Vue 开发强化:HX 对 vue 做了大量优化投入,开发体验远超其他开发工具。
- 小程序支持:国外开发工具没有对中国的小程序开发优化,HX 可新建 uni-app 小程序等项目。
- Markdown 利器:HX 是默认新建文件类型为 markdown 的编辑器。
- 强大的语法提示:HX 是中国唯一一家拥有自主 IDE 语法分析引擎的公司,对前端语言提供准确的代码提示和转到定义(Alt+鼠标左键)。
- 更强的 JOSN 支持:现代 js 开发中大量 JOSN 结构的写法,HX 提供高效的操作。
HX 的扩展性,支持 php、java、nodejs 等后端语言插件,并兼容了很多 vscode 的插件及代码块。还可以通过外部命令,方便的调用各种命令行功能,并设置快捷键。如果开发者习惯了其他工具(如vscode或sublime)的快捷键,在菜单工具-快捷键方案中可以切换。
5+App
5+ 是 html5plus 的缩写,即基于 html5 的增强扩展,它是一个跨 iOS、Android 的混合开发 App 解决方案,与 Cordova 类似,它基于 webview 渲染,封装了 Native.js 提供了大量原生能力给外部的 JS 呼叫。 5+App 不要求使用 vue,使用普通HTML即可开发。
Native.js 技术,简称 NJS,是一种将手机作业系统的原生物件映射为 JS 物件,在 JS 里编写原生代码的技术。如果说 Node.js 把 JS 扩展到伺服器世界,那么 NJS 则把 JS 扩展到手机 App 的原生世界。
NJS 大幅提升了 HTML5 的能力,NJS 突破了浏览器的功能限制,也不再需要像 Hybrid 那样由原生语言开发插件才能补足浏览器欠缺的功能。
NJS 编写的代码,最终需要在 HBuilder 里打包发行为 App 安装包,或者在支持 NJS 技术的浏览器里运行。 NJS 不再需要配置原生开发和编译环境,调试、打包均在 HBuilderX 里进行,没有 mac 和 xcode/swift 一样可以开发 iOS 应用。 NJS 的运行环境是集成在 5+runtime 里的,使用 HBuilder 打包的 app 都可以直接使用 NJS。
参考资料
- Flutter,https://flutter.dev/
- Ionic,https://ionicframework.com/
- React native,https://reactnative.dev/
- Apache Cordova,https://cordova.apache.org/
- Xamarin],https://dotnet.microsoft.com/apps/xamarin
- 2021 最新 15 个App跨平台开发框架,https://zhuanlan.zhihu.com/p/334804313
- DCloud产品综述, https://ask.dcloud.net.cn/docs/
- HBuilderX 簡介,https://hx.dcloud.net.cn/README
- 2020 年值得关注的十个跨平台开发框架,https://cloud.tencent.com/developer/news/578219
- HBuilderX文檔系統,https://hx.dcloud.net.cn/
Day 23 - 前端开发工具 - HBuilder X相关推荐
- 加速 Web 开发的 23 款前端开发工具
市面上有许多前端开发工具可以加速 Web 开发工作.本文是对 2019 年顶级 Web 开发工具的一次精选汇总,分别介绍了每款工具的关键特性,并已附上下载链接. Novi Builder Novi B ...
- 2017年前端开发工具趋势
本文来源于全球的5254份前端工具使用的调查报告,期望通过本文能够帮助大家更好的了解最新的前端开发工具趋势. 受访者组成 83%的受访者具有两年以上的前端技术经验,只有5%的受访者不到一年: CSS ...
- 超级棒的170+款web前端开发工具汇总,千万要收藏好!
作者:web前端开发 我们与企业内部的Web开发团队进行了很多次交流,研究了很长时间,最后将Debug工具与Web前端开发工具整理汇总在了一起,这些工具对每个Web开发人员都非常有用. 这些工具将使您 ...
- angularjs 开发流程_超级棒的30款web前端开发工具汇总,一定要收藏!
我们与企业内部的Web开发团队进行了很多次交流,研究了很长时间,最后将Debug工具与Web前端开发工具整理汇总在了一起,这些工具对每个Web开发人员都非常有用. 这些工具将使您的工作更加轻松,特别是 ...
- 细数那些年我用过的前端开发工具
图片发自简书App 一:HBuilder 下载地址:http://www.dcloud.io/ 飞速编码的极客工具,大幅提升HTML.js.css的开发效率. 使用HTML5开发,然后使用HBuild ...
- 174款前端开发工具汇总,学习,开发,事半功倍!
我们与企业内部的Web开发团队进行了很多次交流,研究了很长时间,最后将Debug工具与Web前端开发工具整理汇总在了一起,这些工具对每个Web开发人员都非常有用. 这些工具将使您的工作更加轻松,特别是 ...
- 2012年度最佳Web前端开发工具和框架总结
2012年度最佳Web前端开发工具和框架总结 2013/01/18 | 分类: 工具与资源 | 1 条评论 | 标签: 前端, 开发工具, 开发框架 分享到:0 来源:梦想天空 技术的快速发展让很多人 ...
- HbuilderX前端开发工具的安装和配置
HbuilderX前端开发工具的安装和配置 学习uniapp,使用HbuilderX编译器来按照官网的文档学习是最快速的,所以配置好开发工具,学习起来事半功倍,下面主要记录工具安装.微信开发者工具配置 ...
- 前端分离的前端开发工具_使我成为前端开发人员工作的工具和资源
前端分离的前端开发工具 Learning front-end development can be a bit overwhelming at times. There are so many res ...
最新文章
- mysql构造函数_MySQL行构造器表达式优化(Row Constructor Expression)
- Xcode学习C++(三、const)
- 跑山么、后浪们?2.0T+237匹大马力后驱CT4山路试驾体验
- java 返回两个值_Java - Number类
- php-resque 轻量级队列
- matlab中rgb转hsv,matlab实现RGB与HSV(HSB)、HSL和HSI的色彩空间互转
- hadoop 实战——网站日志数据分析
- 数据结构上机实践第七周项目3 - 负数把正数赶出队列
- MATLAB 创建不定长数组
- 【php】基础学习4
- 【temu】美国版数据采集API
- “/”应用程序中的服务器错误(System.Data.OleDb.OleDbException: 操作必须使用一个可更新的查询)
- 如何提炼游戏IP的价值,《梦幻西游三维版》给我们上了一课
- 航飞原始影像外方位元素_武汉大学生历年摄影测量试题及答案
- 沪深股票的复权计算(复权因子的应用)
- android 免root 模拟器,真正免root的root工具箱详细使用教程
- VMware安装国产化操作系统--统信UOS
- 三层交换机实现 VLAN 间通信
- 【BZOJ2152】聪聪可可 树分治
- 洛谷P2356 弹珠游戏
热门文章
- 【python入门项目实战】:手把手教你给心仪的小姐姐制作漫画头像,懂中文就会
- 重保任务重,HW压力大,看多维融合重保解决方案为您解忧
- 【数据结构pta】L3-1-二叉树及其遍历 / 二叉搜索树 / 完全二叉树 是否完全二叉搜索树分数 30
- 什么是开源协议?知识产权又是什么?—— 版权与开源简介
- java mysql dbutils_Java数据库--DBUtils
- 使用JS脚本打开多个网页的方法
- 事前多思考,事后多总结,做事多用心,事事都开心
- AndroidStudio学习1 APP门户界面设计
- linux命令解释pwd,Linux中pwd命令有什么用
- what make us roomates-兰存福