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

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"><WebViewandroid: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")@Overrideprotected 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…
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/815096.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

前端传参 json 后端处理 反序列化器 boolean转数字 空字符串转null

前端传参 json 后端处理 反序列化器 boolean转数字 空字符串转null

接口报错-JSON parse error: Cannot deserialize value of type java.lang.Integer from Boolean value 入参是Boolean&#xff0c;接收是Integer&#xff0c;导致报错。 自定义反序列化器&#xff0c;将boolean转integer。 import com.fasterxml.jackson.core.JsonParser;…
阅读更多...
llamafactory:unified efficient fine-tuning of 100+ lanuage models

llamafactory:unified efficient fine-tuning of 100+ lanuage models

1.introduction llamafactory由三个主要模块组成&#xff0c;Model Loader&#xff0c;Data Worker&#xff0c;Trainer。 2.Efficient fine-tuning techniques 2.1 Efficient Optimization 冻结微调&#xff1a;冻结大部分参数&#xff0c;同时只在一小部分解码器层中微调剩…
阅读更多...
【MATLAB源码-第36期】matlab基于BD,SVD,ZF,MMSE,MF,SLNR预编码的MIMO系统误码率分析。

【MATLAB源码-第36期】matlab基于BD,SVD,ZF,MMSE,MF,SLNR预编码的MIMO系统误码率分析。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 1. MIMO (多输入多输出)&#xff1a;这是一个无线通信系统中使用的技术&#xff0c;其中有多个发送和接收天线。通过同时发送和接收多个数据流&#xff0c;MIMO可以增加数据速率和系统容量&#xff0c;同时提高信号的可靠性。…
阅读更多...
建造者模式：构造复杂对象的艺术

建造者模式：构造复杂对象的艺术

在面向对象的设计中&#xff0c;建造者模式是一种重要的创建型设计模式&#xff0c;专门用来构建复杂的对象。它主要目的是将对象的构造代码与其表示代码分离&#xff0c;使同样的构建过程可以创建不同的表示。本文将详细介绍建造者模式的定义、实现、应用场景以及优缺点&#…
阅读更多...
数字乡村创新实践探索农业现代化与乡村振兴新路径：科技赋能农村全面振兴与农民幸福新篇章

数字乡村创新实践探索农业现代化与乡村振兴新路径：科技赋能农村全面振兴与农民幸福新篇章

随着信息技术的飞速发展&#xff0c;数字乡村成为推动农业现代化与乡村振兴的重要战略举措。科技赋能下的数字乡村创新实践&#xff0c;不仅提升了农业生产的智能化水平&#xff0c;也为乡村治理和农民生活带来了翻天覆地的变化。本文旨在探讨数字乡村创新实践在农业现代化与乡…
阅读更多...
Mac环境 llamafile 部署大语言模型LLM

Mac环境 llamafile 部署大语言模型LLM

文章目录 Github官网本地部署 llamafile 是一种可在你自己的电脑上运行的可执行大型语言模型&#xff08;LLM&#xff09;&#xff0c;它包含了给定的开放 LLM 的权重&#xff0c;以及运行该模型所需的一切。让人惊喜的是&#xff0c;你无需进行任何安装或配置。 Github https…
阅读更多...
年龄与疾病c++

年龄与疾病c++

题目描述 某医院想统计一下某项疾病的获得与否与年龄是否有关&#xff0c;需要对以前的诊断记录进行整理&#xff0c;按照0-18岁、19-35岁、36-60岁、61以上&#xff08;含61&#xff09;四个年龄段统计的患病人数以及占总患病人数的比例。 输入 共2行&#xff0c;第一行为过…
阅读更多...
ctfshow--web入门--文件上传--web168--web170

ctfshow--web入门--文件上传--web168--web170

web168 法一免杀脚本 还是检查&#xff0c;准备上传图片马 我写的是<?php eval($_POST[a]);?> 上传之后没反应 那么查一下&#xff0c;原来是发现对eval,system还有$_POST和$_GET进行过滤,$_REQUEST还可以用 那么再写一个马&#xff08;免杀脚本&#xff09; <?…
阅读更多...
工业通信原理——SCI通信

工业通信原理——SCI通信

工业通信原理——SCI通信 前言 SCI（串行通信接口）是一种常见的串行通信接口标准，用于在微控制器和外部设备之间进行串行通信。SCI通常用于实现点对点的、半双工的串行通信。 通信原理 物理连接：SCI通常通过串行数据线（TXD、RXD）、地线（GND）和可能的其他控制信号（如…
阅读更多...
给原生的 Stable Diffusion 模型按个涡轮发动机——DeepCache

