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技术群+技术朋友+查资料+查资料+查资料+查资料),然后就是能静下心来去获取这些能量