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

2018-08-22 本文已影响203人真五花肉

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

页面模型图

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

项目目录图

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

index.html

index.html的html部分

index.html的js部分

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

共同样式如下图所示

css部分1

css部分2

css部分3

css部分4

最后得到的页面截图如下

index

总结：

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

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

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

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