Question

我需要为Android和ios创建一个应用程序，它可以识别我所在国家特定山峰的峰值（意大利。并且......对于我的坏英语抱歉，希望你能理解它）。
我将使用phonegap和wikitude。
我将为您详细介绍我所做的事情（根据他们的setup guide phonegap plugin ios）来更好地解释自己。

指南说：
1-创建一个PhoneGap项目。现在，该文件夹是在正确的位置创建的，没有任何错误。
2a-创建通用www中的World文件夹。我手动创建了它。
2b-“示例部分包括几个如何创建ARchitect World的示例。”在这里，我假设我需要手动创建我的项目World文件夹内容，所以我做了。我按照示例创建了一个空文件和文件夹的结构（index.html，js / ，css / ，以项目命名的assets / *和.js文件）。我继续介绍指南的示例部分。我特别关注POI示例，因为它们是我的应用程序的目的。我用我在github上找到的文件交叉检查了那里提到的代码部分。最后，我将相关文件从他们的示例复制到我的应用程序World文件夹。
3-为ios构建项目。成功完成。
4-使用特定命令添加插件。这完成没有任何错误。我的World文件夹中的文件已复制到我的ios中 5-使用Xcode启动应用程序。我已经截取了结果文件夹的截图（你可以在下面的评论中找到链接，我不能'发布图像XD）。

老实说，我甚至不确定这是正确的过程，因为指南并不是很清楚。我假设我从上面的步骤2b获得的.js文件是我需要的AR代码所在的位置，但索引是空的，所以这些文件没有链接，我不知道javascript会使它们如此。我甚至不确定.js文件中的代码是否可以工作，因为我从每个示例文件夹中获取文件并将它们合并到我的项目文件夹中。

现在，如果我尝试按原样启动模拟，我会从www文件夹的index.html文件中获取标准的phonegap“设备就绪”屏幕。
据我所知，函数1.1 Image on Target应该将我的www索引与World索引连接起来，但如果我添加它，它会提供一个无响应的链接（因为我的World索引为空，我期待一个空白页面）。我在 Wikitude ARchitect v3.0 API Documentation中没有成功搜索此功能，我不知道如何自己设置。

此时我真的需要一些指导：我已经比喻了他们所有的论坛（我几乎可以说是字面意思），我已经多次阅读了这些指南，并且我已经搜索了他们的参考文献中所解释的功能而没有成功（在指南的“javascript界面”部分中有AR功能的描述，但实际上没有关于如何构建和调用它们以及放置它们的位置的信息）。

对不起文字之墙，我真的希望你能为我提供一些如何继续的帮助。

非常感谢你。

P.S。我正在使用带有Eclipse 4.2.1的phonegap 3.3，Xcode 5.0.2，android developer tools v 22.3.0。使用OS 10.8.5在Mac Book pro上工作

Answer 1

这是一个简单的index.js（与PhoneGap app相关），它加载了与应用程序捆绑在一起的Architect World：

var app = {
// Application Constructor
initialize: function() {
    this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
    document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicity call 'app.receivedEvent(...);'
onDeviceReady: function() {
    app.receivedEvent('deviceready');

    app.wikitudePlugin = cordova.require("com.wikitude.phonegap.WikitudePlugin.WikitudePlugin");
    app.wikitudePlugin.isDeviceSupported(app.onDeviceSupportedCallback, app.onDeviceNotSupportedCallback);
},

onDeviceSupportedCallback: function() {

    app.wikitudePlugin._onARchitectWorldLaunchedCallback = app.onArchitectWorldLaunched;
    app.wikitudePlugin._onARchitectWorldFailedLaunchingCallback = app.onArchitectWorldFailedLaunching;


    app.wikitudePlugin.loadARchitectWorld('www/res/ARchitectWorld/SimpleCircle.html');

    app.wikitudePlugin.setOnUrlInvokeCallback(app.onURLInvoked);
},
onDeviceNotSupportedCallback: function() {
    alert('device not supported');
},
onArchitectWorldLaunched: function(url) {
    alert('launched ' + url);
},
onArchitectWorldFailedLaunching: function(error) {
    alert('error ' + error);
},
onURLInvoked: function(url) {

    // TODO: impl. url parsing to know what to do with the given url.

    app.wikitudePlugin.close();
},


// Update DOM on a Received Event
receivedEvent: function(id) {
    var parentElement = document.getElementById(id);
    var listeningElement = parentElement.querySelector('.listening');
    var receivedElement = parentElement.querySelector('.received');

    listeningElement.setAttribute('style', 'display:none;');
    receivedElement.setAttribute('style', 'display:block;');

    console.log('Received Event: ' + id);
}

};

此代码基本上检查当前设备是否能够运行AR World，如果是，则启动属于应用程序包的Architect World。这是一个简单的建筑师世界，它在特定位置显示一个圆圈。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="viewport" content="target-densitydpi=device-dpi, width = 540, user-scalable = 0" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Simple Circle</title>

<!-- Include the ARchitect library -->
<script src="architect://architect.js"></script>


<script>

function createCircle()
{
    AR.logger.activateDebugMode();


    var circle = new AR.Circle(2, {style: {fillColor: '#8F45FF'}});

    var drawableLocation = new AR.RelativeLocation(null, 10, 0);
    var geoObject = new AR.GeoObject(myGeoLocation, {drawables: {cam: circle}});

    AR.logger.info("circle created");
}

function sendCloseARViewRequest()
{
    // hideButton?status=hide could be anything, you just have to know what to do with the url in the PhoneGap world.
    document.location = 'architectsdk://hideButton?status=hide';
}

</script>
</head>

<body>

<button value="Create ARchitectObj" type="button" onclick="createCircle()">Create Circle</button>

<button value="Close" type="button" onclick="sendCloseARViewRequest()">Close</button>


</body>
</html>

Wikitude SDK包含SDK的所有部分的大量文档（ObjC / Java参考，JS参考和描述SDK用法的一般文档。请参阅Documentation.html和Reference / JavaScript Reference / index.html）。

当您创建新的PhoneGap项目时，添加Wikitude插件和您的自定义Architect World，然后将代码添加到index.js，您应该有一个具有AR功能的正在运行的应用程序。

Answer 2

通过上次更新，wikitude团队改进了基本指南http://www.wikitude.com/developer/documentation/phonegap
这个提供了额外的帮助：D 我根据样本建立了自己的应用程序，它似乎有效：D

无法使用wikitude和Phonegap创建AR应用程序

2 个答案: