前言
安卓的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中是如何加载脚本的。
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目录下。现在目录结构如下
4.修改index.ejs,插入如下两行代码
首先删除原fetch方法,然后加载whatwg-fetch代码,此时代码会自动执行并检测到全局环境中没有fetch方法,它就会用自带的fetch方法取而代之。
5.最后,小小吐槽一下…在Cocos2.x版本的时候并没有这个问题。引擎组引入了新的功能与特性固然可喜,但是在兼容这方面,还是缺少了一些考虑。