单页面

最后更新于:2019-04-22 18:25:00

1 单页面简介

1.1 单页面定义:

单页面应用(SPA,Single-page Application)指只有一个主页面的应用,浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候,还是会分开写(页面片段),然后在交互的时候由路由程序动态载入。

1.2 单页面和多页面的区别:

相比之下,传统的多页面应用每个页面(只说动态页面)都是使用服务器端模板编写,然后请求这个页面的时候由服务器渲染成 html 再返回。两者对比,一个很明显的区别就是,多页面应用的 server 端要干两件事:提供数据+渲染,而单页面应用把渲染拿到浏览器端做了,服务器只提供数据就可以了。

1.3 单页面特点:

单页面不管你点击什么地方,永远不会刷新页面,都是感觉是在一个页面上完成的操作,操作过程中不进行页面跳转,url 地址栏#后面的字符在不停变化,且每一次变化,页面会跟随着实现局部刷新,呈现出不同的内容。

1.4 常用框架:

Angular / Vue / React / Ionic / Backbone 等。

1.5 查看一个页面是否是单页面的方式:

F12,Network,当 url 改变时看资源是否被刷新了一遍。

2 单页面中的页面浏览事件采集($pageview)

第一种 自动模式
配置参数 is_track_single_page (推荐使用这种模式),默认值为 false ,表示是否开启自动采集 web 浏览事件 $pageview 的功能
其原理是修改 window 对象的 pushState 和 replaceState 原生方法,在页面的 url 改变后自动采集 $pageview 事件,若用户浏览器不支持这两种方法或者是使用 hash 的路由模式,我们也会监听 popstate 和 hashchange 事件来自动触发 $pageview 事件

//SDK版本1.12.18以上支持,默认值为false
is_track_single_page:true

//注意默认的: sa.quick('autoTrack') 是需要的

第二种 手动模式
在页面切换的时候,手动调用 sensors.quick('autoTrackSinglePage') 来采集 web 浏览事件 $pageview ,这个方法在页面 url 切换后调用

// 比如现在是在 react 中可以在全局的 onUpdate 里来调用
onUpdate: function(){
    sensors.quick('autoTrackSinglePage');
}

  //vue 项目在路由切换的时候调用
router.afterEach((to,from) => {
    Vue.nextTick(() => {
        sensors.quick("autoTrackSinglePage");
    });
});
//注意: vue下因为首页打开时候就会默认触发页面更细,所以需要去掉默认加的 sa.quick('autoTrack')

此方法也可添加自定义属性,

sensors.quick("autoTrackSinglePage",{platForm:"H5"});

3 单页面的页面标题 $title 问题

对于单页面项目,神策 SDK 全埋点的预置事件采集的页面标题属性,可能存在异常
title 可能没有设置,或者设置的时机晚于我们发送数据的时机