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.rhkb.cn/news/308576.html

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

相关文章

智慧公厕是智慧城市建设中不可或缺的一部分

智慧公厕是智慧城市建设中不可或缺的一部分

智慧城市的数字化转型正在取得显著成效&#xff0c;各项基础设施的建设也在迅速发展&#xff0c;其中智慧公厕成为了智慧城市体系中不可或缺的一部分。作为社会生活中必要的设施&#xff0c;公共厕所的信息化、数字化、智慧化升级转型能够实现全区域公共厕所管理的横向打通和纵…
阅读更多...
asp.net core 网页接入微信扫码登录

asp.net core 网页接入微信扫码登录

创建微信开放平台账号&#xff0c;然后创建网页应用 获取appid和appsecret 前端使用的vue&#xff0c;安装插件vue-wxlogin 调用代码 <wxlogin :appid"appId" :scope"scope" :redirect_uri"redirect_uri"></wxlogin> <scri…
阅读更多...
【数据结构】树与二叉树遍历算法的应用（求叶子节点个数、求树高、复制二叉树、创建二叉树、二叉树存放表达式、交换二叉树每个结点的左右孩子）

【数据结构】树与二叉树遍历算法的应用（求叶子节点个数、求树高、复制二叉树、创建二叉树、二叉树存放表达式、交换二叉树每个结点的左右孩子）

目录 求叶子节点个数、求树高、复制二叉树、创建二叉树、二叉树存放表达式、交换二叉树每个结点的左右孩子应用一&#xff1a;统计二叉树中叶子结点个数的算法写法一&#xff1a;使用静态变量写法二&#xff1a;传入 count 作为参数写法三&#xff1a;不使用额外变量 应用二&am…
阅读更多...
Python学习从0到1 day25 第二阶段 SQL ② Python操作数据库

Python学习从0到1 day25 第二阶段 SQL ② Python操作数据库

少年有梦&#xff0c;不应至于心动&#xff0c;更要付诸行动 —— 24.4.12 pymysql 除了使用图形化工具以外&#xff0c;我们也可以使用编程语言来执行SQL从而操作数据库 在Python中&#xff0c;使用第三方库&#xff1a;pymysql来完成对MySQl数据库的操作 安装 pip install py…
阅读更多...
什么是面向对象思想？

什么是面向对象思想？

面向对象不是一种技术&#xff0c;而是一种思想。它指导我们以什么形式组织代码&#xff0c;以什么思路解决问题。 面向对象编程&#xff0c;是一种通过对象方式&#xff0c;把现实世界映射到计算机世界的编程方法。 面向对象解决问题的思路&#xff1a;把构成问题的事物分解成…
阅读更多...
Go——网络编程

Go——网络编程

一. 互联网协议介绍 网络基础——网络传输基本流程_网络传输过程-CSDN博客 应用层HTTP协议-CSDN博客 传输层UDP/TCP协议_udp报文提供的确认号用于接收方跟发送方确认-CSDN博客 网络层IP协议-CSDN博客 链路层以太网详解_以太网数据链路层-CSDN博客 二. Socket编程 Socket是…
阅读更多...
中国省级人口结构数据集（2002-2022年）

中国省级人口结构数据集（2002-2022年）

01、数据简介 人口结构数据不仅反映了地域特色&#xff0c;更是预测地区未来发展趋势的重要工具。在这些数据中&#xff0c;总抚养比、少年儿童抚养比和老年人口抚养比是三大核心指标。 少儿抚养比0-14周岁人口数/15-64周岁人口数 老年抚养比65周岁及以上人口数/15-64周岁人…
阅读更多...
SpringBoot编写一个SpringTask定时任务的方法

SpringBoot编写一个SpringTask定时任务的方法

1&#xff0c;在启动类上添加注解 EnableScheduling//开启定时任务调度 2&#xff0c; 任务&#xff08;方法&#xff09;上也要添加注解&#xff1a; Scheduled(cron " 0 * * * * ? ") //每分钟执行一次 域&#xff1a; 秒 分 时 日 月 周 &#xff08;年&#…
阅读更多...
03-JAVA设计模式-外观模式

03-JAVA设计模式-外观模式

外观模式 什么是外观模式 外观模式&#xff08;Facade Pattern&#xff09;是面向对象设计模式中的一种&#xff0c;它为子系统中的一组接口提供了一个统一的高级接口&#xff0c;使得子系统更容易使用。外观模式定义了一个高层接口&#xff0c;让子系统更容易使用。子系统中…
阅读更多...
【JS进阶】第四天

【JS进阶】第四天

JavaScript 进阶 - 第 4 天 深浅拷贝 浅拷贝 首先浅拷贝和深拷贝只针对引用类型&#xff0c;因为简单类型直接拷贝值了 浅拷贝&#xff1a;拷贝的是地址&#xff0c;只拷贝一层 常见方法&#xff1a; 拷贝对象&#xff1a;Object.assgin() / 展开运算符 {…obj} 拷贝对象…
阅读更多...
Linux_ubuntu使用常见问题解决

