免费试用

中文化、本土化、云端化的在线跨平台软件开发工具,支持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需要
2023-05-18
做网站和app报价
做网站和app的报价是一个比较复杂的问题,需要考虑到很多因素,如项目的规模、功能需求、复杂度、开发周期、人力投入、技术难度、维护与升级成本等等。下面对做网站和app报价的原理和详细介绍进行探讨:一、做网站报价要做一个网站,报价首先要考虑到的是网站的规模和复
2023-05-18
做手机app网站
做手机app网站需要考虑很多因素,从基础的技术架构到设计和用户体验,每个细节都需要仔细考虑。在此,我将详细介绍如何做一个手机app网站。一、技术架构首先,技术架构是开发手机app网站的基础。通常,我们会采用响应式设计来开发手机app网站。在这种设计中,我们
2023-05-18
做一个网站和手机app要多少钱
做一个网站和手机app的成本并不是一个简单的问题,因为涉及到多种因素,如需求复杂度、功能、设计、市场定位、规模等等。本文将介绍这些因素,并尝试回答这个问题:做一个网站和手机app要多少钱?1. 需求复杂度需要开发的网站和手机app的复杂度是决定成本的主要因
2023-05-18
做app是java和php哪个好
要回答这个问题,我们需要了解 Java 和 PHP 分别是什么以及它们在 app 开发中的使用情况。Java 是一种跨平台的编程语言,最初由 Sun Microsystems 开发。Java 适用于各种领域的程序开发,从计算机应用程序到嵌入式系统,再到企业
2023-05-18
做app的网页
一般来说,制作 App 的方式有两种,一种是通过原生开发方式,即使用 Android、iOS 或 Windows 系统自带的开发工具和语言进行开发;另一种是基于 H5 技术开发 Hybrid App,其中 H5 技术(HTML、CSS、JS)通常应用在 W
2023-05-18
中国使用ionic做app
Ionic是一个快速构建混合移动应用的开源框架,它基于HTML、CSS、和JavaScript。Ionic的使用非常广泛,特别是在中国。在中国,许多公司和开发者在采用Ionic来构建业务应用和个人应用。下面我们将为大家介绍中国使用Ionic做app的原理和
2023-05-18
用html做桌面app
HTML是构建Web应用程序的标准之一。然而,它也可以用于构建桌面应用程序。这种桌面应用程序可以在用户的计算机上运行,而不需要在Web浏览器中打开网页。HTML桌面应用程序的构建需要两个主要部分:1) 应用程序的前端;2) 应用程序的后端。前端:前端指用H
2023-05-18
使用vue做app
Vue.js是一种前端JavaScript框架,它让开发者可以更轻松地构建交互式应用程序。Vue.js包含一个数据驱动的文档对象模型(DOM)绑定系统,以及组件模型,可将Web应用程序分解为可重用的、可增量的和通用的组件。Vue.js也容易集成到其它的项目
2023-05-18
vue可以做app界面吗
Vue是一种渐进式JavaScript框架,能够轻松构建交互式和高效的单页面应用程序(SPA)。虽然Vue本身是为Web应用程序开发而设计的,但它的特点适用于其他应用程序类型,例如移动应用程序。可以用Vue做出人们通常指的移动App的界面。Vue可以使用V
2023-05-18
vue可以做安卓app吗
Vue是一款流行的前端框架,主要用于开发Web应用。虽然Vue本身无法直接用于安卓应用的开发,但通过一些技术,我们可以将Vue应用转换成安卓应用。Vue使用的是HTML、CSS和JavaScript等标准Web技术来渲染页面,而安卓应用则需要使用Java或
2023-05-18
hbuilderx做app前端
HBuilderX 是一个基于 Visual Studio Code 的轻量级前端 IDE,致力于为开发者提供全面的前端开发工具链。它支持多种主流语言和框架,例如 HTML、CSS、JavaScript、TypeScript、Vue、React 等等,可以
2023-05-18
©2015-2021 智电瑞创 蜀ICP备17039183号