给原生的 Stable Diffusion 模型按个涡轮发动机——DeepCache

AI绘图虽然模型种类繁多&#xff0c;但是一直存在一个缺点就是不够快。以至于Stability公司专门做了Turbo系列和Cascade版本。但是这些终究治标不治本&#xff0c;终于在CVPR2024收入中&#xff0c;我觉得DeepCache是一次不错的尝试。 论文 《DeepCache: Accelerating Diffus…
阅读更多...
AI 文献综述工具

AI 文献综述工具

find sources that support this statement:
阅读更多...
Redis入门（常用命令、spring-boot-starter-data-redis）

Redis入门（常用命令、spring-boot-starter-data-redis）

Redis redis是一个基于内存的key-value的结构数据库 启动&#xff1a; redis-server.exe redis.windows.conf 客户端链接&#xff1a;redis-cli.exe [-h 目标ip] [-p 端口] [-a 密码] 修改链接密码&#xff1a; 在redis.windows.conf中的requirepass 123456 常用的数据类…
阅读更多...
前端三剑客 —— JavaScript (第八节)

前端三剑客 —— JavaScript (第八节)

目录 内容回顾&#xff1a; 事件对象 事件对象 事件对象的方法和属性 案例-移动DIV 案例-图片轮换 Ajax 内容回顾&#xff1a; 事件对象 1.1 什么是事件驱动 1.2 事件绑定 事件源&#xff1a;发生事件的源对象 事件对象&#xff1a;它包含了事件所有的信息&#xff0c;它…
阅读更多...
兼容性测试用例

兼容性测试用例

备注：本文为博主原创文章，未经博主允许禁止转载。如有问题，欢迎指正。 个人笔记（整理不易，有帮助，收藏+点赞+评论，爱你们！！！你的支持是我写作的动力） 笔记目录：学习笔记目录_pytest和unittest、airtest_weixin_42717928的博客-CSDN博客 个人随笔：工作总结随笔_8、…
阅读更多...
01-shell基础入门

01-shell基础入门

一、Shell是什么&#xff1f; shell可以理解为连接用户和操作系统内核的接口&#xff0c;将用户命令编译成操作系统能够执行的指令传给内核。目前有多种shell实现 常用的Shell 一般在linux系统中&#xff0c;常见的shell有/bin/sh、/bin/bash等&#xff0c;它们代表我们的命…
阅读更多...
ESP32 S3音频开发

ESP32 S3音频开发

1. 音频硬件框架 2. 音频软件框架
阅读更多...
Golang教程六（单元测试，反射，网络编程，部署）

Golang教程六（单元测试，反射，网络编程，部署）

目录 一、单元测试 单元测试 子测试 TestMain 二、反射 类型判断 通过反射获取值 通过反射修改值 结构体反射 利用tag修改结构体的某些值 调用结构体方法 orm的一个小案例 对反射的一些建议 三、网络编程 socket编程 websocket编程 四、部署 打包命令 交叉编译…
阅读更多...
[攻防世界]Reversing-x64Elf-100

[攻防世界]Reversing-x64Elf-100

1.查壳 无壳&#xff0c;ELF文件 2.用IDA64打开 找到关键部分 这里有坑&#xff0c;看清楚v3是长度为3数组&#xff0c;里面放三个字符串 3.脚本解密 v1"Dufhbmf" v2"pGimos" v3"ewUglpt" v4[v1,v2,v3] a1[0,0,0,0,0,0,0,0,0,0,0,0] for i …
阅读更多...
人工智能研究生前置知识—科学计算库numpy

人工智能研究生前置知识—科学计算库numpy

人工智能研究生前置知识—科学计算库numpy numpy是python中做科学计算的基础库&#xff0c;对数组进行操作 整个numpy的操作和使用比较简单因此可以通过案例的学习掌握基本的用法在之后的学习中不断的进行熟悉和补充 创建数组&#xff08;矩阵 &#xff09; 创建的ndarray数组…
阅读更多...
使用cmake进行打包，包含可执行程序和动态依赖库

使用cmake进行打包，包含可执行程序和动态依赖库

平常代码开发中&#xff0c;有时候需要将写的程序打包成压缩包放到目标设备上进行运行测试。用CMake管理工程&#xff0c;实现使用make -jnproc package指令可以将工程进行打包&#xff0c;可执行文件存储在bin文件夹中&#xff0c;依赖库存储在lib文件夹中。 示例 1.工程目录结…
阅读更多...
最新文章

Copyright @ 2022~2023