免费试用

中文化、本土化、云端化的在线跨平台软件开发工具,支持APP、电脑端、小程序、IOS免签等等

如何把手机网页做得像app

现在越来越多的网站都有了自己的移动端网页,但是将网页转化为app依然是许多企业和互联网人士所感兴趣的话题。因为在手机应用市场推出一款app需要受到审核等限制,而将网页转化为app可以在一定程度上避免这些限制。思路上,将网页转化为app有两种方法:一种是把网页嵌入到app里面,另一种是使用Webview方式打开网页。本文将详细介绍如何将网页转化为app。

一、嵌入方式

这种方式的优点是轻量且开发成本低,这种方式打开网页的效果和手机应用市场中的app效果类似。不过由于使用的是webview打开页面,所以加载速度和用户体验方面可能略逊于纯原生app。以下是具体实现方法:

1. 打开Android Studio,选择新建一个Project,选择Empty Activity项目,项目名称随意,记住包名和项目路径,这两个后面会需要用到。

2. 在res文件夹下建立一个xml文件夹和values文件夹,分别用于保存布局文件和字符串资源文件。

3. 在xml文件夹下新建一个activity_main.xml文件,这个文件用于设定app的界面布局,可以选择使用LinearLayout、RelativeLayout或GridLayout等方式布局,这里我们用LinearLayout为例。

```

android:orientation="vertical" android:layout_width="match_parent"

android:layout_height="match_parent">

android:id="@+id/webView"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_weight="1"/>

android:id="@+id/progressBar"

style="?android:attr/progressBarStyleHorizontal"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:max="100"

android:layout_weight="0"/>

```

4. 在values文件夹下新建一个strings.xml文件,这个文件用于保存app中用到的各种字符串资源,包括app名称、网址等。

```

WebApp

https://www.example.com/

```

5. 打开MainActivity.java文件,设定加载网页的Webview,并设定进度条等。

```

public class MainActivity extends AppCompatActivity {

private WebView mWebView;

private ProgressBar mProgressBar;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

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

mProgressBar = (ProgressBar) findViewById(R.id.progressBar);

mWebView.getSettings().setJavaScriptEnabled(true);

mWebView.getSettings().setSupportZoom(true);

mWebView.getSettings().setUseWideViewPort(true);

mWebView.getSettings().setLoadWithOverviewMode(true);

mWebView.setInitialScale(100);

mWebView.setWebViewClient(new MyWebViewClient());

mWebView.setWebChromeClient(new MyWebChromeClient());

mWebView.loadUrl(getString(R.string.web_url));

}

private class MyWebViewClient extends WebViewClient {

@Override

public boolean shouldOverrideUrlLoading(WebView view, String url) {

view.loadUrl(url);

return true;

}

}

private class MyWebChromeClient extends WebChromeClient {

@Override

public void onProgressChanged(WebView view, int newProgress) {

mProgressBar.setProgress(newProgress);

if (newProgress >= 100) {

mProgressBar.setVisibility(View.GONE);

} else {

mProgressBar.setVisibility(View.VISIBLE);

}

}

}

}

```

6. 以上就是把网页嵌入app的步骤了。最后,使用Android Studio把项目打包生成apk,就可以在手机上使用此app了。

二、Webview方式

此方式使用的相对较多,主要是因为它具有快速的开发速度并且能够多次迭代升级,但有时候需要进行深度定制。本文以Android为例,以下是具体实现方式:

1. 新建一个Activity、布局文件和Activity对应的Java类(例如MainActivity)。

2. 在activity_main.xml布局文件中加入如下代码:

```

android:layout_width="match_parent"

android:layout_height="match_parent">

android:id="@+id/webview"

android:layout_width="match_parent"

android:layout_height="match_parent" />

```

3. 在MainActivity类中加入如下代码:

```

public class MainActivity extends AppCompatActivity {

private static final String APP_CACHE_DIRNAME = "/webcache"; // web缓存目录

private WebView mWebView;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

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

WebSettings webSettings = mWebView.getSettings();

webSettings.setJavaScriptEnabled(true);

webSettings.setAllowFileAccess(true);

webSettings.setAppCacheEnabled(true);

String appCacheDir = this.getApplicationContext().getDir("cache", Context.MODE_PRIVATE).getPath() + APP_CACHE_DIRNAME;

webSettings.setAppCachePath(appCacheDir);

webSettings.setCacheMode(WebSettings.LOAD_DEFAULT); // 设置缓存模式

webSettings.setDatabaseEnabled(true);

webSettings.setDomStorageEnabled(true);

webSettings.setGeolocationEnabled(true);

webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS);

webSettings.setUserAgentString(webSettings.getUserAgentString() + " android_app");

webSettings.setUseWideViewPort(true);

webSettings.setLoadWithOverviewMode(true);

mWebView.setWebChromeClient(new WebChromeClient()); // 必须

mWebView.setWebViewClient(new WebViewClient() {

@Override

public boolean shouldOverrideUrlLoading(WebView view, String url) {

view.loadUrl(url);

return true;

}

});

mWebView.loadUrl("https://www.example.com"); // 加载你的网页

}

@Override

public boolean onKeyDown(int keyCode, KeyEvent event) {

if (keyCode == KeyEvent.KEYCODE_BACK

&& mWebView.canGoBack()

&& !mWebView.getUrl().equals("https://www.example.com")) {

mWebView.goBack(); // 后退操作

return true;

}

return super.onKeyDown(keyCode, event);

}

}

```

