h5逻辑_H5+app 混合开发

app分类

app主要指的是在手机上运行的第三方应用程序～主要分为一下三类

• Native App (原生应用)：指的是基于手机操作系统开发出来的第三方应用程序
  • 需要下载(每次更新都需下载)
  • ios/android 操作系统不同，代码不兼容(需要开发两套不同的代码) -> 开发慢，开发成本高
  • 用户体验度好
• Web App(网页应用)：指的是使用web技术来开发的app
  • 不需要下载
  • 跨平台的，一套代码可以在多个浏览器使用->开发快、快发成本低
  • 用户体验不太好，不同的浏览器展示效果可能存在差异，部分功能无法实现
• HyBird App(混合应用)
  • 将原生应用与网页应用相结合，集原生应用 与 网页应用的优点于一身
  • 本质就是将网页内嵌在原生app中，然后产生一系列的交互～

h5与原生进行交互

[1] 判断h5页面打开的环境是ios/android

通过navigator.userAgent判断当前页面的运行环境

[2] JS调用ios/android的方法

js调用ios的方法

• 在ios中：在ios中定义的方法若是想被嵌入的h5页面调用

  • [1] 声明一个方法 如getAppInfo
  • [2] 注册对这个方法的监听

      wkWebView.configuration.userContentController.add(self, name: getAppInfo)
    

• 在js中

  在js中的调用使用固定语法window.webkit.messageHandlers.方法名.postMessage(数据)

  window.webkit.messageHandlers.getAppInfo.postMessage()
  

js调用android的方法

• 在android中

  在android中，需要暴露出一个全局变量JSBridge，类似浏览器环境中的Window

    // 获取webview的设置对象WebSettings webSettings = mWebView.getSettings()//  设置Android允许js脚本webSettings.setJavaScriptEnabled(true)// 暴露出JSBridge的对象到webView的全局环境mWebView.addJavascriptInterface(getJSBridge(), 'JSBridge')
  

  通过以上代码，只要是此webView运行的h5页面中就可以访问到这个对象了！

  tips：全局环境的变量名并不是固定为JSBridge的
  mWebView.addJavascriptInterface(getJSBridge(), ‘WBridge’)
  通过上述代码配置的全局环境变量名为WBridge

  若是后续需要h5页面访问的属性或方法都可以添加在全局变量中。

• 在js中

  在js中的调用是非常简单的，比如说在android中暴露全局变量为JSBridge，该变量上存在getAppInfo方法, 通过如下代码即可调用

    Window.JSBridge.getAppInfo()
  

总结-示例代码

function info() {if (navigator.userAgent.search(/(iphone|ipad|ipod)/i) >= 0) {return 'iOS' // 手机iOs} else if (navigator.userAgent.search(/android/i) >= 0) {return 'Android' // 手机安卓} else if (navigator.userAgent.search(/windows phone/i) >= 0) {return 'WinPhone'} else {return 'PC'}
}const platform = info()
const params = {...}
if (platform === 'iOS' && window.webkit) {
// showShareIcon 为ios抛出的方法window.webkit.messageHandlers.showShareIcon.postMessage(params)
} else if (platform === 'Android' && window.JSBridge) {  // JSBridge为Android抛出的全局对象window.JSBridge.showShareIcon(JSON.stringify(params))
}else {return false
}

[3]双方约定协议(schema)

h5与客户端预先约定好协议。

h5页面进行页面跳转时，客户端通过指定的方法拦截并解析url，如果检测到是预先约定好的协议，就调用相应方法～

以下面例子进行说明

• h5与客户端约定的协议为 bd-pst
• 若是url为web则在app内打开指定h5页面(该链接的url参数)
• 若是url为非web则打来app内指定页面
• 示例1

  jumpPage(url){location.href = 'bd-pst://web?url='+encodeURIComponent(url)
  }
  

  打开页面为h5页面 路径为 url

• 示例2

    location.href='bd-pst://login'
  

  打开app内的login页面

爱美丽美妆