Question

我喜欢使用HTML5 Canvas和JS制作老派的街机游戏。我已经做了很多年了，而且可能有点像我的方式。所有现代设备上的Chrome / Safari游戏都很棒。

我想我应该尝试使用PhoneGap包装游戏，看看它在iOS AppStore上的应用程序效果如何。尽管音频播放效果很好，但游戏还是很不稳定。

我读到了WKWebView在默认UIWebView上的性能提升，因此将其添加到我的config.xml中。这场比赛发挥得非常漂亮，这就是我一直希望它能够如何发挥。但音频未能播放。

在互联网上挖掘我发现问题很可能是我加载音频文件的方式。这是我用来加载音频文件的基本代码 - 一个对象被传递到包含音频文件细节的函数中。

我的项目以这种方式布局：

--- www
 |___ gfx (contains png files)
 |___ sfx (contains mp3 files)
 |___ script (contains js files)
 |___ index.html
 |___ config.xml
 |___ style.css

非常基本！

    function loadSound(o) {
	try
	{
		var request = new XMLHttpRequest();
		var url = "sfx/" + o.soundname + "." + AUDIOFORMAT;

		request.open('GET', url, true);
		request.responseType = 'arraybuffer';

		// Decode asynchronously
		request.onload = function ()
		{
			try
			{
				g.audioContext.decodeAudioData(request.response, 
					function(buffer) 
					{ 
						o.buffer = buffer;
						o.volume 0.6;
					}, 
					function()
					{
						write("Decode error: " + url + ", " + arguments[0]);
					}
				);
			}
			catch (e)
			{
				write("loadSound(onLoad): " + e.message);
			}
		}
		request.send();
	}
	catch (e)
	{
		write("LoadSound: " + e.message);
	}};

因此，如果我的理解是正确的，WKWebView无法读取该文件，因为它没有通过本地http服务器提供。

我很想知道如何让它发挥作用。

我可以添加到config.xml（PhoneGap）以在包中包含本地http服务器吗？然后我会将网址更改为url ='http://localhost/sfx/ ...' 是否需要特定的端口，例如http://localhost:10000/sfx/

我不使用任何框架，它只是老式的手工编写的JavaScript。

这是我的config.xml的相关部分：

    <feature name="CDVWKWebViewEngine">
        <param name="ios-package" value="CDVWKWebViewEngine" />
    </feature>
    <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
    <name></name>
    <description></description>
    <content src="index.html" />
    <gap:config-file platform="ios" parent="UISupportedInterfaceOrientations" overwrite="true">
        <array>
            <string>UIInterfaceOrientationLandscapeOmg</string>
        </array>
    </gap:config-file>    
    <gap:config-file platform="ios" parent="NSPhotoLibraryUsageDescription" overwrite="true">
        <string>Does not use photo library</string>
    </gap:config-file>     
    <preference name="DisallowOverscroll" value="true" />
    <preference name="android-minSdkVersion" value="14" />
    <preference name="orienation" value="portrait" />  
    <preference name="fullscreen" value="true" />
    <preference name="exit-on-suspend" value="true" />
    <plugin name="cordova-plugin-battery-status" source="npm" spec="~1.1.1" />
    <plugin name="cordova-plugin-camera" source="npm" spec="~2.1.1" />
    <plugin name="cordova-plugin-media-capture" source="npm" spec="~1.2.0" />
    <plugin name="cordova-plugin-console" source="npm" spec="~1.0.2" />
    <plugin name="cordova-plugin-contacts" source="npm" spec="~2.0.1" />
    <plugin name="cordova-plugin-device" source="npm" spec="~1.1.1" />
    <plugin name="cordova-plugin-device-motion" source="npm" spec="~1.2.0" />
    <plugin name="cordova-plugin-device-orientation" source="npm" spec="~1.0.2" />
    <plugin name="cordova-plugin-dialogs" source="npm" spec="~1.2.0" />
    <plugin name="cordova-plugin-file" source="npm" spec="~4.1.1" />
    <plugin name="cordova-plugin-file-transfer" source="npm" spec="~1.5.0" />
    <plugin name="cordova-plugin-geolocation" source="npm" spec="~2.1.0" />
    <plugin name="cordova-plugin-globalization" source="npm" spec="~1.0.3" />
    <plugin name="cordova-plugin-inappbrowser" source="npm" spec="~1.3.0" />
    <plugin name="cordova-plugin-media" source="npm" spec="~2.2.0" />
    <plugin name="cordova-plugin-network-information" source="npm" spec="~1.2.0" />
    <plugin name="cordova-plugin-splashscreen" source="npm" spec="~3.2.1" />
    <plugin name="cordova-plugin-statusbar" source="npm" spec="~2.1.2" />
    <plugin name="cordova-plugin-vibration" source="npm" spec="~2.1.0" />
    <plugin name="cordova-plugin-whitelist" source="npm" spec="~1.2.1" />
    <plugin name="cordova-plugin-wkwebview-engine" source="npm" version="1.1.2" />

Answer 1

好的，所以经过大量的挖掘和Kerri的有价值的提示，我终于想出了如何实现我所需要的更改。

我在config.xml中添加了以下信息：

<plugin name="cordova-plugin-wkwebview-engine-localhost" spec="https://github.com/apache/cordova-plugins.git#wkwebview-engine-localhost" />

也在config.xml中我改了

<content src="index.html" />

到

<content src="http://localhost" />

努力享受。

无法使用WKWebView

1 个答案: