Day 23 - 前端开发工具 - HBuilder X

Day 23 - 前端开发工具 - HBuilder X

完成了后端开发，接下来就要将透过前端跨平台开发框架来存取后端的资源，底下介绍几种常见的跨平台应用开发框架。

FlutterIonicReact nativeApache CordovaXamarin

所谓的跨平台应用开发框架就是，开发人员可以使用一套相同的代码，一次性地编码即可在多个平台上面运行起来，如 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/xamarin2021 最新 15 个App跨平台开发框架，https://zhuanlan.zhihu.com/p/334804313DCloud产品综述， https://ask.dcloud.net.cn/docs/HBuilderX 簡介，https://hx.dcloud.net.cn/README2020 年值得关注的十个跨平台开发框架，https://cloud.tencent.com/developer/news/578219HBuilderX文檔系統，https://hx.dcloud.net.cn/