H5游戏微端开发（一）：基础工程——WebView的使用

最新推荐文章于 2024-05-10 10:44:11 发布
最新推荐文章于 2024-05-10 10:44:11 发布
阅读量2.2k 收藏 4
点赞数 1
分类专栏： CocosCreator 文章标签： H5游戏 H5微端 WebView H5游戏微端 CocosCreator H5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wxc237786026/article/details/97887167
版权

写在前面

这是一篇关于H5游戏打包成android微端的总结，我主要做搬运工，很感谢各位技术大牛的贡献。

H5微端的原理很简单，就是使用Android App的WebView控件。那么什么是WebView呢？WebView是手机中内置的一款高性能webkit内核浏览器，在SDK 中封装的一个组件。 没有提供地址栏和导航栏，WebView只是单纯的展示一个网页界面。简单地可以理解为简略版的浏览器。

这篇文章的重点主要是对Android WebView的简单使用做一个介绍，并且提供一个工程作为参考。

WebView详细介绍：Android：这是一份全面 & 详细的Webview使用攻略。

H5微端工程地址：H5MicroClient。

话不多说，开始进入正题。


安装android开发环境（Android Studio，Android SDK）

直接上链接:

Android studio安装与配置

Android studio界面介绍，新建工程，打包

看完上面两篇文章，你应该对android开发环境有个基础的了解。


H5MicroClient工程

1、activity_main.xml添加webview控件

2、AndroidManifest.xml添加网络权限

