为了账号安全,请及时绑定邮箱和手机立即绑定

靠实战进腾讯 我的实战课“HTML5 移动Web App阅读器”学习心得

写在前面

首先万分感谢慕课网一直以来提供无数免费优质的课程,满足了我的学习需求也提高了我的专业技能。今年推出了实战的付费课程后,立马购买了《HTML5 移动Web App阅读器》以表对慕课网的信任和支持。当然,完成实战后也是收获满满,此文作为该实战课程的学习总结,希望能帮助更多朋友了解前端开发并有所收获。

为什么要学Web app开发?

随着手机的普及和HTML5/CSS3的发布,移动页面的需求也越来越多,无论是用户界面的操作逻辑和后端数据处理都与PC端有很大不同,作为前端开发者应该去学习和了解移动端的开发技术。

  • Web app的优势

    1. 开发成本低
    2. 跨平台,适配成本低
    3. 迭代更新方便快速
    4. 无安装成本
  • 应用场景

    1. 传统的PC web站点(用到html5本地存储)
    2. hybrid app(如 天猫APP)
    3. Web app开发(如 微信)
  • 发展趋势
    无限趋近于Native App 开发一个web app需要哪些技术?

    我将在此分享一些HTML5阅读器的实战课程所用到的技术细节

一般来说移动端开发有几个基本原则:

  1. 轻量化
    移动端的浏览器性能和用户操作方式都没有PC端的那么重,所以要选择轻量化高性能框架。

  2. 快速开发
    根据这次html5阅读器的需求相对比较简单,考虑到引入一个jQuery框架的成本(开发成本,学习成本)会比使用原生Javascript的高,所以我们选择了后者。

  3. 维护简单
    在做PC端的web开发时,我们会将前端做模块化拆分(css和js分别放置在不同的文件夹),而我们这次只有一个页面且代码量较少逻辑简单,将三者写于同一文件中更易于维护。

  4. 高性能
    页面图标选择使用Base64格式图片、没有独立css和js文件,页面加载时能减少请求,利于提升加载速度。

页面原型

前端页面

  • 使用Viewport响应移动端页面
    在head标签里声明<meta name="viewport" content="width=device-width, initial-scale=1.0">
    手机浏览器把页面放在一个虚拟的窗口中,通常这个虚拟窗口比手机屏幕大(用户可以缩放显示页面),而viewport就是让网页开发者通过其大小,动态设置网页内容的尺寸大小,从而使得在浏览器上实现和web网页中缩小相同比例的效果。
  • icon图标采用Base64格式
    Base64是常用于传输8Bit字节代码的编码方式。有了Base64,我们可以将一副图片数据编码成一组字符串来代替图像地址。好处是可以减少http请求,也可以了解下使用base64图片的弊端。
  • css3属性
    在字体设置面板上的字号和背景选项中,大量使用了CSS3的border-radius属性,来完成圆角矩形和圆形的icon。底部边栏是有透明度的,使用opacity属性即可完成透明效果

数据交互

  • Ajax获取url地址
  • 通过地址获取json格式的数据
  • 对数据进行解码
  • 最终渲染到html中
开发流程

需要知道实际编码可能只是整个项目的一小部分

图片描述

学习总结

当你掌握了基础知识后,看待前端那些“技术”时,你会和这些技术的开发者们产生共鸣而不是排斥或抵触。你会欣赏其他人的解决方案,或者会因为他们的奇思妙想而衍生出新的灵感,从而触动你产生自己的解法。

前端发展日新月异,基础是很重要的。我认为的基础是各种规范加上计算机网络,数据结构,算法,操作系统等等一系列计算机基础知识。一个合格的前端工程师不仅仅是牢固掌握html/css/javascript会写页面懂设计切切图就可以了,还应该学习http标准、W3C标准和ECMAScript规范等理论知识,理解浏览器工作原理、渲染机制等等,掌握一门后端语言也是很有必要的。同时,千万不能为了学框架而去学框架,一定要先夯实基础,才能在今后的道路上走得更远。

图片描述

这次实战课程老师讲得非常细致,自己之前有一丢丢前端基础,能用和老师不同的方法去实现一些模块和功能,颇有成就感呐~
最后再次感谢慕课网这个平台,我会继续与慕课网一同进步,期待!加油!

点击查看更多内容
14人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消