以上就是两种网页转换为app的方式,二者各有优劣,开发者可以根据实际情况结合选择。经过整合和封装,这些代码就可以应用于网页转化为app的开发过程中了。


相关知识:
做网站手机版和app要多少钱
做网站的手机版和APP是目前很多企业和个人必须考虑的问题,因为移动互联网的趋势已经成为了未来发展的趋势。要做一个网站的手机版和APP,需要考虑以下几个方面:1.选择应用开发平台现在市面上的应用开发平台非常多,包括React Native, Flutter,
2023-05-18
怎么将网站做成app
将网站变成 App 有两种方式:一、使用 WebView 获取网页的 HTML 源码WebView 是 Android 系统的一个 View 组件,可以加载并显示 HTML 页面,支持 HTML5、JavaScript、CSS3 等 Web 技术,而且还支
2023-05-18
学vue还是react喜欢做安卓app
移动端应用开发是一个快速增长的领域。在安卓平台上,开发人员面临着一个重要的选择,即使用Vue.js还是React来构建应用程序。本文将介绍Vue.js和React,以及选择哪个框架来开发安卓应用程序的考虑因素。Vue.js vs ReactVue.js和R
2023-05-18
网站开发好的代码可以用来做app吗
网站开发好的代码可以用来做app,但需要进行一些适配和改动,以适应不同的平台和设备。下面我们详细介绍一下这个过程。首先,通过HTML、CSS和JavaScript等技术,我们可以开发出具有响应式布局的网站。这样,无论用户在何种设备上访问网站,都能够自适应地
2023-05-18
如何做个网站app 步骤
做一个网站App其实就是将一个网站转化成移动应用程序,用户在移动设备上能够更方便地浏览和使用。下面介绍一下制作网站App的步骤:一、确定需求和功能在制作网站App之前,首先要确定所需要的功能和需求。比如要转化的网站是什么,主要功能有哪些,需要展现哪些信息,
2023-05-18
可以做h5的app
H5是一种基于HTML、CSS和JavaScript等技术的网页开发标准,也是一种跨平台、扩展性强的技术,可以使用H5技术制作出各种类型的应用,包括Web应用和移动应用。本文将介绍如何使用H5技术制作移动应用。一、H5移动应用开发的基本原理1. 环境搭建要
2023-05-18
把网页做成简易app
要把网页做成简易app,就需要使用一些工具和技术,下面将详细介绍其中的原理和步骤。1. 原理将网页转换成app的原理是通过将网页的HTML、CSS和JavaScript等静态资源打包成一个app,使其具备像app一样的特性。具体来说,就是通过Web应用程序
2023-05-18
把2个网站做成app软件
将网站转换成APP软件是一种非常流行的解决方案,它使得网站能够更方便、更快捷地在移动设备上运行。在本文中,我将向你介绍在开发APP软件之前需要了解的重要原理和步骤。首先要了解的是,将网站转换成APP软件与传统的开发APP软件有所不同。传统开发APP软件需要
2023-05-18
react js 做app界面
React 是一个快速、简单并且灵活的 JavaScript 库,它常用于创建用户界面。React 主要用于构建可复用的 UI 组件。React 应用程序以组件为基础构建,每个组件拥有自己的状态,并通过 props 接收数据。组件可以是类组件或函数式组件。
2023-05-18
html5可以做app
HTML5是一种用于构建Web应用程序的标准,其可以运行在绝大多数的现代浏览器中。随着Web开发技术的不断进步和HTML5标准的不断完善,现在已经可以使用HTML5来构建跨平台应用程序,也就是所谓的Hybrid App。Hybrid App是一种介于原生应
2023-05-18
html5应用开发做成app
HTML5应用开发即基于HTML5技术进行应用程序开发,该技术是针对移动设备的一种新型网页标准。HTML5应用开发具有跨平台、兼容性好、开发成本低等优点,越来越受到开发者的青睐。那么,如何将HTML5应用开发变成App呢?一、原理将HTML5应用开发变成A
2023-05-18
h5做出来的app
H5 作为一种新型的 Web 技术,其在移动应用领域的应用越来越广泛。随着 HTML5 技术的不断更新和完善,越来越多的公司采用 H5 技术开发移动应用程序。H5 App 是一种运行在手机浏览器中的应用程序,跟原生应用相比,它的最大优势是跨平台,一次开发就
2023-05-18
©2015-2021 智电瑞创 蜀ICP备17039183号