App中嵌入H5頁(yè)面是一種常見的移動(dòng)端開發(fā)方式，H5網(wǎng)頁(yè)作為一種常見的Web界面設(shè)計(jì)技術(shù)，在移動(dòng)端也是非常流行的。本文將從原理和詳細(xì)介紹兩個(gè)方面來(lái)進(jìn)行講解。
一、原理
App中嵌入H5頁(yè)面的原理其實(shí)很簡(jiǎn)單，就是利用WebView控件，將一個(gè)H5網(wǎng)頁(yè)嵌入到App中作為其中的一個(gè)頁(yè)面。WebView控件是Android平臺(tái)自帶的控件之一，可以用于在應(yīng)用中顯示網(wǎng)頁(yè)和HTML的內(nèi)容。
在Android平臺(tái)上，開發(fā)者可以通過搭建一個(gè)WebView來(lái)顯示一個(gè)H5頁(yè)面。開發(fā)者應(yīng)該熟悉如何使用WebView，它可以讓你在應(yīng)用程序中顯示一個(gè)網(wǎng)頁(yè)。
在安卓中，使用WebView控件來(lái)嵌入H5頁(yè)面，主要的步驟包括：
1. 創(chuàng)建一個(gè)activity，并在這個(gè)activity的布局文件中定義一個(gè)WebView控件。
2. 像一個(gè)網(wǎng)頁(yè)一樣加載目標(biāo)H5頁(yè)面和數(shù)據(jù)。
3. 接收H5頁(yè)面?zhèn)鬟f的調(diào)用，并對(duì)此做出響應(yīng)。
相比于安卓平臺(tái)，IOS平臺(tái)上的WebView常用于顯示進(jìn)度條，處理JavaScript交互和傳遞數(shù)據(jù)等工作。
二、詳細(xì)介紹
1. 創(chuàng)建一個(gè)activity
一般需要至少一個(gè)布局文件和一個(gè)活動(dòng)類，布局文件顯式地定義出WebView控件，活動(dòng)類就負(fù)責(zé)將之生成與嵌入。
布局文件：
“`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頁(yè)面加載
無(wú)論是Android平臺(tái)還是iOS平臺(tái)，都需要為WebView控件設(shè)置一定的屬性，以便正確地顯示H5頁(yè)面，WebApp頁(yè)面包括CSS、JS和HTML文件。為了完成頁(yè)面加載，我們需要加載所有文件并將它們顯示在WebView中。在Android中，我們可以使用loadUrl（）方法，該方法將相應(yīng)的URL傳遞給該方法，以便加入WebView進(jìn)行處理。在IOS中，我們可以使用loadRequest（）方法，該方法將包含所有文件的NSURL傳遞給該方法，以便加入WebView進(jìn)行處理。
在Android平臺(tái)上：
“`java
WebView webView = findViewById(R.id.webView);
webV
iew.getSettings().setJavaScriptEnabled(true); //設(shè)置WebView屬性，能夠執(zhí)行JavaScript腳本
webView.loadUrl(“file:///android_asset/h5/index.html”); //WebApp頁(yè)面的URL
“`
在iOS平臺(tái)上：
“`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頁(yè)面?zhèn)鬟f的調(diào)用
H5頁(yè)面與原生App之間的交互，其實(shí)是通過JavaScript代碼實(shí)現(xiàn)交互的。在WebView之間傳遞數(shù)據(jù)，使用的是指定的JavaScript方法。在Android平臺(tái)上，使用WebView控件可以添加一個(gè)JavaScript的接口，以在WebView中注冊(cè)一個(gè)方法，以便可以通過JavaScript調(diào)用。在iOS平臺(tái)上，您可以通過重定向或JavaScript重新調(diào)用來(lái)調(diào)用您的Objective-C或Swift代碼。再次，這些所有代碼都在UIWebViewDelegate或WKScriptMessageHandler協(xié)議中實(shí)現(xiàn)。
在Android平臺(tái)上：
“`java
webView.addJavascriptInterface(new Object(){
@JavascriptInterface
public void showToast(String s){
Toast.makeText(MainActivity.this,s,Toast.LENGTH_SHORT).show();
}
},”android”);
“`
在iOS平臺(tái)上：
“`Swift
class View蘋果h5怎么開發(fā)appController: UIViewController, WKScriptMessageHandler {
override func viewDidLoad() {
super.viewDidLoad()
// 創(chuàng)建WKWebViewConfiguration
let config = WKWebViewConfiguration()
// 創(chuàng)建WKUserContentController
let userContentController = WKUserContentController()
// 將WKUserContentController賦值給WKWebViewConfiguration
config.userContentController = userContentController
// 注冊(cè)要在JS中調(diào)用的方法
userContentController.add(self, name: “showAlert”)
// 創(chuàng)建WKWebView
let webView = WKWebView(frame: self.view.bounds, configuration: config)
// 創(chuàng)建URL
let url = Bundle.main.url(forResource: “index”, withExtension: “html”, subdirectory: “h5”)!
// 加載URL
webView.loadFileURL(url, allowingReadAccessTo: url)
// 手動(dòng)添加約束
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
}
//在此觸發(fā) 對(duì)象橋接 WKScriptMessageHandler
func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
if message.name == “showAlert” {
let alertController = UIAlertController(title: “來(lái)自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)
}
}
}
“`
以上內(nèi)容，即為App中嵌入H5頁(yè)面的原理和詳細(xì)介紹。總之，利用WebView控件，開發(fā)者完全可以將現(xiàn)有的H5頁(yè)面嵌入到App中，且其實(shí)現(xiàn)方法也并不難。對(duì)于大多數(shù)互聯(lián)網(wǎng)公司、電商公司等需要快速迭代的業(yè)務(wù)場(chǎng)景來(lái)說，這種開發(fā)方式有眾多的優(yōu)點(diǎn)，如高效、快速、易維護(hù)等等。
