点击上方“自学帮”，选择“添加关注”

各种福利第一时间送达！

大家好，我是黑马腾云。

为了感谢各位朋友长期以来对我们的支持，未来几日将推出众多优惠活动，敬请大家拭目以待！

近期，众多读者通过私信询问了关于中项目案例的诸多实施细节，本文将首先披露所采用的开发工具的相关信息。

本系列文章旨在指导初学者从基础阶段逐步过渡至实际操作，非常适合那些没有任何基础或基础薄弱的大学新生。考虑到时间的宝贵，具备较高水平的读者可以跳过本部分，转而关注后续的实战内容。

一

项目演示

前文所述项目已成功投入市场运营，若尚未亲身体验，可参考前一篇文中的链接进行尝试。

贴心的小编也为你录好了屏，方便各位看官儿查看。

商城项目APP

外卖项目小程序

以上项目都包含APP（IOS、）、小程序和H5。

观察了这一演示，大家心中想必涌现出各式各样的构思。那么，各位心中所想的具体方法都有哪些呢？

我们评估了众多可行方案，经过详尽的对比与分析，最终确定了uni-app作为多平台开发工具，关于选择该方案的具体理由，前文已有阐述。

选择不同的开放策略，相应的开发平台和工具亦有所区别。既然决定使用 uni-app 进行开发，那么所采用的工具自然应当是官方推荐的。

下边来看看它和其它前端开发工具的一些对比

二

前端工具对比选择

微软发布的免费跨平台编辑器，使用的人也是非常多。

Code是一款名为全称的现代化轻量级代码编辑器，它能够支持绝大多数主流开发语言的语法高亮、智能代码补全、自定义快捷键、括号自动匹配、代码片段管理、代码差异比较Diff以及Git等丰富功能。此外，它还支持插件扩展，并且特别针对网页开发和云端应用开发进行了优化。该软件具备跨平台运行能力，兼容、Mac和Linux操作系统，运行起来非常流畅。

HX（以下简称：HX）是一款将轻量级编辑器与功能强大的集成开发环境（IDE）完美融合的升级版本，它具备快速响应的性能、简洁直观的界面以及全面强大的功能。

这款国产编辑器不仅配备了世界级的语法分析引擎，而且与uni-app同属一家企业，因而具备了众多本地化的天然优势。

其显著特点在于执行速度迅速，加之卓越的代码提示与输入功能，显著提升了开发者的工作效率。

的兼容性极佳，众多用户纷纷采用（即便需要付费，但相信您定能想出对策，深谙此道）。

Text

这款代码编辑器界面美观，集成了众多实用功能，并支持多种插件。其功能丰富，涵盖了多选、多窗口操作以及API接口等多个方面。

这是一款免费、开源且支持多平台的前端开发集成环境，具体包括HTML和CSS。它由Adobe公司负责开发和维护，遵循MIT许可证的规定进行发布。该IDE兼容Linux操作系统以及OS X系统。

当然，除了上述提到的这些，还有其他诸多出色的工具（等等）。这些工具的根本目的在于辅助开发工作，所以挑选出最合适的那一个就足够了。

接下来演示如何利用来创建一个uni-app项目：

三

创建项目

下载安装

只需访问官方网站进行下载并安装，截至目前，该版本为3.0.7，而本系列产品的开发工作也是基于这一版本进行的。

注意：

官方发布的版本更新速度较快，若您的版本与最新版不同，那么软件的界面和功能可能会有所不同。

此系列文章在开发过程中需注意，若您处于mac操作系统下，所使用的快捷键及界面布局将存在一定差异。

安装过程就不再赘述，按提示一路点击下一步即可。

如果网速较慢或不方便下载，也可以私信我发你。

创建项目

在此，我们可以构建不同种类的项目，现以构建一个基于HTML技术的网络项目为例，具体展示项目构建的步骤。

在菜单栏选择“文件”，再点击“新建”，随后选择“项目”，亦或是在主界面直接点击“新建项目”，系统将呈现一个名为“新建项目”的界面。

若选择“常规任务”，需填写项目名称，选定保存路径，随后点击“建立”，项目即可顺利生成。

在“test”项目中进行右键点击操作，选择新建一个HTML文件，这样便能为该项目增添新文件。

输入文件名称：.html

文件创建成功后，预览文件

将信息录入文档并完成存档后，只需轻触页面右上方的“预览”按键，即可立即查看所做修改的效果。

创建项目以及添加文件的操作sublime text 3小程序，与其它编辑器或集成开发环境相比，差异并不显著。

软件界面

主界面如上图，界面比较简介，右下角还可以选择文件的编码。

