面我们介绍四款比较常用的前端开发工具，具体哪一款最好用，因人而异，大家可以根据自己的情况，选择一款个人认为最好用的web前端开发工具。

Sublime Text

Sublime Text凭借其漂亮的用户界面和极其强大的功能，被誉为“神级”代码开发工具。

Sublime Text 支持多种编程语言的语法高亮，拥有优秀的代码自动完成功能。此外，它还拥有代码片段(Snippet)的功能，可以将常用的代码片段保存起来，在需要时随时调用。Sublime Text 支持 VIM 模式，可以使用VIM模式下的多数命令。

Sublime Text 还具有良好的扩展能力和完全开放的用户自定义配置与神奇实用的编辑状态恢复功能，支持强大的多行选择和多行编辑。

该编辑器在界面上比较有特色的是支持多种布局和代码缩略图。利用右侧的文件缩略图滑动条，可以方便地观察当前窗口在文件的哪个位置。

如果你已经有一定的前端基础，我相信Sublime Text更加适合你。Sublime Text可以让你快速地进行开发，强力推荐!

Visual Studio

Microsoft Visual Studio，简称VS，是微软公司的开发工具包系列产品，是目前最流行的Windows平台应用程序的集成开发环境(IDE)。所谓的集成开发环境，就是指用于提供程序开发环境的应用程序，一般包括代码编辑器、编译器、调试器和图形用户界面工具。这么复杂，谁看得懂呀?哎，简单来说，Visual Studio是一个具有很多用途的开发工具，它可以用来开发功能很强大的网站。这下懂了吗?

Visual Studio是笔者推荐的三款开发工具中功能最强大的，但是使用起来也相对复杂。不过用习惯了之后，开发效率还是非常高的。Visual Studio不仅可以开发静态网页，还非常有利于开发动态网页。在开发动态网页方面，可以说Visual Studio比Dreamweaver更胜一筹。前面我们说过，静态网页一般是没有交互性的，用户能做的也仅仅是浏览网页。而在动态网页中，作为用户，我们可以参与评论交流、上传文件，以及使用与服务器交互。

WebStorm

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。相比Dreamweaver很不智能的智能提示来看，WebStorm对html特别是HTML5和JS的智能提示简直堪称大神，很值得去使用。不过WebStorm不像Dreamweaver一样支持拖拽或者插入代码的方式来做HTML，如果你是初级入门者，需要拉表格完成布局的话，WebStorm完全不合适你的使用。WebStorm只适合手写代码的前端开发者使用。

相比VS 2010这样的工具来说，WebStorm足够的轻量级，下载只有几十M，安装快速方便，对机器性能要求低，占有足够少的内存，而且支持跨平台的使用，非常方便。而且对js的提示也足够的先进。还带js调试功能。

Dreamweaver

Dreamweaver，简称DW，是Adobe公司的一款非常优秀的网页开发工具，并且深受广大用户(特别是初学者)的喜爱。现在最新的版本是Dreamweaver CC。

对于初学者来说，Dreamweaver是最理想的开发工具，是广大前端入门者的首选。但是要强调一下，如果选择了Dreamweaver作为开发工具，我们一定不要使用Dreamweaver那种传统的、使用操作界面的方式来开发网页。这种开发方式已经被摒弃很久了。笔者当初刚刚接触前端开发的时候，也是深受其害。当时跟着一个视频学，第一步点击哪里，第二步点击哪里……点点点，全部是用鼠标来点，点到我头都晕了。

大家不要觉得Dreamweaver用鼠标操作的方式来制作网页既简单又方便。学了一段时间你会发现，你学到的根本不是知识，而只是开发网页时你应该点哪里!还有，当你用Dreamweaver鼠标操作的方式来制作网页时，你会发现弊端何其多!特别是冗余的代码，一堆一堆的，让开发出来的网站难以在后期进行维护。

当然，Dreamweaver还是挺不错的一个开发工具，我并非反对大家使用Dreamweaver，而是反对大家使用Dreamweaver界面操作的方式来制作网页。对于刚刚接触前端开发的新手来说，可以使用Dreamweaver作为开发工具，不过本人强烈建议你一定要用代码去写网页，别用鼠标点击的方式进行。还有，我可以很清楚地告诉你，现在大部分网站都不用鼠标操作实现的，而是靠编写代码。哪怕人家用Dreamweaver开发，都不会单纯采用鼠标点击的方式。

不过话说回来，Dreamweaver依然是初学者的首选开发工具，简单方便。但是我们一定不要使用“点点点”方式来开发网页，切记。

