V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
gkiwi
V2EX  ›  前端开发

react 在手机 qq 浏览器, uc 浏览器上无法渲染

  •  
  •   gkiwi · 2016-08-01 12:39:53 +08:00 · 4519 次点击
    这是一个创建于 3034 天前的主题,其中的信息可能已经有所发展或是发生改变。

    使用 react 做了个应用,在开发模式下,所有浏览器正常运行;

    在使用 webpack build 之后, prod 下,手机 chrome 可以正常运行,部分 webview 也可以正常运行,但是手机 qq 浏览器和 uc 浏览器完全不进行 react 的渲染; 使用 weinre 调试了, js 没有报什么异常;

    这张是有问题的(手机 QQ),手机上只显示 456 : 1.png

    这张是被正常渲染的(手机 chrome) 2.png

    还有可能是哪里出了问题呢?

    第 1 条附言  ·  2016-08-01 15:47:06 +08:00

    搞定了。

    其中的一个原因是因为UC浏览器,在fetch时候,如果不设置headers中的Accept,那么UC会默认设置一串text/html值,可惜没有json支持,服务器端将返回一个html页面。老版本headers我只设置了Content-Type,其他浏览器的Accept默认则为*/*。不过奇怪的是,最初在prod下,UC和QQ似乎没有运行到fetch的地方;整个页面都是空白的;

    修改这个地方支持之后,页面就都ok了;

    PS:顺手碰到一个页面扭曲的地方,UC还不支持css calc,唉;

    14 条回复    2018-04-11 17:59:39 +08:00
    serco
        1
    serco  
       2016-08-01 13:31:32 +08:00   ❤️ 1
    加上 babel-polyfill 试试,有些手机浏览器连 es5 都支持不全
    plqws
        2
    plqws  
       2016-08-01 14:15:11 +08:00
    这时候应该 @ 那些浏览器的项目人员
    est
        3
    est  
       2016-08-01 14:20:05 +08:00
    不知道全球工单论坛这次灵不灵。
    gkiwi
        4
    gkiwi  
    OP
       2016-08-01 14:34:28 +08:00
    @serco 一直有这个的:)
    xxxyyy
        5
    xxxyyy  
       2016-08-01 15:10:56 +08:00 via Android   ❤️ 1
    试下去掉 weinre ,然后用 window.onerror 捕获错误并打印到 HTML 里
    fuxiaohei
        6
    fuxiaohei  
       2016-08-01 15:53:24 +08:00
    可以总结一下修改的地方发出来
    手机浏览器和微信浏览器对标准的支持各种奇特,只能经验总结啊
    xi_lin
        7
    xi_lin  
       2016-08-01 15:56:58 +08:00
    好奇 weinre 你是怎么调试 js 的?
    gkiwi
        8
    gkiwi  
    OP
       2016-08-01 23:59:34 +08:00
    @fuxiaohei
    刚刚又找了下,没有,都靠经验。。。
    少量: http://www.cnblogs.com/maplejan/archive/2013/04/26/3045928.html


    @xi_lin 主要用 weinre 查看一些前端代码看看结果。如果 js 异常,里面会有 log 。有时候也 console 一些;没有断点调试;
    xi_lin
        9
    xi_lin  
       2016-08-02 09:19:32 +08:00
    @gkiwi 我用的时候 js 文件都看不到内容…只能靠 log 输出
    del1214
        10
    del1214  
       2016-08-02 10:58:01 +08:00
    CSS calc 国产浏览器没几个支持的
    gkiwi
        11
    gkiwi  
    OP
       2016-08-02 14:16:42 +08:00
    @xi_lin
    我的 js 也看不到,只看 html , react 渲染后看结果;
    js 代码还是靠 chrome 模拟调试,大体无误再用真机;
    上面 Append 的地方,是用 Charles 抓包看到的


    @del1214 [摊手]
    hdr01
        12
    hdr01  
       2017-10-22 13:07:15 +08:00
    遇到同样的问题找到这来了。。react 开发的页面,chrome 下正常,但是 IE 和手机端浏览器都是空白的,查了下是 react 根本没有挂载到 dom 上。。。
    一年前的帖子了,不过还是想问下具体怎么解决的?
    gkiwi
        13
    gkiwi  
    OP
       2017-10-23 10:22:48 +08:00
    @hdr01 #12 使用 weinre,看下 console 呢?有什么提示信息么?
    我之前的有点忘记了,但是有一点还记得比较深刻,就是 React.Component 对象,一个是用 React 创建的,一个是第三方库创建的(忘记是哪个了,记为 S ),两者的结构不一样(因为 S 创建的数据结构版本和 React 自身的不同,报错的地方有个 Symbol,你可以通过 weinre 验证一下)。解决的方案,记得是用了 babel-polyfill,但是不太确定了。
    你先用 weinre 看下异常。

    另外你可以看看 IE 的 console,截图发一下。
    superelepant
        14
    superelepant  
       2018-04-11 17:59:39 +08:00
    @serco 确实是这个问题
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   990 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 20:21 · PVG 04:21 · LAX 12:21 · JFK 15:21
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.