这几天在 IOS 下 hybrid 开发遇到的坑 和大家分享下 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
murmur
V2EX    分享发现

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

  •  
  •   murmur 2018-04-19 12:15:01 +08:00 4779 次点击
    这是一个创建于 2782 天前的主题,其中的信息可能已经有所发展或是发生改变。
    我们是普通的企业开发,给集团下属开发办公软件的 用的 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 早就凉凉了
    TheOutgoing
        span class="no">6
    TheOutgoing  
       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
    @murmr 这边换了 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     Solana     942 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 26ms UTC 23:11 PVG 07:11 LAX 15:11 JFK 18:11
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86