Linux_ubuntu使用常见问题解决

文章目录 1.安装好了搜狗输入法却只能输出英文&#xff1a; 1.安装好了搜狗输入法却只能输出英文&#xff1a; 1.浏览器搜索搜狗输入法&#xff0c;下载好安装包 终端输入下列命令安装&#xff0c;找不到文件可以cd到该安装包的目录文件下&#xff1a; sudo dpkg -i sogoupin…
阅读更多...
自定义vue-cli 实现预设模板项目

自定义vue-cli 实现预设模板项目

模板结构 主要包括四个部分&#xff1a; preset.jsonprompts.jsgenerator/index.jstemplate/ 项目最终结构 preset.json preset.json 中是一个包含创建新项目所需预定义选项和插件的 JSON 对象&#xff0c;让用户无需在命令提示中选择它们&#xff0c;简称预设&#xff1b;…
阅读更多...
从 0 搭建公司Jenkins服务 Centos7

从 0 搭建公司Jenkins服务 Centos7

从 0 搭建公司Jenkins服务 Centos7 安装 (运维人员) 安装环境 配置DNS安装JDK17安装Jenkins安装Docker安装GIT安装Ansible启动Jenkins安装插件配置凭据配置共享库配置 (开发经理)使用 (开发、测试人员) 安装 (运维人员) 安装环境 配置DNS 新安装系统的服务器无法解析域名&a…
阅读更多...
云计算重要概念之：虚拟机、网卡、交换机、路由器、防火墙

云计算重要概念之：虚拟机、网卡、交换机、路由器、防火墙

一、虚拟机 (Virtual Machine, VM) 1.主流的虚拟化软件&#xff1a; 虚拟化软件通过在单个物理硬件上创建和管理多个虚拟环境&#xff08;虚拟机&#xff09;&#xff0c;实现资源的高效利用、灵活部署、隔离安全以及便捷管理&#xff0c;是构建云计算和现代化数据中心的核心…
阅读更多...
B端：弹窗的场景、类型、 选择策略串讲，让你的设计有理有据。

B端：弹窗的场景、类型、 选择策略串讲，让你的设计有理有据。

B端产品在什么情况下使用弹窗&#xff0c;弹窗又分为哪些类型&#xff0c;该如何选择合理的弹窗形式&#xff0c;很多小伙伴都是跟着感觉走&#xff0c;本文告诉你依据。 一、弹窗及其场景 在B端系统中&#xff0c;"B端"通常指的是面向企业&#xff08;Business&am…
阅读更多...
VMware Workstation部署最新版OpenWrt 23.05.3

VMware Workstation部署最新版OpenWrt 23.05.3

正文共&#xff1a;1456 字 51 图&#xff0c;预估阅读时间&#xff1a;2 分钟 我们之前介绍了如何在VMware Workstation上安装OpenWrt&#xff08;软路由是啥&#xff1f;OpenWrt又是啥&#xff1f;长啥样&#xff1f;在VMware装一个瞅瞅&#xff09;&#xff0c;也介绍了如何…
阅读更多...
十分钟学懂Java并发

十分钟学懂Java并发

并发简介 我们学到的基本上都是有关顺序编程的知识&#xff0c;即程序中所有事物在任意时刻都只能执行一个步骤。 编程问题中相当大的一部分都可以通过使用顺序编程来解决。然而&#xff0c;对于某些问题&#xff0c;如果能够并发地执行程序中的多个部分&#xff0c;则会变得非…
阅读更多...
lua学习笔记19（面相对象学习的一点总结）

lua学习笔记19（面相对象学习的一点总结）

print("*****************************面相对象总结*******************************") object{} --实例化方法 function object:new()local obj{}self.__indexselfsetmetatable(obj,self)return obj end-------------------------如何new一个对象 function object:…
阅读更多...
1688商品详情接口技术深探：解锁电商数据新纪元，实现业务自动化飞跃

1688商品详情接口技术深探：解锁电商数据新纪元，实现业务自动化飞跃

1688商品详情接口技术解析 一、引言 随着电子商务的快速发展&#xff0c;越来越多的企业开始关注如何利用API接口获取商品详情信息&#xff0c;以实现数据的自动化处理和业务的快速拓展。1688作为国内知名的B2B电商平台&#xff0c;其商品详情接口成为了众多企业关注的焦点。…
阅读更多...
三小时使用鸿蒙OS模仿羊了个羊，附源码

三小时使用鸿蒙OS模仿羊了个羊，附源码

学习鸿蒙arkTS语言&#xff0c;决定直接通过实践的方式上手&#xff0c;而不是一点点进行观看视频再来实现。 结合羊了个羊的开发思路&#xff0c;准备好相应的卡片素材后进行开发。遇到了需要arkTS进行解决的问题&#xff0c;再去查看相应的文档。 首先需要准备卡片对应的图片…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023