创新实践前端开发方案的选择

创新实践项目前端开发方案的选择

创新实践的前端开发大致可以分为两类：面向PC端的网站和面向移动端的移动应用。
首先，不论是哪种前端开发项目，HTML+CSS+JavaScript都是必不可少的选择。除此之外，针对不同类型应用的特点，还有哪些开发方案可以选择呢？以下将针对不同的开发类型，同时结合目前大家掌握的技能，给大家推荐几个可行的方案。

一、PC端网站开发方案

PC端推荐采用BootStrap+JQuery的方案。首先可以使用BootStrap的网格系统实现网页的布局，然后再将每个部分所用到的网页元素和组件放置在相对应的单元内。网页所需组件推荐优先选用BootStrap提供的组件，对于不能满足需求的功能，可以再用JQuery实现。

二、移动应用前端开发方案

目前移动应用种类多样，有App、H5、小程序等等，同时开发方案也很多，大家需要先确定自己实践项目的应用类型，然后再选择开发方案。以下将针对App和小程序进行介绍。

1.APP开发方案的选择

APP开发目前又有原生应用开发、H5应用开发和混合应用开发几种，选择其中一种即可。其中的区别网上有很多介绍，大家可以通过其它文章详细了解。
（1）原生APP应用开发
原生应用又分为Android应用开发和IOS应用开发两种：

• Android应用可以使用Android Studio，Java语言进行开发，当然此类工具还有很多，此处不再多说。
• IOS应用可以使用IOS Xcode，基于Objective C或swift语言进行开发。

（2）H5应用和混合应用开发
此类开发方案很多，但基本上都是基于JavaScript语言的，BootStrap4，JQuery UI都可以快速创建移动应用用户交互界面，Angular、React、Vue也都是很好的主流框架。这里推荐大家采用Vue的框架进行前端应用开发，原因后面再说。开发工具推荐采用Hbuilder。

2. 微信小程序开发方案的选择

（1）开发前的准备
进行微信小程序开发，首先需要在微信公众平台进行小程序账户的注册，注册成功后需要复制下来自己的AppID，开发时要用。
然后需要下载安装微信开发者工具。
（2）开发方案的选择
有两种方案可供选择：

• 微信开发者工具
  直接使用微信开发者工具进行开发。虽然进行微信小程序开发也需要HTML+CSS+JavaScript的基础，但微信小程序有一套自己的语言和框架，其它框架不能直接使用，因此需要根据微信小程序开发文档进行学习。
• Hbuilder+uniapp+vue开发方案
  还可以使用Hbuilder的uni-app框架+vue的方式进行开发，然后由Hbuilder将HTML+CSS+JS代码转换为微信小程序的代码，再自动调用微信开发者工具进行运行调试。

（3）HBuilder+uniapp注意事项和学习资源
Hbuilder需要和微信开发者工具联合使用，且需要版本匹配，否则在HBuilder内进行运行时会出现无法打开微信开发者工具的错误，解决方法如下：

• 下载安装HBuilder和微信开发者工具的最新版，写此文时作者使用的版本是
  Hbuilder 2.6.11.20200409完整版，
  微信开发者工具 1.02.2004020稳定版。
• 安装完成后运行微信开发者工具，扫码登录，并且在“设置”–>“安全”中开启“服务端口”，然后关闭开发者工具。
• 运行Hbuilder，创建uni-app项目，在manifest.json文件中进行微信小程序配置，填写之前注册后获取的微信小程序AppID，保存。
• 在“运行到小程序模拟器”菜单–>“运行设置”中填写微信开发者工具的安装目录。
• 最后在Hbuilder中运行，耐心等待程序编译完成后，正常情况下会自动打开微信开发者工具，可以看到运行结果。
• 如果微信开发者工具无法打开运行，可以手工运行微信开发者工具，选择“导入项目”，从HBuilder创建的项目目录下，可以找到一个unpackage目录，之下在dev–>mp-weixin中就可以找到已经转换好的微信小程序源代码，导入运行即可。
• 以上过程可以参考教学视频。

如果采用Hbuilder un-app的开发方案，可以参考这些教学资源和教学视频。
因为uni-app采用的是vue的框架进行开发，学习vue可以参考这些教学资源和教学视频。