現在越來越多的網站都有了自己的移動端網頁，但是將網頁轉化為app依然是許多企業(yè)和互聯網人士所感興趣的話題。因為在手機應用市場推出一款app需要受到審核等限制，而將網頁轉化為app可以在一定程度上避免這些限制。思路上，將網頁轉化為app有兩種方法：一種是把網頁嵌入到app里面，另一種是使用Webview方式打開網頁。本文將詳細介紹如何將網頁轉化為app。
一、嵌入方式
這種方式的優(yōu)點是輕量且開發(fā)成本低，這種方式打開網頁的效果和手機應用市場中的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名稱、網址等。
```
```
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方式
此方式使用的相對較多，主要是因為它具有快速的開發(fā)速度并且能夠多次迭代升級，但有時候需要進行深度定制。本文以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的方式，二者各有優(yōu)劣，開發(fā)者可以根據實際情況結合選擇。經過整合和封裝，這些代碼就可以應用于網頁轉化為app的開發(fā)過程中了。
