h5混合开发app常用代码

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中，实现更加丰富的功能和更优秀的用户体验。