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

这几天在 IOS 下 hybrid 开发遇到的坑 和大家分享下

  •  
  •   murmur · 2018-04-19 12:15:01 +08:00 · 4465 次点击
    这是一个创建于 2412 天前的主题,其中的信息可能已经有所发展或是发生改变。
    我们是普通的企业开发,给集团下属开发办公软件的 用的 cordova+vue。你在企业证书+混合框架下有很多为所欲为的事情 比如连 code-push 都不需要 直接把模块代码准备好放到 html 里加载就行,甚至还可以弄出点花样 比如说每个子公司有自己的标题和 login 背景,这些也就是改个 url 的问题,当然考虑到 login 背景的高清图有点大,我们会第一次把这个图下到手机存储里下次用缓存。

    问题开始在 ios 更新 11.3 有用户反应有时会出现无法点击的问题 经过调试 我们发现是 IOS 唤醒 app 后 所有的 vue click 事件全丢了,没办法,作为最基本的前端调试还要进行的,打 debug 版,上 safari 调试,结果断点只要走一行调试器连 app 全崩了,这就是高贵的 osx 带来的开发体验,真的 safari 的垃圾调试器照着 chrome 不知道差了几个 edge。

    有人会说为什么不用 touch 事件,这个主要是考虑到在电脑上调试的时候触发的都是 click,在考虑到插件的支持,我想很少会绑 touch,一般都是 click+fastclick/hammer.js 的解决吧。

    第一反应就是去 cordova 找更新,结果 cordova-ios 没更新,升级 vue,换 fastclick,各种方式无果,没办法,只能换 webview 了,冒着插件不兼容的风险换了 cordova 提供的 wkwebview,第一件事就是所有的接口全跨域了,这在以前 UIWebView 里是不敢想的,然后所有 file://的图片也无法显示。用 xhr 插件解决一部分,紧急用 nginx 给所有的接口加上对*的访问允许,把以前的 login 高清图改成低清图,直接走网络不缓存了,勉强这一关撑过去了。

    结果这几天,又有同样的问题出现了,比上次好一点的是只有 header 部分的 click 事件丢了,主体部分 click 没丢而且手势是正常的。没办法,只能继续升级,看 ionic 魔改了一个 cordova 的 wkwebview,前几天还在更新,没办法,换,用起来不错,准备上线,突然测试报了个大 bug,这个 webview 在 4g 下会卡 splash-screen,更魔幻的是在卡的时候看调试工具后台的 dom 渲染和 js 运行全是正常的,相当于 webview 的 display=none,简直不要太魔幻。

    幸运的是用在 cordova wkwebview 的 xhr 插件在 ionic wkwebview 的也有一个,凭着直觉换上去,先解决了再说。

    我想这就是很多所谓全栈的现状吧,忙着升级组件,用错误信息去搜有没有现成的解决方案,而真到了要自己去改 obj-c 层代码的时候,没几个人搞的定,还是要靠公司的 ios 专门开发去解决,或者干脆不管去等其他的解决方案,到了这个时候才知道什么叫无助。
    14 条回复    2018-05-23 09:41:40 +08:00
    Tneciv
        1
    Tneciv  
       2018-04-19 12:19:39 +08:00 via Android
    我觉得用 Ionic 写的还挺爽的
    xi_lin
        2
    xi_lin  
       2018-04-19 13:16:20 +08:00
    wkwebview 能怎么魔改?注入 js 了?
    murmur
        3
    murmur  
    OP
       2018-04-19 13:22:07 +08:00   ❤️ 1
    @xi_lin 改了底层的实现 xhr 那个插件会把所有的 xml http request 请求在 ios 层拦截 然后提前访问后转化成 blob 返回 这样就不存在跨域了 然而这个只能解决部分问题

    比如 file 的访问

    有的拦不住的 xhr 请求

    code-push 能访问其他目录的文件

    这些都魔改了才能实现 ionic 的做法是把 www 目录虚拟成一个 web 服务器 这样你的 app 就成了 localhost:8080,你只要对
    这个地址允许就可以

    如果是最原始 wkwebview,你是从 file 里启动的 app,哪里来的域呢,只能对*允许

    原先用 UIWebview 是没是的,因为这个 webview 根本不存在跨域
    SeanChense
        4
    SeanChense  
       2018-04-19 13:58:56 +08:00
    研发人力也不够吧
    murmur
        5
    murmur  
    OP
       2018-04-19 14:00:51 +08:00
    @SeanChense 企业开发那么多的业务如果不用 webview+html 做 纯 native 或者 react native 早就凉凉了
    StephenW
        6
    StephenW  
       2018-04-19 14:49:56 +08:00
    所以说到底是没有客户端开发的人力?但凡有个靠谱的客户端开发的人力你说的这些问题都不是事儿
    murmur
        7
    murmur  
    OP
       2018-04-19 14:52:20 +08:00
    @StephenW 需要的不是一个需要的是一对啊
    xi_lin
        8
    xi_lin  
       2018-05-04 09:42:34 +08:00
    @murmur 它是怎么拦截请求的呢? NSURLProtocol 的话应该会丢失 post 方法的 body 的,不是很好实现
    constance
        9
    constance  
       2018-05-22 09:36:34 +08:00
    请问是用 cordova-plugin-ionic-webview 和 cordova-plugin-wkwebview-ionic-xhr 吗?_(:з」∠)_
    murmur
        10
    murmur  
    OP
       2018-05-22 09:48:15 +08:00   ❤️ 1
    @constance 后面那个其实不是很必要 但是如果用了 code-push 可能要
    constance
        11
    constance  
       2018-05-22 11:20:23 +08:00
    @murmur 话说用 cordova+vue 这个搭配开发体验怎么样,这边准备把 ionic 换掉了
    murmur
        12
    murmur  
    OP
       2018-05-22 12:35:02 +08:00
    @constance 挺好啊 坑又不在 angular 或者 vue 库克留下的坑你用哪个框架都会遇到
    constance
        13
    constance  
       2018-05-23 08:58:54 +08:00
    @murmur 这边换了 cordova-plugin-ionic-webview 之后,百度地图 api 就请求失败了…请问这个情况下把 cordova-plugin-wkwebview-ionic-xhr 装上能解决吗…?
    murmur
        14
    murmur  
    OP
       2018-05-23 09:41:40 +08:00   ❤️ 1
    @constance 百度地图的 api 支持跨域么
    如果有对*允许的话在项目里配置百度地图地址的白名单就可以
    如果没对*允许要用 nginx 中转一次,加上跨域的头
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5689 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 01:35 · PVG 09:35 · LAX 17:35 · JFK 20:35
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.