这是一个简单的 index.js（与PhoneGap 应用程序相关），它加载了一个与应用程序捆绑在一起的 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 项目时，添加 Wikiitude 插件和您的自定义 Architect World，然后将代码添加到您的 index.js 中，您应该有一个具有 AR 功能的正在运行的应用程序。