APP与H5交互之混合开发模式 APP与H5交互之混合开发模式

APP与H5交互：
1.背景
2.如何交互（APP-H5，h5-APP传值）
一背景
由于App的发版周期偏长、灵活性差，如果有较大的方案变更，需要发版才能解决；如果存在bug，修复的难度比较大，作为H5为主要开发模式的Web App的灵活性就比较强，利用操作系统中的h5容器作为一个承载，对外提供一个url链接，而该url链接对应的内容可以实时在服务端进行修改，灵活行很强，避免了APP发版周期带来的时间成本。iOS存在的h5容器主要包括UIWebView和WKWebView，现在已经不接受使用 UIWebView ,WKWebView拥有更快的加载速度和性能，更低的内存占用
WKWebView 有一个内容交互控制器，该对象提供了通过JS向WKWebView发送消息的途径。需要设置MessageHandler，如下设置
二交互
H5传值APP：

//判断是都ios export const isApple = () => { return /(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent); } //判断是都Android export const isAndroid = () => { return /(Android)/i.test(navigator.userAgent); }/*h5传值至App * window.webkit.messageHandlers..postMessage() * 这个name就是设置MessageHandler的第二个参数,与APP约定的命名，类同下面appaction */ export const doAppAction = (ed) => { try {isApple()&&window.webkit.messageHandlers.appaction.postMessage(ed); isAndroid()&& window.SysClientJs.appaction(JSON.stringify(ed)); } catch (err) { console.log("do app err"+err); } }

【APP与H5交互之混合开发模式】APP传值H5