同福

PC端和移动端多终端环境的架构设计

介绍

介绍

在现如今移动端如此火爆的时代,你的网站如果没有移动端版本势必会损失很多用户。

有人说,移动端浏览器也可以访问我的网站啊,可以放大后操作呀!要知道,这样的体验会大大影响用户的使用心情,除非内容的及其有价值的,否则一定会之间走掉或者关掉。

那么又有PC端版本又有移动端版本,如何让自己的网站或者平台同时兼任这两个不同的终端环境呢?

今天福哥就给大家好好的讲一讲关于网站平台的双终端环境的搭建方面的知识和经验~~

三种方案

同框架,不同路径

这种方案就是使用一套框架搭建一个网站或者平台,根路径分配给PC端,根路径下面开出一个子目录分配给移动端。

根据浏览器环境判断终端类型,PC端就进入根路径,移动端就进入子目录路径。

例如:

http://192.168.1.168/tfums/member/profile.htm

http://192.168.1.168/tfums/mobile/member/profile.htm

不同框架,同路径

这种方案就是使用两套框架搭建两个网站或者平台,一个负责PC端,一个负责移动端。

根据浏览器环境判断终端类型,PC端由PC端网站响应,移动端由移动端网站响应。

例如:

http://192.168.1.168/tfums/member/profile.htm

http://192.168.1.168/tfums-mobile/member/profile.htm

同框架,同路径

这种方案还是使用一套框架搭建一个网站或者平台,路径也只有一套,每个控制器同时实现PC端和移动端的功能。

根据浏览器环境判断终端类型,在控制器里面进行动态判断,PC端就由PC端逻辑响应,移动端就有移动端响应。

例如:

http://192.168.1.168/tfums/member/profile.htm

优缺点

同框架,不同路径

优点

  • 一个框架,便于维护

  • 一个框架,内部调用方便

缺点

  • 不同路径,用户体验不好

  • 不同路径,SEO不好

不同框架,同路径

优点

  • 同路径,用户体验好

  • 同路径,SEO好

缺点

  • 两个框架,同样功能需要实现两遍,或者建立共用的API

  • 两个框架,不能共享数据

  • 两个框架,不方便共享UGC内容

同框架,同路径

优点

  • 一个框架,便于维护

  • 一个框架,内部调用方便

  • 同路径,用户体验好

  • 同路径,SEO好

缺点

  • 每个控制器都要判断多终端的情况

  • 每个视图都要判断多终端的情况

  • 无论不同终端下面功能是否一致,都会有一样的控制器

适用场景

根据三种方案的优缺点以及搭建维护成本综合考虑,我们得出了一些经验。首先,没有完美的方案兼顾所有情况。其次,不同方案的侧重点不一样,这些方案的优点或将成为选择的主要因素。最后,福哥根据经验总结出来了一些场景以及适合的方案,大家可以参考一下!

同框架,不同路径

类似CRM、OA这种封闭式的系统,无需考虑SEO优化的问题,对用户环境的把控力很强的情况。

不同框架,同路径

大型网站或者平台,PC端和移动端的大部分功能都不一样,只有少数功能模块的路径一样的情况。

同框架,同路径

小型网站或者平台,PC端和移动端的功能基本都是一样的情况。

总结