<uses-permission android
最低0.47元/天 解锁文章
小葱CC
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Android开发：通过 webview 将网页打包成安卓应用
onlooker_C的博客
03-25 1190
商业转载请联系作者获得授权，非商业转载请注明出处。 For commercial use, please contact the author for authorization. For non-commercial use, please indicate the source. 协议(License)：署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 作者(...
微端开发 几点经验
熊小屁的专栏
06-25 1250
微端开发 几点经验        微端开发，就是把客户端资源变小，              失去画面效果，来达到网页游戏的体验效果        从而运营成本，大大降低，成本可以降低到和网页游戏一样的 首先 客户端要支持下载功能，单个文件下载         还要支持动态加载资源         在这里，如果你的客户端地图很大，地块多的话，建议用四叉树进行优化
Android开发：通过-webview-将网页打包成安卓应用
最新发布
2401_84152140的博客
05-10 710
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
ubuntu-html5-webview-template:用于从任何 html5 应用程序制作点击包的模板，使用 QML WebView 包装器以获得更大的灵活性
05-31
ubuntu-html5-webview-模板 用于从任何 html5 应用程序制作点击包的模板，使用 QML WebView 包装器以获得更大的灵活性 将您的 HTML5 应用程序放在 www/ 修改app.desktop、app.qml和manifest.json，设置你的app名称、版本等。如果需要本地存储，请注意app.qml中的“path”属性！ 建筑选项： 使用 Ubuntu SDK 打开“app.qmlproject”或 使用“单击构建”在命令行上构建。 选项 查看 app.qml 中注释掉的选项，它们可用于旋转内容和缩放内容。 例如，如果您想强制横向，这是必要的。
使用Cordova来解决HTML5制作的WebView手机不兼容的问题
aqiulearningmore的博客
06-21 8073
一:Android 4.0WebView分析 (1)WebView API主要提供给我们应用程序的接口,为了兼容向下版本,Android在高版本中也是对一层的API进行支持, (2)Android WebView FrameworkAndroid Framework:Android WebView是个特殊控件实现的支持需要Framework的代码主要在./frameworks/base/core
H5+APP安卓原生插件开发+离线打包
qq_44786956的博客
07-13 1066
一、H5+APP安卓原生插件开发 二、离线打包地址：https://blog.csdn.net/qq_42581267/article/details/125066061?spm=1001.2014.3001.5502打开build.gradle文件，修改versionCode和versionName字段，如下图： versionCode为应用的版本号（整数值），用于各应用市场的升级判断，建议与manifest.json中version -> code值一致versionName为应用的版本名称（字符串）
html5 如何打包成apk，将H5封装成android应用APK文件的几种方法
热门推荐
北京土豆(qqxinxi) 的专栏
05-08 6万+
使用html5+JavaScript开发移动Web App。将其简单封装成APK文件！
Android开发：通过 webview 将网页打包成安卓应用(1)，Android开发知识体系
ccc6553584的博客
03-27 861
文章所有资料全部已经打包整理好，另外小编手头上整理了大量Android架构师全套学习资料，Android核心高级技术PDF文档+全套高级学习资料+视频+2021 BAT 大厂面试真题解析文档+全套高级学习资料+视频+2021 BAT 大厂面试真题解析**[外链图片转存中…(img-93A8GwZs-1711551198091)][外链图片转存中…(img-SdDC2JKH-1711551198091)][外链图片转存中…(img-YtVwkn7c-1711551198092)]
安卓Android源码——webview重载使用&自定义网址.zip
10-11
这份“安卓Android源码——webview重载使用&自定义网址.zip”资源包含了一系列的源码示例和相关图片，旨在帮助开发者理解如何在Android应用中自定义和优化WebView的使用。以下是关于WebView重载与自定义网址的一些...
Android离线webview调试工具,开发H5混合应用必备
05-14
在Android平台上，开发混合应用程序（Hybrid App）时，经常需要用到WebView来加载和展示H5内容。然而，对于H5页面的调试工作，开发者通常依赖于Chrome浏览器的开发者工具（Chrome DevTools），其中的`chrome://...
ios H5微端
11-15
ios H5微端，可以把H5游戏打包成ios app，发布到苹果市场
安卓Andriod源码——webview重载使用&自定义网址.zip
10-13
`安卓Andriod源码——webview重载使用&自定义网址.zip`这个压缩包文件显然是一个关于如何自定义和优化WebView使用的示例项目。下面我们将深入探讨其中涉及的关键知识点。 1. **WebView组件**： WebView是Android ...
Flutter使用JsBridge方式处理Webview与H5通信的方法
08-19
在移动开发中，加载 H5 页面需要使用 WebView 组件，同时为了和 H5 页面进行数据交换，有时候还需要借助 JsBridge 来实现客户端与 H5 之间的通讯。 一、JsBridge 介绍 JsBridge 是一种 JavaScript 桥接技术，用于...
将uni-app打包的H5放在 Android程序中在 webview 显示的两种方法
杨迪龙的博客
12-07 3667
将uni-app打包的H5放在 Android程序中在 webview 显示的两种方法前言HashHistory完事 前言 之前有个项目要同时做小程序和APP，本着节省时间的想法，研究了下uni-app，但是发现从中打包成APP不太靠谱，所以想着打包成H5，然后在APP里头加载。虽然最终还是分开用原生来实现了，不过这个技术选型还是得记录下来，免得以后遇到同类型项目，又忘了这茬。 Hash 在uni-app项目中，有个配置文件manifest.json，打开它，选择H5配置，修改路由模式为hash，并且将运行
Java和H5混合开发安卓app_混合开发：Android的WebView加载H5,和H5的互调|SquirrelNote
weixin_33365844的博客
03-08 758
前言混合开发，不仅仅显示一个WebView,有时还需要本地Java代码与HTML中的JavaScript进行交互，Android也对交互进行了很好的封装。例如：点击网页中的按钮，调用Android中的原生对话框；点击网页中的电话号码，调用Android中的拨号APP。为什么要学习与H5互调Hybrid混合开发(原生/H5)Hybrid混合开发应用场景WebView如何加载H5页面Android如何...
Android与H5交互之WebView简单封装
Fat fat Wolf的博客
08-19 1206
前文：虽然本人自认是个杂鱼，在写代码得路上也越陷越深，但是代码应该当老婆一样看待，都需要用心对待，一生气老婆可以不理，但是代码必须要好好的总结，因为本wolf决定从今日起开始写博客，以计划性，组织性来管理自己，提升自己的技术，希望大家与我共勉，毕竟对码农来说女人不是必需品，不能当饭吃（别说富婆，要是有富婆，谁还写代码？），但代码可以，本篇处子秀，有写的不好之处或者错误之处，希望各位大佬及时指出，本...
苹果安卓网页的H5封装成App的应用和原生开发的应用有什么不一样？
appmao的博客
10-12 194
H5封装的app和原生开发的app有什么不一样？，不懂就要问，我能理解哈，虽然这个问题有点小白，但是我还是得认真回答，以防止我回答的不是很好，所以我科技了一下，所以今天我们来说一说如果这是同样这个问题在困扰着同学你，你改怎么办？同学们能力有限呀，只能想到这些了，如果你有不同的或者更好的见解评论区，私信我都可以哈，交流交流吧兄弟们，让这个行业在飞黄腾达一下哈哈，H5封装类应用和原生应用各有优劣，需根据具体需求和场景权衡选择。H5封装的App劣势：相对于原生应用社区，跨平台技术的社区和生态可能更小，资源较少。
Uniapp开发App中使用WebView插入h5详细步骤
06-09
Uniapp是一款基于Vue.js的跨平台应用开发框架，支持使用Web开发技术来开发iOS、Android和H5等不同平台的应用。在Uniapp中使用WebView插入h5，可以按照以下步骤进行： 1. 在Uniapp中添加WebView组件，可以在页面的template中使用`<web-view>`标签进行添加，也可以在脚本中使用`uni.createWebViewContext()`方法动态创建WebView组件 2. 在Vue组件中添加WebView组件，并进行一些基本设置，例如支持JavaScript、启用缓存等。在`<web-view>`标签中，可以使用`src`属性指定h5文件的URL或者使用`html`属性直接指定h5文件的内容。在脚本中，可以使用`uni.createWebViewContext()`方法获取到WebView组件的上下文，并进行设置 3. 如果需要与h5页面进行交互，你可以在Vue组件或者脚本中使用WebView组件提供的方法，例如`postMessage()`方法向h5发送消息，或者使用`onMessage()`方法接收h5发送的消息 4. 在h5页面中，你可以使用JavaScript代码来与Vue组件或者脚本进行交互，例如使用`window.postMessage()`方法向Vue组件或者脚本发送消息，或者使用`window.onmessage`事件接收Vue组件或者脚本发送的消息 以上是基本的操作步骤，具体实现还需要根据你的具体情况进行调整。在开发过程中，你可以参考Uniapp官方文档中WebView组件的使用说明，或者参考一些开源的Uniapp应用中WebView的使用方式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值