网站做成app教程

现在越来越多的网站都拥有自己的App，这不仅能够提高用户的使用体验，还能够提高网站的曝光度和知名度。那么，如何将一个网站做成一个App呢？本文将分别介绍两种实现方式。

一、基于Webview方式实现

Webview模式实现的原理是将网站的地址嵌入到应用程序中，然后直接使用WebView能力打开网址即可。需要注意的是，这种方式的APP比较机械、死板，UI效果不如原生。

1. 创建项目

打开Android Studio，点击"Create New Project"选项，创建一个新的Android工程。

2. 引入webview

```

dependencies {

implementation 'com.android.support:appcompat-v7:28.0.0'

implementation 'com.android.support:design:28.0.0'

implementation 'com.android.support:support-v4:28.0.0'

implementation 'com.android.support:support-media-compat:28.0.0'

implementation 'com.android.support:cardview-v7:28.0.0'

implementation 'com.android.support:recyclerview-v7:28.0.0'

implementation 'com.bumptech.glide:glide:3.8.0'

implementation 'com.github.bumptech.glide:glide:3.7.0'

implementation 'com.google.android.gms:play-services-ads:17.1.2'

implementation 'com.google.android.gms:play-services-auth:16.0.1'

implementation 'com.google.firebase:firebase-core:16.0.6'

implementation 'com.google.firebase:firebase-messaging:17.3.4'

implementation 'com.google.firebase:firebase-crash:16.2.1'

implementation 'com.google.firebase:firebase-config:16.3.0'

implementation 'com.google.firebase:firebase-perf:16.2.4'

implementation 'com.google.code.gson:gson:2.8.2'

implementation 'com.squareup.okhttp3:okhttp:3.9.1'

implementation 'com.loopj.android:android-async-http:1.4.9'

implementation 'com.yalantis:ucrop:2.2.0-native'

implementation 'com.jakewharton:butterknife:7.0.1'

implementation 'com.android.support.constraint:constraint-layout:1.1.3' implementation 'com.tencent.tbs.tbssdk:sdk:43910'

}

```

3. 创建WebView控件

添加一个WebView，为其添加布局文件。

```

android:id="@+id/webView"

android:layout_width="match_parent"

android:layout_height="match_parent"/>

```

4. 加载网页到WebView中

通过添加以下代码，可以将网站嵌入到APP中。

```

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

webView.getSettings().setJavaScriptEnabled(true);

webView.setWebViewClient(new WebViewClient(){

　　});

loadUrl("http://www.baike.com");

```

5. 运行测试

完成以上步骤后，点击画面上方"Run"按钮即可测试，效果如下。


二、基于混合开发方式实现

基于混合开发方式的实现原理是：通过native封装，实现对webview的管理，通过Javascript Interface的方式将native能力暴露给web页面。通过这种方式，可以将网站转化为原生界面，UI效果非常好，同时使用原生的组件，可以提高操作性能。

1. 安装Cordova

首先需要在命令行窗口安装Cordova，执行以下命令：

```

npm install -g cordova

```

2. 创建项目

创建项目命令为：

```

cordova create myApp com.example.myapp myApp

```

其中myApp为项目的名称，com.example.myapp是包名，最后一个myApp表示工程名称，命令执行之后在当前目录下会生成一个myApp文件夹。

3. 添加平台

执行以下命令，添加需要的平台：

```

cordova platform add ios android

```

4. 进入项目文件夹

进入myApp项目目录中，执行以下命令：

```

cd myApp

```

5. 编写HTML代码

在www目录下编写HTML代码。HTML代码会在webview中显示，所有对Native进行调用的逻辑都在HTML代码中实现。

6. 添加JavaScript代码

该代码需要放到HTML代码中，用于调用Native方法。

```

function callNative() {

if (window.Native) {

Native.show("hello world");

}

}

```

7. 添加native代码

通过Java or Objective-C编写Native代码，可以通过该代码实现一些Native能力。详细实现方式可以根据需求来选择，具体实现的方式可以参考React Native等其他框架的实现方式。

最后，打包发布即可。通过以上方法，就可以将网站做成App。如果需要独立的应用市场，可以考虑通过打包工具生成安装包发布到应用市场。