改造一个项目上 Google Play 与 App Store 时候，选择了 H5+，就是数字天堂、UniAPP、HBuilder 那家的技术方案。

这里总结下原因分享给大家做个参考，同时把相关的坑也跟大家说下，希望可以在某个时候帮到各位。

背景说明

选择这个方案原因后来想想其实很简单，就是这个应用是先有了 H5 版本，即移动端浏览器版本，然后想要复刻到 APP 端，在应用市场售卖。

请注意，“先有 H5 版本”，然后想要转成APP，不是从零开始哦。

选型与说明

其实参考的技术方案有很多，比如 React Native（Taro），Vue（UniAPP），甚至是 ionic、NativeScript 都简单试过，当然还有类似的 Cordova。

其实像 React Native（Taro）、Vue（UniAPP）以及 NativeScript 被砍掉其实很简单，背景就决定除非完全重构，否则这几个方案就是浪费生命，几乎等于重写一遍。这么说的原因有二：

1、H5 版本有的情况下，不论是 DOM 写法，还是虚拟 DOM 的组件，都是不通用的，比如你无法把 div 直接当做 view 来用，同时也不能将 button 当做 button 用……

2、H5 的 API 与移动端不通用，比如 video 的 API，在 H5 与移动端根本就是两个东西。

然后就是 ionic 与 Cordova 的排除原因，很简单：文档与环境。

1、ionic 与 Cordova 的文档在国内网络环境下不好找，出问题很难搞，尤其大概率我这个玩意儿要写插件……我都写插件了，那干脆上 OC 和 Java 算了。

2、再就是环境，没错，这俩都需要 XCode 与 Android Studio 在你的设备上。虽说我是都有，但是我的目的很单纯，就是把 H5 套壳啊，费那么大劲干嘛？一点都不环保。

剩下我还知道且用过的就是 html5plus 与 apicloud 了，后者已经卖身就算了，只剩下 html5plus。

其实吧，这个“土土”的，还是意外的好用的。

关于过程中的坑分享

这玩意儿怎么用就不介绍了，基本有手就能用。

下载——创建5+项目——把 H5 代码整进去——运行即可。

这里着重说说遇到的坑。

对了，先看下原来的 H5 效果，避免不知道是干嘛的。

简单来说，就是通过浏览器（或 APP 内置浏览器）加载 3D 模型，同时调用摄像头的图像，将 3D 模型与摄像头的拍摄一起绘制出一张图片，用来演示用。比如做工程的工程模型，在现场比划比划就可以大概看出来效果，不需要把场景也建模了。嗯，大概就这么个东西。

H5 端的技术就是 three.js + video + 摄像头，比较简单，安卓浏览器兼容性良好，苹果肾8没问题，其他刘海设备没测（后面打包成 APP 发现有点问题）。

好了，可以说问题了：

1、浏览器可以直接从 a 标签下载图片，APP 不行，需要解决授权问题。

2、苹果设备默认的 video 层级问题。

3、iOS 设备在 APP 内 video 自动播放权限问题。

4、iOS 设备加载本地路径文件问题。

上面几个是比较坑的，就是那种想不到却发生的……

问题1，这个需要把原本 a 标签下载的 base64 内容，通过原生的 bitmap 进行转换，最终再将 bitmap 存到相册。

问题2，先说问题是啥样的，就是 iOS 会把 video 全屏，且层级贼高，与上面图完全不同，就只能看到一个带有“直播”字样的 video。解决方案很简单，给 video 标签添加“webkit-playsinline playsinline”属性，即可要求同层渲染。

问题3，这个就是老生常谈的问题了，属于想不到，但是遇到有会“果然如此”的问题。没啥好办法，不用原生化处理，就只能产品层面变更，所以给加上了“播放”与“停止”的按钮……

问题4，这个最粗暴，直接把本地地址全部换成远程 URL 就好了，因为本来就是让用户自己传远程 URL 的，之前是想要本地演示加载快，所以用了本地地址。

还有就是一些具体的代码怎么写，比如如何获取 Android 与 iOS 的权限状态与申请权限，这种百度搜下就有了。

请注意，还真得用百度……“土土”的，国内还得是百度。

总结

其实现在用 H5 开发一些东西还是很简单，毕竟很多功能 H5 基本都能实现了（不考虑兼容性的话），可以看下这个网站，我比较喜欢去，可以定期学习新东西，强烈推荐收藏：What Web Can Do Today

别的没了，欢迎大家沟通方案，我是被坑的挺难受的，尤其是 iOS……