关于html5: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);}//判断是都Androidexport const isAndroid = () => {  return /(Android)/i.test(navigator.userAgent);}/*h5传值至App* window.webkit.messageHandlers.<name>.postMessage(<messageBody>)* 这个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

/** * h5接管APP的值，通过裸露办法在window对象下 */window['bridge']=(message)=>{    //more}