APP封装从一门开始
一门提供APP封装底层开发框架,一键在线APP封装,200+原生APP模块,2000+JS映射接口按需自助封装

封装h5为app

在互联网时代,移动应用的市场越来越火爆。不仅仅是大型APP,像小程序、H5应用这种轻量级的应用越来越受到用户的欢迎。但是,由于不是原生应用,H5应用并不能和原生应用有同等的使用效果。封装H5应用为原生应用则可以弥补这一短板,本文将介绍封装H5应用为原生应用的原理及详细步骤。

一、封装H5应用的原理

封装H5应用为原生应用的原理其实很简单,这里主要分两步:

1. 将H5应用解压缩到本地目录中,并使用Webview调用index.html文件;

2. 使用桥接方式,将原生App和JS之间的交互打通。

第一步使用的是Webview技术,它是Android系统中的一种组件,可以在应用内加载网页并显示出来。我们只需要把H5应用的全部静态文件打包成一个zip压缩包,在App中解压缩,然后使用WebView控件打开H5应用中的index.html文件即可。

第二步则需要从两个应用技术角度考虑:原生应用和H5应用之间要如何通信?具体来说,就是如何实现原生App调用H5应用,以及H5应用回调原生App的功能。这一步主要实现思路是在原生App中内置一个JavaScript桥接文件,通过该文件,JS可以直接读取原生App的接口,另一方面,原生App也可以通过该文件直接调用H5中的js方法。

二、封装H5应用的具体步骤

下面详细介绍一下,封装H5应用为原生应用的具体步骤。

1. H5应用的打包和解压

我们首先需要将H5应用的代码打包成zip文件,命名为“app.zip”,然后将该zip文件复制到App的assets目录下。当App启动时,首先从资源目录中读取app.zip文件,并解压到磁盘上,如下所示:

```

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

//复制app.zip到sdcard根目录下,并解压到app目录中

String zipPath = Environment.getExternalStorageDirectory().getAbsolutePath() + "/app.zip";

String appPath = getApplicationContext().getFilesDir().getAbsolutePath();

FileUtils.copyFile(zipPath, appPath + "/app.zip"); //复制

ZipUtils.unZip(appPath + "/app.zip", appPath + "/app"); //解压

}

}

```

在解压之后,我们需要将H5应用的入口文件(index.html)通过Webview调用出来,如下所示:

```

public class MainActivity extends AppCompatActivity {

private WebView mWebView;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

//找到WebView控件,并加载index.html

mWebView = (WebView) findViewById(R.id.web_view);

String appPath = getApplicationContext().getFilesDir().getAbsolutePath();

mWebView.loadUrl("file://" + appPath + "/app/index.html");

}

}

```

2. 原生App和H5应用之间的交互

下面我们将介绍如何实现App和H5应用之间的交互。

首先,创建一个JsBridge类,这个类继承自WebViewClient。按照常规做法,在加载H5应用时用该类覆盖掉WebView的默认实现。我们可以通过这个桥接文件,在App和H5应用之间建立双向通信通道。下面的示例代码演示了如何将原生App的功能暴露给JS:

```

public class JsBridge extends WebViewClient {

private WeakReference mActivityRef;

//原生App调用H5应用

public void callJs(WebView webView, String jsFunc, String message) {

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {

webView.evaluateJavascript("javascript:" + jsFunc + "('" + message + "')", null);

} else {

webView.loadUrl("javascript:" + jsFunc + "('" + message + "')");

}

}

//H5应用调用原生App

public boolean shouldOverrideUrlLoading(WebView view, String url) {

if (url.startsWith("jsbridge://")) {

String[] urls = url.split("//");

String message = urls[1];

String func = urls[2];

callNative(func, message); //调用原生App的方法

return true;

}

return super.shouldOverrideUrlLoading(view, url);

}

//调用原生App的方法

private void callNative(String func, String message) {

Activity activity = mActivityRef.get();

if (activity != null) {

if ("showToast".equals(func)) {

Toast.makeText(activity, message, Toast.LENGTH_SHORT).show();

} else if ("callPhone".equals(func)) {

Intent intent = new Intent(Intent.ACTION_DIAL, Uri.parse("tel:" + message));

activity.startActivity(intent);

} else if ("openUrl".equals(func)) {

Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(message));

activity.startActivity(intent);

}

}

}

}

```

上面代码中, 原生App和H5应用中的通讯协议采用“jsbridge://”形式,其中jsbridge前缀为自定义协议的名称。H5应用通过window.location.href属性调用原生App的接口,调用格式为:

```

window.location.href='jsbridge://message/callNative?abc'

```

接下来,我们在MainActivty类中将JsBridge类作为WebView的Client实现,并注册全局的桥接对象:

```

public class MainActivity extends AppCompatActivity {

private WebView mWebView;

private JsBridge mJsBridge = new JsBridge(this);

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

//找到WebView控件,并加载index.html

mWebView = (WebView) findViewById(R.id.web_view);

mWebView.getSettings().setJavaScriptEnabled(true);

mWebView.setWebViewClient(mJsBridge);

mWebView.addJavascriptInterface(new JsApi(this), "JsApi");

String appPath = getApplicationContext().getFilesDir().getAbsolutePath();

mWebView.loadUrl("file://" + appPath + "/app/index.html");

}

}

```

在上面的代码中,我们使用addJavascriptInterface方法将原生功能依附到JS的window对象上,这样就可以在JS中直接调用该接口了。JsApi类的源代码如下:

