我是目录

  • 一、下载Android Studio
  • 二、新建安卓项目
  • 三、一个完整的安卓应用需要哪些东西
  • 1. 能访问网络
  • 2. 能回退,像App一样
  • 3. 自定义App图标,不要是个默认的Android 机器人就行
  • 4. 修改应用名称
  • 5. 修改主界面颜色,让它跟你的项目吻合
  • 6. 添加H5逻辑
  • 四、调试


一、下载Android Studio

安卓Studio 下载可以直接去官网,可以去网盘下载(现在是2020年05月22日)网盘地址 提取码: pgqm:

Android Studio h5 android studio h5开发_移动开发

二、新建安卓项目

选择 Empty Activity:

Android Studio h5 android studio h5开发_Android Studio h5_02


新建好了项目之后,需要修改配置文件,把我们的H5项目集成进去。

三、一个完整的安卓应用需要哪些东西

这里,你需要知道,一个完整的App需要哪些最最基础的功能,我列了一下:

  1. 能访问网络
  2. 能回退,像App一样
  3. 自定义App图标,不要是个默认的Android 机器人就行
  4. 修改应用名称
  5. 修改主界面颜色,让它跟你的项目吻合
  6. 添加H5逻辑

1. 能访问网络

这个其实就是一个配置项目,在 AndroidManifest.xml 加一行就行,具体如下:

<?xml version="1.0" encoding="utf-8"?>
<manifest>
    <application>
        ......
    </application>
    <uses-permission android:name="android.permission.INTERNET" />
</manifest>

示例代码中,加一段 uses-permission 的配置就可以了。

2. 能回退,像App一样

MainActivity 中添加如下方法就行,它其实是重写了方法:

public class MainActivity extends AppCompatActivity {
    private WebView webview;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
    	......
    }
    @Override//设置回退
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if ((keyCode == KeyEvent.KEYCODE_BACK) && webview.canGoBack()) {
            webview.goBack();
            return true;
        }
        return false;
    }
}

通过监听设备的onKeyDown 方法,实现回退的功能,因为它没有像Pc端的回退键。

3. 自定义App图标,不要是个默认的Android 机器人就行

个人觉得,这个是实际开发中很现实的一个需求,业务当然希望看到自己的东西像是自己的产品。从应用图标开始:

Android Studio h5 android studio h5开发_Android Studio h5_03


如上图所示,这里面在res文件夹里有5个mipmap 开头的文件夹,它里面放的就是图标,一大一小,但是修改的时候,只需要一个,图片,然后起两个不同的名字就行,大概像正面这样:

Android Studio h5 android studio h5开发_安卓_04


ic_launcher.pngic_launcher_round.png这两个图片是默认的,我们只需要替换图片,名称不变就行。

4. 修改应用名称

每个项目都有自己的名称,H5应用也一样,所以,这个也算是硬性需求了,修改也简单, 还是在AndroidManifest.xml文件中:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.we_research">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="应用名称"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:networkSecurityConfig="@xml/network_security_config"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

替换掉 android:label="应用名称"中的“应用名称” 就行。

5. 修改主界面颜色,让它跟你的项目吻合

为了让它看起来更完美,还可以修改App的主题颜色,让它与H5界面无缝吻合。这样看起来就和原生App一模一样啦:

Android Studio h5 android studio h5开发_H5_05


如上图所示,找到res/values/colors.xml文件,然后修改里面的色值就行:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#6c6c6c</color>
    <color name="colorPrimaryDark">#000</color>
    <color name="colorAccent">#03DAC5</color>
</resources>

6. 添加H5逻辑

最后一步,就是最关键的一步啦,添加H5逻辑,这里有两种方法 : 第一种是把H5逻辑放在Assets 文件夹中(这个需要自己建);第二种是已经有发布的链接了,直接引用H5项目的链接,然后在MainActivity 中添加方法:

public class MainActivity extends AppCompatActivity {
    private WebView webview;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        webview = new WebView(this);
        webview.getSettings().setJavaScriptEnabled(true);
//        webview.loadUrl("file:///assets/index.html"); 本地资源引用
        webview.loadUrl("http://178.178.178.178/projectname/"); // 链接引用
        setContentView(webview);
    }
}

这样,一个完整的H5集成方案就完成了。

撒花.jpg

四、调试

可能有朋友还会关心一个现实的问题,如何调试。

新安装的Android Studio是没有Module的,也没有模拟器,需要自己安装

找不到Module的话,可以通过这样去找:

Android Studio h5 android studio h5开发_Android Studio h5_06


然后模拟器就下载默认的虚拟设备就行,但是这里有一个点要注意,2020版本的Android studio是需要 Intel Hyper-V虚拟技术的,但是默认Windows系统没有打开,所以,根据正面的图片中的步骤,打开:

Android Studio h5 android studio h5开发_移动开发_07


这样就可以愉快地运行调试啦,哈哈,最后附上一张运行图:

Android Studio h5 android studio h5开发_H5_08

这样就大功告成啦,喜欢请评论,点赞,收藏三连哟~