APP开发_开发一个入门的 H5 APP

2024-04-14 19:26:04
开发
18

1 开发环境的搭建与准备

1.1 安装 Android Studio

下载：首先，从谷歌的安卓开发者网站（https://developer.android.google.cn/studio/releases?hl=zh-cn）下载Android Studio的安装包。在下载页面中，可以根据自己的操作系统版本选择合适的安装包。
安装：解压下载的安装包，然后运行安装程序。在安装过程中，会弹出一系列窗口，包括许可证协议、安装目录选择、组件选择等。在默认情况下，Android Studio 会安装在 C 盘的 “Program Files\Android\Android Studio” 目录下。当然，也可以根据自己的需要更改安装目录。同时，可以选择是否安装 Android SDK、Gradle 等组件。建议在初次安装时，将所有组件都勾选上，以便在后续开发中无需单独下载和配置。

1.2 常见问题

（1）Android Studio 无法连接官网下载 SDK 组件问题

可以在 PING 服务器网站（如：https://ping.chinaz.com/dl.google.com ）中查询谷歌官方的的资源库网址 dl.google.com 在国内的映射：
在这里插入图片描述

然后找到延迟比较低的 ip 节点复制下来，并在 hosts （C:\Windows\System32\drivers\etc）增加如下内容：

#google_android更新

203.208.46.146 www.google.com
74.125.113.121 developer.android.com
203.208.50.33 dl.google.com
108.177.125.91 dl-ssl.google.com

最后重启程序后即可。

（2）Gradle 连接超时问题：connect time out

这种情况一般是 gradle-wrapper.properties 中 distributionUrl 的路径配置有问题，比如常见的配置如下：

distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-8.0-bin.zip
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists

注意在 https://services.gradle.org/distributions 网站中已经找不到 gradle-8.0-bin.zip 这个资源了，可以到该网站中找一个版本相似的资源，比如：

distributionUrl=https\://services.gradle.org/distributions/gradle-8.0.2-bin.zip

如果还是连接超时，或者下载速度过慢，可以直接去刚才的那个网址下载对应资源的压缩包，并将放到 C:\Users\***\.gradle\wrapper\dists\gradle-8.0.2-bin\25jlreiuz6u3xu2phlpa2vv4m 目录下。

注意：上面目录中的 25jlreiuz6u3xu2phlpa2vv4m 是 Android Studio 在首次下载 gradle 时自动创建的，这个名字不要改，另外下载的资源压缩包也不要解压缩。

2 创建新的 Android 项目

2.1 选择 Empty Views Activity

在这里插入图片描述

2.2 设置项目信息

在这里插入图片描述

注意：这里的 Lunguage 选择 Java。

之后点击 Finish 即可完成 Android 项目的创建。

3 H5 内容准备

3.1 准备手机前端调试工具

在移动设备的网页开发中，调试工作往往比 PC 端更为复杂和困难。由于移动设备的屏幕尺寸、浏览器兼容性以及网络状况等因素，开发者很难直接通过设备上的浏览器进行详细的调试。

推荐使用腾讯开源的调试助手 vConsole，该工具为移动端网页提供了一个轻量级的调试面板，使得开发者可以在不离开移动设备的情况下，进行日志查看、网络请求监控、元素查看等操作，极大地提高了调试的便利性。

vConsole 的安装与使用相对简单：

（1）安装：

在项目的根目录下，通过 npm 进行安装。打开命令行工具，输入以下命令：npm install vconsole 。

（2）使用：

在项目的入口文件中引入 vConsole：

const vConsole = new VConsole();

如果希望在特定环境下（如开发环境）使用 vConsole，而在生产环境中关闭它，可以通过环境变量进行判断。例如：

if (process.env.NODE_ENV === 'development') {  
  
}

完成以上步骤后，运行项目，你将在手机端的页面右下角看到一个绿色的 vConsole 按钮。点击这个按钮，就可以展开 vConsole 的调试面板，查看和调试页面中的 JavaScript 代码、网络请求、资源加载情况等。同时，你还可以在控制台中直接运行JS代码、查看手机信息以及调试本地存储等。

注意：vConsole 主要用于开发和测试环境，不建议在生产环境中使用，以免暴露敏感信息或影响用户体验。在发布应用前，请确保已关闭 vConsole。

3.2 准备 HTML 文件

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>test</title>
    <style>
        html {
            height: 100%;
        }

        body {
            margin: 0;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="divMain" style="height: 100%;width: 100%;"></div>
</body>

<script src="./vconsole.min.js"></script>
<script src="./index.js"></script>

</html>

3.3 准备 JS 文件

window.onload = function () {
    const vConsole = new VConsole();
	
	let divMainContainer = document.getElementById('divMain');
	divMainContainer.innerText = 'Hello H5!'
}

其中，window.onload 事件会在整个页面及所有依赖资源如样式表和图片都已完成加载后触发。

4 将 H5 资源引入 Android 项目中

4.1 创建 assets 资源文件夹

在 src->main 节点，右键点击。
选择 New->Folder->Assets Folder
将 H5 资源文件拷贝到该目录下。

此时的源码文件结构为：

MyAndroidProject/  
|-- app/  
|   |-- src/ 
|       |--main/
|           |--assets/
|               |--my_h5/ 
|                   |--index.html
|                   |--index.js  
|                   |--vconsole.min.js
|   |-- build.gradle  
|   |-- ...

4.2 修改布局文件 activity_main.xml

将默认的组件换成 WebView 组件：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <WebView
        android:id="@+id/mainview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

4.3 修改主窗体源码 MainActivity.java

package com.qkd.wufang;

import android.annotation.SuppressLint;
import android.app.Activity;

import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;

public class MainActivity extends Activity {

    @SuppressLint("SetJavaScriptEnabled")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        WebView webView = (WebView) findViewById(R.id.mainview);
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setUseWideViewPort(true); //将图片调整到适合webview的大小
        webSettings.setLoadWithOverviewMode(true); // 缩放至屏幕的大小
        webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); //只要本地有缓存，无论是否过期，都使用缓存
        webSettings.setAllowFileAccess(true); //设置可以访问文件
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true); //支持通过JS打开新窗口
        webSettings.setLoadsImagesAutomatically(true); //支持自动加载图片
        webSettings.setDefaultTextEncodingName("utf-8");//设置编码格式

        WebView.setWebContentsDebuggingEnabled(true);

        String url="file:///android_asset/my_h5/index.html";
        webView.reload();
        webView.loadUrl(url);
    }
}

之后编译打包即可。

编译：Build->Make Project
在这里插入图片描述

打包：Build->Generate Signed Bundle/APK…
在这里插入图片描述

原文地址:https://blog.csdn.net/h8062651/article/details/137746657 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：https://www.suanlizi.com/kf/1779471176020660224.html 如若内容造成侵权/违法违规/事实不符，请联系《酸梨子》网邮箱：1419361763@qq.com进行投诉反馈，一经查实，立即删除！

阅读全部