H5混合开发是一种将H5页面嵌入原生App中的开发方式。相比于纯原生开发，H5混合开发有着快速开发、跨平台、易维护等优点，已经成为App开发的常用方式。以下是H5混合开发常用的代码及其原理或详细介绍。
1. WebView控件
WebView是H5混合开发的核心控件，它可以在原生App中展示H5页面。在Android中，WebView控件是在android.webkit包中，使用起来非常简单。
```java
WebView webView = (WebView) findViewById(R.id.web_view);
webView.loadUrl("http://www.example.com");
```
上述代码中，我们首先获取了WebView控件，然后调用loadUrl方法加载一个URL。
除了loadUrl方法，WebView还提供了其他常用的方法，比如loadData可以加载HTML数据，goBack可以返回上一个页面等等。
在iOS中，UIWebView和WKWebView是WebView的两个实现类，使用方法也类似于Android中的WebView。
2. JSBridge
JSBridge是用于实现原生App和H5页面相互调用的桥接工具。在原生App中，我们可以使用JavaScriptInterface注解将一个Java类暴露给H5页面调用，如下所示：
```java
class JsInterface {
@JavascriptInterface
public void showToast(String message) {
Toast.makeText(MainActivity.this, message, Toast.LENGTH_SHORT).show();
}
}
webView.addJavascriptInterface(new JsInterface(), "Android");
```
上述代码中，我们定义了一个名为JsInterface的Java类，在其中定义了一个showToast方法并使用JavascriptInterface注解进行标记。然后，我们通过webView.addJavascriptInterface方法将该Java类暴露给H5页面，并指定了“Android”作为前缀。
在H5页面中，我们可以通过该前缀调用原生App中的Java方法，如下所示：
```javascript
Android.showToast("Hello world!");
```
上述代码中，我们使用Android作为前缀，并调用了showToast方法。
3. 事件监听
在H5混合开发中，我们通常需要监听Web页面中的事件，以便在事件发生时作出相应的处理。例如，在原生App中需要对Web页面中的链接进行拦截，重定向到App中进行处理。在Android中，我们可以通过设置WebViewClient并重写shouldOverrideUrlLoading方法实现：
```java
webView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
if (url.startsWith("http://example.com")) {
// 拦截链接，并在App中进行处理
return true;
} else {
return super.shouldOverrideUrlLoading(view, url);
}
}
});
```
上述代码中，我们首先设置了一个WebViewClient，并重写了shouldOverrideUrlLoading方法。在该方法中，我们判断了链接是否以“http://example.com”开头，如果是，则拦截链接并在App中进行处理；否则，使用super调用默认的处理方法。类似的，在iOS中，我们可以通过实现UIWebViewDelegate和WKNavigationDelegate并重写相应的方法实现类似的功能。
4. 原生UI与Web互通
在原生App和H5页面中，UI的展示方式往往不同。例如，在原生App中展示一个对话框需要使用AlertDialog，在H5页面中则需要使用JavaScript/CSS实现。为了解决这个问题，我们需要实现原生UI与Web的互通。在Android中，我们可以通过如下的方式实现：
```java
webView.setWebChromeClient(new WebChromeClient() {
@Override
public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
// 在原生App中展示一个对话框
new AlertDialog.Builder(MainActivity.this)
.setMessage(message)
.setPositiveButton(android.R.string.ok, null)
.setCancelable(false)
.show();
result.confirm();
return true;
}
});
```
上述代码中，我们首先设置了一个WebChromeClient，并重写了onJsAlert方法。在该方法中，我们实现了展示一个对话框的功能。在H5页面中，我们可以通过调用window.alert方法触发该方法，并向其中传递一个消息，如下所示：
```javascript
window.alert("Hello world!");
```
在iOS中，我们同样可以通过JSBridge实现原生UI与Web的互通，具体实现方式与Android类似。
以上是H5混合开发常用的代码及其原理或详细介绍。通过这些代码，我们可以实现将H5页面嵌入原生App中，实现更加丰富的功能和更优秀的用户体验。