打开、关闭项目

在菜单栏中点击“文件”，然后选择“打开目录”选项，随后在弹出的对话框中挑选与所需项目相对应的文件夹。

在项目上右键-移除项目或关闭项目。

移除项目会从本地电脑删除。

结束项目后，它将不再显示于常规项目区域，而是会在“已结束项目”专区呈现。若需重新启用已结束的项目，只需在相应项目上右键点击即可。

基于以上的Web项目，我们来演示一下的骚操作。

四

初体验

强烈建议您亲自操作一遍，对照着进行，这样才能更好地达到预期效果，事半功倍。

强大的代码块

使用代码块，可以减少重复代码工作量。

打开前述的.html文档，清除其中的所有信息，随后在英文输入模式下输入字母“h”。

根据提示，alt+前边的数字可以快速插入对应的代码块。

alt+9，快速输入html代码块。

这难道不是很简单吗？只需一个按键，就能轻松构建html的基本结构。你难道还在逐个字符地敲击吗？

强大的快捷键

熟练使用快捷键，码字就像飞一般的感觉。不信你看！！！

一定要跟着敲噢！步骤如下：

全程不用鼠标，感觉就像在linux上敲命令。

当然，刚开始使用时难免会记不住这么多，但多操作几次之后便会形成自然反应。如果实在难以记住，不妨查阅相关菜单。菜单上都会提供快捷键的指引。

强大的js解析引擎提示

js提示html的id

js提示html的

js提示css类名

跳转到class、id、js方法定义处

只需通过“alt+左键点击”这一操作，即可选取方法名、标识符、样式类别、文件（包括链接与图片），并实现直接跳转至相应的引用位置，无论是同一文件内的引用还是不同文件间的引用，皆可轻松实现。

演示完毕，接下来在看看具体的一些技巧

五

高效率技巧

文件保存

HX默认30秒保存一次文件。

无论hx被关闭，抑或遭遇断电或系统崩溃，那些临时文件都会自动进行保存，您无需担忧它们会丢失。

自动保存功能并未激活编译操作，唯有通过手动执行保存操作（如按Ctrl+S键）后，编译才会被触发。

随着前端预编译语言的日益增多，每次进行保存操作都会引发资源的大量消耗。得益于hx的出现，开发者得以集中精力编写代码，无需频繁地按Ctrl+S键。只有在需要编译的时候，才进行保存操作。

语法提示

世界级语法分析引擎一直是系列产品最大特点。

前端框架种类繁多，使用这些框架时，必须额外加载特定的语法提示库，而该提示库可通过在页面右下角进行选择来获取。

框架语法库隶属于该项目，一旦项目引入了该框架语法库sublime text 3小程序，那么该项目中的所有文件或HTML文件在代码助手的功能提示中都将显示该框架的语法规则。

若文件系独立于硬盘启动，并未整体拖拽至hx平台，则当前状况下将无法成功引入框架语法库。

代码助手

Hx的编程助手支持通过按下Alt键加数字键来快速选取具体的项目，这与使用中文输入法时通过数字选择词汇的方式相似。

语法帮助

将指针置于相应API位置，轻触F1键，即可直接链接至该API的官方指南。目前本系统兼容vue、uni-app、5+等多种API。

多光标批处理

Hx软件具备多光标操作功能，用户可以通过按下Ctrl键并点击鼠标左键来添加一个新光标，而使用Ctrl键加鼠标右键则可以移除一个光标或选定区域。

还可以选择相同词，ctrl+e 可选中相同的词做批处理。

列选择

hx的列选择，是alt+鼠标拖选

选择编码

若遇到一份陌生的文档，其中hx无法实现高亮显示或着色，您可以在屏幕右下角区域挑选并使用其他编辑工具来打开该文档。

若遇到文件打开后出现编码错误导致显示乱码的情况，您可以在界面的右下角找到编码选项，并选择重新以正确的编码方式打开该文件。

转到定义

快捷键是Alt+d，鼠标操作是alt+左键单击

此外，系统还具备一项独特功能，即支持将定义内容分栏显示，通过按下Ctrl+Alt+左键组合，便能够将某个定义的代码片段在屏幕的另一侧独立打开，从而便于多人协作共同查阅。

请使用【Ctrl】键与鼠标左键或【Alt】键与鼠标左键相结合，实现跳转至定义功能（操作步骤：在菜单栏中点击“选择”，并选择最下方的选项）。

自然，快捷键是可以进行个性化的调整的，您完全可以根据自己的使用习惯进行修改，不必非得跟我的一致。

返回上一次光标位置

在中，Alt+Left或点击工具栏上的

如有侵权请联系删除！