【已解决】微信浏览器页面重新排版的问题

一 遇到的问题

从App分享一条消息到微信，使用微信打开页面，发现页面被重新排版，数据没有渲染，场面惨不忍睹。

二 使用的框架

这个页面是一个简单的请求服务器数据并渲染查看详情的功能，前端框架用了Vue来进行模板渲染，然后请求数据的时候使用了axios来进行数据请求。

三 分析问题&解决

页面能够加载出来，但是数据没能渲染，可能是几方面的原因：

1. 页面引用了外部JS，可能Vue.min.js和axios.min.js没有加载成功
2. 请求没有发送成功，导致没有数据
3. 请求成功了，但是页面不支持Vue的数据绑定语法

根据以上的分析，新建一个简单纯的Html页面进行测试，发现可以引入外部Vue和axios文件。

测试代码：

    
    
    
    
    
    


    

        {{message}}
    
    

结果发现Vue的data数据可以正确显示：

由此可见，1和3猜想不正确。然后再写一个简单的axios请求，将返回的值赋给message，发现数据不能渲染了。所以初步断定导致微信重新排版是因为axios请求在微信浏览器里被拦截掉了，所以没有返回数据了。

所以，改写之前的请求为Ajax.但是发现了还是没有渲染成功，再仔细检查，发现在一个方法里有下面这句话

var urlStr = location.href

浏览器可能检测到location.href这个属性是一个跳转属性，所以又屏蔽了该方法的执行。

修改上述方法，不通过location.href获取参数，改为其他方法，再测试发现还是不行。

原来这个方法里使用了Es6的promise，所有浏览器又检测到并屏蔽执行，于是修改方法为正常的请求。

最后，终于数据显示出来。但是有个小图标没有显示，原因是给一个标签使用了background，改为img标签的加载方式图片就显示正常了。到这里，所有的页面终于显示正常。

四 总结

导致微信浏览器页面重新排版的原因经过自己测试有以下几个方面，以后应注意规避：

1. 不支持axios请求方式
2. 不支持location.href
3. 不支持ES6的promise
4. 不支持background加载图片的方式