乐趣区

关于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);
}
// 判断是都 Android
export 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}
退出移动版