如何把手机网页做得像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的开发过程中了。