1
我是钛的新手,并试图找到一个解决方案或如何在webview中使用钛API的一个很好的解释。我已将所有代码都包含在本演示的必要部分中。Appcelerator在webview中使用本机iOS/Android功能的钛fireEvent
我想要做的是从win4.html(参见下文)中激发本机相机功能。这个文档在api中并不是很棒。
我有一个非常基本的设置在我app.js:
var tabGroup = Titanium.UI.createTabGroup();
var win1 = Titanium.UI.createWindow({
title: "HTML",
backgroundColor: "#000",
url:"windows/win4.js"
});
var tab1 = Titanium.UI.createTab({
title: "HTML",
icon: "KS_nav_ui.png",
window: win1
});
var win2 = Titanium.UI.createWindow({
title: "Tab 3",
backgroundColor: "#000",
url:"windows/win3.js"
});
var tab2 = Titanium.UI.createTab({
title: "Camera",
icon: "KS_nav_ui.png",
window: win2
});
win4.js(HTML - createWebView设置):
var win = Titanium.UI.currentWindow;
var webview = Titanium.UI.createWebView({url:'win4.html'});
win.add(webview);
Ti.App.addEventListener('showCamera', function() {
tabGroup.activeTab = tab2;
});
win4.html(纯HTML由调用win4.js):
<html>
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<style type="text/css">
body {
background: #87e0fd;
background: -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0));
background: -webkit-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
background: -o-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
background: -ms-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
background: linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0);
}
p {
text-shadow: 1px 1px 1px rgba(255,255,255,.5);
}
.container {
margin: 0 auto;
overflow: hidden;
width: 90%;
}
.left {
float: left;
}
.right {
float: right;
}
</style>
<script type="text/javascript">
function Init() {
var left = document.getElementById("left");
left.addEventListener('click', function(e) {
Ti.App.fireEvent('showCamera');
});
}
</script>
</head>
<body onload="Init()">
<div class"container">
<div id="left" class="left">
<p>
left content here
</p>
</div>
<div class="right">
<p>
right content here
</p>
</div>
</div>
</body>
</html>
win3.js(机摄像头调用):
Titanium.Media.showCamera({
success:function(event)
{
var cropRect = event.cropRect;
var image = event.media;
Titanium.Media.saveToPhotoGallery(image);
Titanium.UI.createAlertDialog({title:'Photo Gallery',message:'Check your photo gallery'}).show();
},
cancel:function()
{
},
error:function(error)
{
// create alert
var a = Titanium.UI.createAlertDialog({title:'Camera'});
// set message
if (error.code == Titanium.Media.NO_CAMERA)
{
a.setMessage('Device does not have video recording capabilities');
}
else
{
a.setMessage('Unexpected error: ' + error.code);
}
// show alert
a.show();
},
allowEditing:true
});
我怎样才能让在click事件#left我的应用程序内触发本机摄像头?