用安卓 WebView “套壳” 最新的CocosCreator3.8.2打包的H5项目

前言

安卓的WebView的壳 + Creator打出的web手机端的包
出现的问题:
参考发布web-mobile后无法直接打开index.html
以及cocos creator3.6.0打包作为webview嵌入app报错

正文

其实在cocos creator3.6.0打包作为webview嵌入app报错帖子的34楼,已经提出了解决方法。

该问题产生的最主要原因是3.x版本打出的Cocos的H5的包,从服务器加载和从本地加载时,使用的URL Scheme规则不同。
从服务器打开应用时,使用的是http及https;使用WebView从本地加载(以安卓端为例),使用的是file。

webView.loadUrl(“file:///android_asset/index.html”);

使用上述代码加载index.html文件时并没有什么问题。但是html文件内部,也需要加载别的资源(js脚本,图片等等)。
OK,我们来看打包后的index.html中是如何加载脚本的。

image

Cocos3.8.2打包后的脚本,使用systemjs来管理和加载,而systemjs内部的实现,则是使用了fetch方法来加载各个脚本模块。

fetch很好,很先进,但是也有个问题,fetch不支持以file:///开头的URL scheme。寄……

所以上述文章中,其实是使用了自定义的fetch方法(其实就是原始的XMLHttpRequest + Promise)来取代WebView环境提供的fetch方法。

不过自己去实现总归是有点粗糙的。此处隆重推荐——“whatwg-fetch”。
参考文章How use the WebView FETCH api on android to call custom url

使用方式很简单!
1.根据上面的文章最后的链接,直接下载一份压缩后的代码下来https://cdn.jsdelivr.net/npm/whatwg-fetch@3.0/dist/fetch.umd.min.js
2.使用Cocos的构建模板,依次在项目中建立如下根目录build-templates/web-mobile/,并将我们刚才下载好的fetch.umd.min.js文件,拷贝到该目录下。
3.从引擎的目录(以3.8.2版本为例)3.8.2\resources\resources\3d\engine\templates\web-mobile下,拷贝index.ejs文件,到第2步中的web-mobile目录下。现在目录结构如下

image

4.修改index.ejs,插入如下两行代码
image
首先删除原fetch方法,然后加载whatwg-fetch代码,此时代码会自动执行并检测到全局环境中没有fetch方法,它就会用自带的fetch方法取而代之。

5.最后,小小吐槽一下…在Cocos2.x版本的时候并没有这个问题。引擎组引入了新的功能与特性固然可喜,但是在兼容这方面,还是缺少了一些考虑。

1赞

所以你其实是直接打包h5项目,然后再把整个h5项目通过webview的形式嵌入到了apk里面?
不应该是直接打android原生或者上传h5项目到自己服务器然后webview嵌入的是远程地址吗?

1赞

对 iOS 的 webview 容器可行不?另外这样修改了,会不会影响部署服务器后的加载逻辑呢?

这个方案的应用场景具体是哪一些了?

直接打安卓原生每次修改了之后都要再打一遍apk包还挺麻烦的 :rofl:
上传H5项目到服务器则是需要有服务器布署 :rofl:
用安卓套壳的作用就是快速迭代开发,测试换包的话只需要替换游戏体就行,不用重新安装apk :rofl:

iOS的webview容器没测过,另外这个并不会影响布署服务器后的加载逻辑。其实说白了,这个只是用传统的xhr加载资源方式,替换了兼容性不太好的fetch加载资源方式而已。

快速成型与测试,打包简单 :grinning:测试测的开心,不用把apk装来装去 :rofl:

能不能搞个cocos,laya通用的

看这篇文章用安卓 WebView 做一个“套壳”应用
其实webview就是个容器,只要最后生成的是H5的包,都是可以加载的

如果只是测试,直接浏览器就行了

比如想放在手机上看看效果什么的,或者带出去给别人看成品效果,或者在没网的环境中展示,或者单纯不想花钱布署服务器或者浪费流量加载…

或者没钱请程序员的时候,或者没带钱的时候 :joy:

用uniapp套了之后调用各种api很方便

本质上其实还是安卓的WebView。
本文并不是教大家如何制作一个壳,只是指出了——安卓WebView + 本地加载Cocos3.x项目时候会遇到的坑以及如何避免该问题 :rofl:

使用Cocos的构建模板具体是指什么呀?

看这里
Cocos Creator 3.8 手册 - 网页预览定制工作流程