```

public class JsApi {

private Activity mActivity;

public JsApi(Activity activity) {

mActivity = activity;

}

@JavascriptInterface

public void showToast(String message) {

Toast.makeText(mActivity, message, Toast.LENGTH_SHORT).show();

}

@JavascriptInterface

public void openUrl(String url) {

Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));

mActivity.startActivity(intent);

}

@JavascriptInterface

public void share(String message) {

Intent shareIntent = new Intent(Intent.ACTION_SEND);

shareIntent.setType("text/plain");

shareIntent.putExtra(Intent.EXTRA_TEXT, message);

mActivity.startActivity(Intent.createChooser(shareIntent, "Share this"));

}

}

```

三、总结

本文主要介绍了如何将H5应用封装为原生App,主要包括两步:将H5应用解压缩到本地,并使用Webview调用index.html文件;使用桥接方式,将原生App和JS之间的交互打通。如果你正在开发一些轻量级应用,H5应用的封装为原生App则是一个有效的方案,不仅使得用户使用起来更加方便,也增加了应用的流行度。


相关知识:
有哪些app是h5开发的
H5开发是一种基于HTML5、CSS3、JavaScript等前端技术的网页开发方式。在移动互联网时代,随着移动端应用的快速发展,H5也逐渐在移动端应用中得到了广泛应用。本文将介绍几个常见的基于H5技术开发的应用程序。1. 慕课网APP慕课网APP是一个移
2023-05-26
前端开发h5怎么加app
在前端开发中,需要将网页应用转化为移动应用,即将H5页面加入到APP中,主要有两种方式:使用Webview或者Hybrid App。下面将分别介绍这两种方式的原理和详细介绍。一、使用Webview1. 原理Webview 是一个系统级组件,可以直接嵌入应用
2023-05-26
h5制作工具app
H5 制作工具是针对前端开发人员、网站设计师、产品经理和市场人员等用户,基于 web 网页技术开发出来的一款用于制作 H5 页面的工具软件。目前市面上的 H5 制作工具有很多种,如百度 H5 制作、easee、PSCS EASY、HBuilder X 等等
2023-05-25
h5页面app开发解决方案
近年来,随着移动互联网的不断发展,越来越多的企业、机构和个人开始尝试通过开发APP来实现自身的业务目标。但是,APP开发的门槛相对比较高,而且开发和维护费用也比较昂贵。因此,一些企业开始转向使用H5页面来作为其主要的移动端展示方式,这种解决方案也被称为H5
2023-05-25
h5开发的app怎么不能保持后台运行
HTML5开发的应用程序在移动设备上普遍存在后台运行问题。这是因为HTML5应用程序在移动设备上实际上只是嵌入在某个浏览器中的网页。因此,这些应用程序就与其托管浏览器处于同一进程中。移动设备的操作系统通常采用一种叫做"Sandbox"的技术,即应用程序不能
2023-05-25
h5混合开发app如何升级
随着移动应用的不断发展,混合开发技术越来越受到开发者们的青睐。而在混合开发中,H5混合开发技术更是成为了热门话题。H5混合开发不仅可以快速开发各种平台的应用,而且对于维护也是非常友好的。但是因为H5混合开发的缺点也是不少,比如说性能不高、调试困难等。因此在
2023-05-25
h5混合开发app怎么升级
H5混合开发是目前比较流行的一种移动端开发方式,它的基本原理是借助WebView将HTML、CSS、JavaScript等网页技术和移动应用结合起来实现APP开发。在H5混合开发中,使用了一些框架或工具来实现APP开发,比如PhoneGap、Apache
2023-05-25
h5打包app不需要签名
HTML5(即Web)应用程序通常部署在Web服务器上,用户通过浏览器使用,这种应用程序的开发,部署和更新都非常方便。由于Web应用程序是运行在Web浏览器上,Web浏览器没有操作系统的特权,Web应用程序也就自然不具有操作系统特权。这就给Web应用程序的
2023-05-25
h5打包生成app
近年来,移动应用市场的发展迅速,许多公司和个人纷纷加入这个领域,想要在这个市场上分一杯羹。然而,要想建立一个商业级别的应用程序,需要一定的编程知识和经验。幸运的是,现在有一些技术可以帮助非专业开发人员打包他们的网站或 HTML5应用程序,以便将其变成一个原
2023-05-25
h5打包安卓app
H5打包安卓APP是将基于HTML5开发的网页,借助于工具打包成可安装在Android设备上的应用程序。H5打包安卓APP的优点是可以将HTML5技术与原生应用程序特性相结合,提供用户更好的产品体验,同时可以让开发者利用自己熟悉的网络技术开发APP,减少学
2023-05-25
h5 app开发用工具
在现代软件开发领域中,移动应用的开发已成为越来越重要的一部分。H5应用程序是一种基于HTML5 Web技术和设备硬件特性的轻量型移动应用程序。H5应用程序可以运行在多种设备和浏览器上,并且可以很好地适应不同的屏幕尺寸。本文将介绍一些常见的H5 app开发工
2023-05-25
app开发架构h5
H5(HTML5)是一种标准化的WEB标记语言,它可以组织和展示互联网上的信息,能够呈现出更加丰富、交互性更强的网页内容。H5技术不仅可以用于网页制作,也可以用于移动端APP开发中。本文就从APP开发架构层面,来探讨一下H5在APP开发中的应用原理和详细介
2023-05-25
©2015-2021 一门APP yimenapp.com  川公网安备 51019002001185号 蜀ICP备17005078号-3