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

/**
 * h5接收APP的值,通过暴露方法在window对象下
 */

window['bridge']=(message)=>{
    //more
}

你可能感兴趣的:(APP与H5交互之混合开发模式)