欢迎点击头像关注，避免迷路
前几天，不少读者私信咨询前文中项目案例的种种实现细节，本文先揭晓使用的开发工具特别说明：系列文章定位是帮助初学者从入门到实战，适合零基础或基础较差uni-apper为了节约时间，高手勿进，可关注后续的实战部分一、项目演示前文提到的项目是真实上线的商业项目，如果还没体验的可以找前一篇文章的入口进入体验贴心的小编也为你录好了屏，方便各位看官儿查看1、商城项目APP视频加载中...2、外卖项目小程序视频加载中...以上项目都包含APP（IOS、Android）、小程序和H5看到这个演示，相信大家脑海里一定有不同的实现方式那么，你想到了哪些实现方式呢？我们考虑的实现方案有很多，对比分析后，最终选择uni-app多端开发（至于原因前文有提到）采取不同的开放方案，对应的开发环境和工具也有所不同既然选择了 uni-app 开发，工具自然是采用官方的HBuilderX下面来看看它和其它前端开发工具的一些对比二、前端工具对比选择1、VSCode微软发布的免费跨平台编辑器，使用的人也是非常多VSCode 全称 Visual Studio Code，现代化轻量级的代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、Git 等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化软件跨平台支持 Win、Mac 以及 Linux，运行流畅2、HBuilderXHBuilderX（简称：HX）是轻量编辑器和强大IDE的完美结合体，是HBuilder的升级版敏捷的性能，清爽的界面，强大的功能国产编辑器，且拥有世界级语法分析引擎，与uni-app出自同一家公司，有很多本地化的天然支持优势HBuilder最大的优势就是速度比较快，强大的代码提示和代码输入，大大增加了开发者的开发效率3、webStorm对js支持非常好，用的人也非常多（虽然收费，但相信聪明的你一定有办法，懂得）4、Sublime Text一款代码编辑器，拥有漂亮的用户页面和实用功能，以及多功能插件功能很多，包括多选择和多窗口和python api等功能5、Bracket免费、开源且跨平台的 HTML/CSS/JavaScript 前端WEB集成开发环境IDE由 Adobe 创建和维护，根据 MIT 许可证发布，支持 Windows、Linux 以及 OS X 平台当然除了这些，还有一些其它的工具（DreamWeaver等等）也非常优秀工具本质都是为开发服务的，因此选择适合的即可接下来演示如何利用HBuilderX来创建一个uni-app项目：三、HBuilderX创建项目1、下载安装直接去官网下载安装即可，截至写文时最新版本为：3.0.7，本系列开发也是采用此版本注意：官方版本更新比较快，如果你的版本不一致，可能软件界面和功能有些区别此系列文章我的开发环境为windows，如果你用的mac环境，快捷键和界面也有一定区别安装过程就不再赘述，按提示一路点击下一步即可如果网速较慢或不方便下载，也可以私信我发你2、创建项目HBuilderX可以创建多种类型的项目，此处以创建基于HTML的Web项目为例，演示项目创建过程新建项目通过菜单栏：文件-新建-项目，或者直接主界面点击“新建项目”都会弹出如下：“新建项目”界面如上选择“普通项目”，输入项目名称，选择存储位置，点击“创建”，就会成功创建项目新建文件在创建的“test”项目上右键-新建-html文件，就可以为项目添加文件输入文件名称：getstart.html文件创建成功后，预览文件在文件中输入内容并保存，点击右上角的“预览”按钮，就可以实时预览修改的内容创建项目和添加文件的过程，和其它编辑器或IDE并没有太大的区别3、软件界面主界面如上图，界面比较简洁，右下角还可以选择文件的编码4、打开、关闭项目打开项目菜单：文件-打开目录，弹出框中选择对应项目所在的文件夹即可关闭项目在项目上右键-移除项目或关闭项目移除项目会从本地电脑删除关闭项目仅仅是不会展示在项目区，会展示在“已关闭项目”区，右击已关闭的项目，可以再次打开基于以上的Web项目，我们来演示一下HBuilderX的骚操作四、HBuilderX初体验以下操作，强烈建议对照着打开HBuilderX亲自操作一遍，才能达到事半功倍的效果1、强大的代码块使用代码块，可以减少重复代码工作量打开刚才的getstart.html文件，删除里边的内容，在英文状态输入h字符根据提示，alt+前边的数字可以快速插入对应的代码块alt+9，快速输入html代码块怎么样？只需要一个键就能把html的基础结构写好，你还在一个个字符挨着敲吗？2、强大的快捷键熟练使用快捷键，码字就像飞一般的感觉不信你看
一定要跟着敲噢
步骤如下：接着上边的例子，新建html文件后，当前光标处于title标签内，此时我们给HTML设置title:hellohbuilder,完成后使用Ctrl+回车在当前的下一行插入空行,并将光标移动到下一行使用sc代码块生成一个script块来编写js代码(输入sc,回车)使用funn代码块编写一个JS方法helloworld(输入funn,回车)此时生成的方法的方法名是选中状态,我们只需要直接输入新的方法名helloworld即可，敲击回车光标会直接跳转至函数体中按向下、向下,Ctrl+回车,输入style回车,生成css代码区域定义一个Css类classA：输入.classA{ 然后回车，输入font 选择对应的字体后回车即可向下键跳转至下一个编辑区域输入<div 回车，输入i回车，输入d1，空格，c回车，回车ctrl+回车，添加空行divc回车，回车，输入hellworld全程不用鼠标，感觉就像在linux上敲命令当然，初次使用肯定记不住这么多，多敲几遍就形成条件反射了，实在记不住，可以查看对应的菜单菜单上都有快捷键的提示3、强大的js解析引擎提示js提示html的idjs提示html的tagnamejs提示css类名4、跳转到class、id、js方法定义处只需要“alt+左键点击”引用的方法名、ID、CSS类、文件(链接、图片),均可跳转到引用的地方,跨文件的引用也可以演示完毕，接下来再看看具体的一些技巧五、HBuilderX高效率技巧1、文件保存HX默认30秒保存一次文件不管是关闭hx，还是断电、崩溃，临时文件始终会自动保存，不用担心丢失默认的自动保存不会触发编译，只有手动保存（ctrl+s）时才会前端预编译型语言越来越多，每次保存都触发编译比较消耗资源，有了hx，可以专注写代码而不需要隔一会按一下ctrl+s，需要编译时再保存2、语法提示世界级语法分析引擎一直是HBuilder系列产品最大特点前端框架众多，框架的语法提示需要加载单独的语法提示库，框架语法提示库是在页面的右下角选择框架语法库是挂在项目下的，一个项目加载了一个框架语法库后，这个项目下所有js文件或HTML文件都会在代码助手提示这个框架的语法但如果一个文件是单独从硬盘打开，没有整项目拖入hx，那么此时无法加载框架语法库3、代码助手hx的代码助手，可以按alt+数字选择直接选择某个项目，类似中文输入法数字选词4、语法帮助标放到某api处，按下F1，就可跳转到这个api的官方手册目前支持vue、uni-app、5+等api5、多光标批处理hx支持多光标，按 ctrl+鼠标左键 就可增加一个光标，ctrl+鼠标右键 可取消一个光标或选区还可以选择相同词，ctrl+e 可选中相同的词做批处理6、列选择hx的列选择，是alt+鼠标拖选7、选择编码当打开一个不认识的文档时，即hx的无法高亮着色，可以在右下角选择使用其他编辑器打开当打开一个文件编码错乱，产生乱码时，也可以在右下角选择编码重新打开8、转到定义快捷键是Alt+d，鼠标操作是alt+左键单击HBuilderX还有一个特色是转到定义到分栏，ctrl+alt+左键，可以把一个定义处的代码打开在另一侧，方便共同查看支持切换【Ctrl+鼠标左键】或【Alt+鼠标左键】进行转到定义 （菜单【选择】，最后一个菜单）当然，快捷键可以进行个性化设置，可以修改，因此自己根据个人习惯设置即可，不一定和我的一样9、返回上一次光标位置在HBuilderX中，Alt+Left或点击工具栏上的<, 即可回到上一个光标位置10、快速打开文件在顶部工具栏直接搜索工程下的文件名并打开，或者使用快捷键ctrl+p比较常用的文件，可以在工具栏里添加到收藏夹11、目录内搜索项目管理器点右键，选：查找字符串(当前目录)，可在该目录下所有文件中搜索字符串以上快捷功能熟悉后，日常开发就可以大大提高效率还有一些功能：比如语法校验插件、svn/git项目管理插件、预编译器（less/sass）等，篇幅所限就不展开了，以后有时间再继续写另外如果有兴趣，以后高级篇讲讲HbuilderX插件的开发，随心所欲定制扩展你的编辑器功能下一篇文章，我们讨论下uni-app的MVVM框架思想讨论时间：你认为哪个开发工具最牛X？600万开发者的选择，HBuilderX凭啥？咱们留言区见
作者介绍：黑马腾云，码农、创业者、终身学习者
乐于分享技术、创业、人生思考关注我，一起为人生喝彩
（图片来源网络，侵删）
0 评论