H5初学记录

H5初学记录

——做webApp

一、工作需要，选择了学习一下H5，然后开发一个简单的H5 功能页面

我是android研发猿类，突然接触H5这个物种不太容易接受啊……

 

二、学习一种新语言，我选择先查阅部分资料，了解这是个什么东西，作用范围和使用方式还有它的好处

H5是个脚本标签语言，可以开发webapp 、ionic打包成 android apk 和 ios app，实现跨平台使用

三、了解个大概，就需要手动写demo来认识它，这就涉及到了codingh5 的工具

 

Webstorm（普遍使用的工具，当然我用的也是这款）https://www.jetbrains.com/webstorm/download/#section=windows

 

notepad++、txt（这两个得是好厉害的H5大牛使用的吧，各个控件属性都记得熟）

 

Hbuilder（DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE）http://www.dcloud.io/

 

WeX5、BeX5（这个是起步科技开发的两套开发框架，有提供demo效果不错） http://docs.wex5.com/

 

等等吧

 

四、简单的创建一个项目和默认的index.html页面和对应的index.css和 index.js；然后再次上网查询资料，熟悉关于它的属性 html、css、js（当然对于

不懂这三种语言的朋友，只需要简单熟悉下看几篇帖子介绍即可）

 

五、自己设定一个简单的页面，比如：登录页面、列表和标签内容页面等等吧，类似于android或ios的一些简单的页面，用H5来实现

学习即模仿，找几个别人写的demo，尝试着模仿

 

六、Coding之余感觉H5还是挺烦人的，尤其对于初学者来说，了解每一个标签的属性精力真心不够。所以可以找一下开源的H5框架来简化开发过程，

然后话费两个小时熟悉框架的UI使用有没有我们需要的效果（框架优点coding起来方便而且效果好，缺点不能够随意设置属性改变位置等）

开源框架：jQuery 、MUI、bootstrap还有其他，我用的是MUI布局页面效果都还不错

 

七、然后结合H5 coding工具和适合的H5开源框架，可以着手来coding几个页面了

我的是webstorm+mui+jQuery

八、个人感觉：html+css+js 三个文件共同使用，会提高代码的可读性，逻辑更清晰

Html：控制UI展示

Css：控制尺寸、距离、颜色资源

Js：控制逻辑处理

 

九、页面搭好之后，在逻辑中对不同的标签控件赋值、添加事件、改变展现方式、最重要的要调通两个接口，实现基本功能

接口：涉及到跨域的问题，一般的解决办法是后台做一下处理；对于自己研发的话用jsonp就挺好

十、最重要的一点，自学（查资料+QQ技术群+技术朋友+查资料+查资料+查资料+查资料），然后就是能静下心来去获取这些能量