原生开发移动web单页面(step by step)1——传统页面的开发

  1. 云栖社区>
  2. 博客>
  3. 正文

原生开发移动web单页面(step by step)1——传统页面的开发

真五花肉 2018-08-22 20:06:00 浏览791
展开阅读全文

        在开始单页面开发之前,首先先从制作多页面开始,为了简洁的说明,采取了简化了的简单的web登陆注册页面模型(如下图)

页面模型图

    首先建立一个项目文件目录, 如下图

项目目录图

  然后在html文件夹中建立4个空白的html页面,分别取名为index.html, login.html, register.html和goal.html, 代码如下

index.html

index.html的html部分
index.html的js部分

  login.html

login,html的html部分
login.html的js部分

register.html

register.html的html部分
register.html的js部分

goal.html的代码很简单,仅仅作为测试页

共同样式如下图所示

css部分1
css部分2
css部分3
css部分4

最后得到的页面截图如下

index
login
register

总结:

在传统开发web页面的时候,使用多页面的形式开发,每个页面的开发流程一般都是先根据美工图进行html结构化,再通过样式美化,最后在js上处理业务逻辑。

在样式美化上,个别不规则的图片可以用css内联svg代码来实现,这样减少页面的引用的同时,还能灵活的更改代码要实现不同的图片。

业务逻辑的流程一般都是先选取dom元素,然后注册事件,通过事件更改页面布局,前后端数据交互等。


后续更新:传统多页面形式相比较单页面失去了很多灵活性,下次更新将每个页面对象化,通过一个html页面的js引入多个对象,然后操作页面对象来切换不同的页面。

案例链接


原生开发移动web单页面(step by step)2——Page对象

原生开发移动web单页面(step by step)3——App对象

原生开发移动web单页面(step by step)4——tap事件与slide事件

原生开发移动web单页面(step by step)5——nodejs服务器的搭建

原生开发移动web单页面(step by step)6——history api应用

网友评论

登录后评论
0/500
评论