浅谈移动优先的跨终端Web 解决方案

1、基准
我们定义测试基准和开发基准,也就是说我们定义我们在哪些浏览器上去进行调试。
这里写图片描述
左侧图主要是定义PC上的基准,其中A级项目中必须支持,B级可选,C级观察。

2、检测
主要是终端检测
这里写图片描述
这是一张架构图,其中紫色虚线部分是前置服务器,蓝色虚线部分是应用层服务器。
在前置服务器中有一个模块,根据UA返回一些信息。那返回什么信息呢?继续看图如下:
这里写图片描述
有这么几个属性,sw、sh是屏幕宽高,cw、ch是设备无关宽高,pr是一个sw/cw的一个比值,mobile = true表示当前页面运行在移动端。

3、接口
主要是接口在跨终端中的流程复用思想。如下图
这里写图片描述

那么接口该有谁定义呢??前端?后端还是测试??
这里写图片描述
其实应该是由前端来主动定制接口,因为他跟用户靠的最近。前端应该出一份接口文档给后端,后端负责数据产出。
详细流程见下图所示:
这里写图片描述

这里写图片描述

这里写图片描述

注意:校验包括:1.本地校验;2.node & browser版本

最后我们做下接口的总结:
A.接口带来的流程可复用
B.接口校验测试保障
C.接口文档和调试数据同步

4.定位
多页面定位和多视图定位,定位的实现有2中方式:
A.History-API
B.Hashbang

5.预览
跨终端预览工具Focus
1.支持UA改写
2.支持多设备
3.与业务系统的深度整合

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值