如果不知道或者没用pjax则不需要关系这个东西。

1、问题

为了提高移动端的体验,我用了jquery.pjax,但是每次在存在微信JSSDK的页面都会config失败。

但是刷新就好了,我已开始以为是js缓存的原因,后面发现不是。

这个问题卡了我很久,后面发现,当你进行pjax的页面回跳的时候,比如从A pjax 到 B,在从B pjax 到 A ,在从A pjax B 的时候,每次都会在url上追加一个参数。_%MAIN ,这个参数是pjax进行页面跳转时的标记的替换的容器的ID。

注意:这个问题仅仅发生在回跳,初次pjax跳转不会出现这个问题

2、解决

之前的文章(http://www.ptbird.cn/wexin-develop-06.html)说了,配置jssdk生成的url必须是完整的,或者是一模一样的url。

现在追加参数之后,服务器端生成的signature的时候使用的url与回跳的url不一样了,config会失败。

因为我那个项目只有一个页面使用了jssdk,而本身就是网页,因此我就强制所有的链接都必须进行正常的访问,而不是pjax跳转。

当然,那个页面上的链接可以进行pjax的链接跳转,这没什么影响、

还有一种解决办法就是使用ajax加载(推荐使用同步)

  • 通过ajax向服务端发送数据,并将当前的url发送过去再进行接收,这样url就是一样的
  • 使用同步加载的好处是,一定要等config加载完,才能ready()

3、pjax注意的事项

因为我对链接进行了一些标示,只有拥有标示的链接才能使用pjax,所以如下:

在每个a标签上加上 data-pjax 的属性,有该属性的链接才进行pjax的跳转。

//js控制如下
$(document).pjax('a[data-pjax]', '#MAIN', {fragment:'#MAIN', timeout:8000});

//pjax的效果控制
 $(document).on('pjax:send', function(e) {
        $.AMUI.progress.start();
    });
    $(document).on('pjax:complete', function(e) {
        $.AMUI.progress.done();
    });