制作的app嵌入h5实现原理介绍

App中嵌入H5页面是一种常见的移动端开发方式，H5网页作为一种常见的Web界面设计技术，在移动端也是非常流行的。本文将从原理和详细介绍两个方面来进行讲解。

一、原理

App中嵌入H5页面的原理其实很简单，就是利用WebView控件，将一个H5网页嵌入到App中作为其中的一个页面。WebView控件是Android平台自带的控件之一，可以用于在应用中显示网页和HTML的内容。

在Android平台上，开发者可以通过搭建一个WebView来显示一个H5页面。开发者应该熟悉如何使用WebView，它可以让你在应用程序中显示一个网页。

在安卓中，使用WebView控件来嵌入H5页面，主要的步骤包括：

1. 创建一个activity，并在这个activity的布局文件中定义一个WebView控件。

2. 像一个网页一样加载目标H5页面和数据。

3. 接收H5页面传递的调用，并对此做出响应。

相比于安卓平台，IOS平台上的WebView常用于显示进度条，处理JavaScript交互和传递数据等工作。

二、详细介绍

1. 创建一个activity

一般需要至少一个布局文件和一个活动类，布局文件显式地定义出WebView控件，活动类就负责将之生成与嵌入。

布局文件：

“`xml

android:orientation=”vertical”

android:layout_width=”match_parent”

android:layout_height=”match_parent”>

android:id=”@+id/webView”

android:layout_width=”fill_parent”

android:layout_height=”fill_parent”/>

“`

2. H5页面加载

无论是Android平台还是iOS平台，都需要为WebView控件设置一定的属性，以便正确地显示H5页面，WebApp页面包括CSS、JS和HTML文件。为了完成页面加载，我们需要加载所有文件并将它们显示在WebView中。在Android中，我们可以使用loadUrl（）方法，该方法将相应的URL传递给该方法，以便加入WebView进行处理。在IOS中，我们可以使用loadRequest（）方法，该方法将包含所有文件的NSURL传递给该方法，以便加入WebView进行处理。

在Android平台上：

“`java

WebView webView = findViewById(R.id.webView);

webV

iew.getSettings().setJavaScriptEnabled(true); //设置WebView属性，能够执行JavaScript脚本

webView.loadUrl(“file:///android_asset/h5/index.html”); //WebApp页面的URL

“`

在iOS平台上：

“`Swift

let webView = WKWebView(frame: self.view.bounds)

let url = Bundle.main.url(forResource: “index”, withExtension: “html”, subdirectory: “h5”)!

webView.loadFileURL(url, allowingReadAccessTo: url)

self.view.addSubview(webView)

“`

3. 接收H5页面传递的调用

H5页面与原生App之间的交互，其实是通过JavaScript代码实现交互的。在WebView之间传递数据，使用的是指定的JavaScript方法。在Android平台上，使用WebView控件可以添加一个JavaScript的接口，以在WebView中注册一个方法，以便可以通过JavaScript调用。在iOS平台上，您可以通过重定向或JavaScript重新调用来调用您的Objective-C或Swift代码。再次，这些所有代码都在UIWebViewDelegate或WKScriptMessageHandler协议中实现。

在Android平台上：

“`java

webView.addJavascriptInterface(new Object(){

@JavascriptInterface

public void showToast(String s){

Toast.makeText(MainActivity.this,s,Toast.LENGTH_SHORT).show();

}

},”android”);

“`

在iOS平台上：

“`Swift

class View苹果h5怎么开发appController: UIViewController, WKScriptMessageHandler {

override func viewDidLoad() {

super.viewDidLoad()

// 创建WKWebViewConfiguration

let config = WKWebViewConfiguration()

// 创建WKUserContentController

let userContentController = WKUserContentController()

// 将WKUserContentController赋值给WKWebViewConfiguration

config.userContentController = userContentController

// 注册要在JS中调用的方法

userContentController.add(self, name: “showAlert”)

// 创建WKWebView

let webView = WKWebView(frame: self.view.bounds, configuration: config)

// 创建URL

let url = Bundle.main.url(forResource: “index”, withExtension: “html”, subdirectory: “h5”)!

// 加载URL

webView.loadFileURL(url, allowingReadAccessTo: url)

// 手动添加约束

webView.translatesAutoresizingMaskIntoConstraints = false

self.view.addSubview(webView)

webView.topAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.topAnchor).isActive = true

webView.leftAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.leftAnchor).isActive = true

webView.bottomAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor).isActive = true

webView.rightAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.rightAnchor).isActive = true

}

//在此触发 对象桥接 WKScriptMessageHandler

func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {

if message.name == “showAlert” {

let alertController = UIAlertController(title: “来自JS的提示”, message: h5封装app与原生有什么差距“Hello, World!”, preferredStyle: .alert)

let okAction = UIAlertAction(title: “OK”, style: .default, handler: nil)

alertController.addAction(okAction)

self.present(alertController, animated: true, completion: nil)

}

}

}

“`

以上内容，即为App中嵌入H5页面的原理和详细介绍。总之，利用WebView控件，开发者完全可以将现有的H5页面嵌入到App中，且其实现方法也并不难。对于大多数互联网公司、电商公司等需要快速迭代的业务场景来说，这种开发方式有众多的优点，如高效、快速、易维护等等。