javascript - 如何从 Titanium Appcelerator 的 webview 内部访问相机

Question

我已经快完成使用 Appcelerator 开发 HTML5 应用程序的工作了，我还有一个功能要添加，该功能允许用户在通过该应用程序向客户端发送消息时拍照。显示了一个包含消息表单的特定 div，我希望用户能够用他们的手机拍照，并将其自动附加到消息中，然后提交到我们的服务器。

然而，在四处寻找之后，我对如何让它工作感到困惑。虽然 API 显示了使相机工作的 Javascript，但我似乎无法访问它，而且我不知道 API 调用应该位于何处。它是在 app.js 文件中，还是它自己的文件中，或者它在何处调用并不重要？任何帮助/建议将不胜感激。

编辑
感谢 Dragon，我对我的代码进行了以下更改:

index.html

        <div class="col-square">
            <a href="#" onclick="Ti.App.fireEvent('app:fromWebView');"><i class="fa fa-camera fa-squareBlock"></i><br />Take Photo</a>
        </div>

<script type="text/javascript">
    Ti.App.addEventListener("app:fromTitanium", function(e) {
        alert(e.message);
    });
</script>

app.js

Ti.App.addEventListener('app:fromWebView', function(e){

  Titanium.Media.showCamera({

    success:function(event)
    {       
        var image = event.media;
        var file = Titanium.Filesystem.getFile(Titanium.Filesystem.applicationDataDirectory,"userImg.jpg");
        file.write(image);
        var data = file.nativePath;

        Ti.App.fireEvent('app:fromTitanium', {message: "photo taken fine"});

    },
    cancel:function()
    {
    },
    error:function(error)
    {
      var a = Titanium.UI.createAlertDialog({title:'Camera'});
      if (error.code == Titanium.Media.NO_CAMERA)
      {
        a.setMessage('Please run this test on device');
      }
      else
      {
        a.setMessage('Unexpected error: ' + error.code);
      }
      a.show();
    },
    showControls:false, // don't show system controls
    mediaTypes:Ti.Media.MEDIA_TYPE_PHOTO,
    autohide:false  // tell the system not to auto-hide and we'll do it ourself
  });
});

但是，在这种情况下，按钮可以很好地打开相机。但是，当拍摄并选择照片时，它返回到屏幕但没有任何反应。然后它在调试中给出了这个错误——“Ti is undefined”。然后当我定义 Ti 时，它会返回“App is undefined”。

这个的特殊之处在于，如果我删除将处理从 app.js 发送到 webview 的数据的代码，它工作正常，即使从 webview 打开相机的代码与相同的代码足够接近？

Answer 1

这是你可以做的:

在您的 webview 调用和事件中，在 webview 的父级中编写事件监听器。像这样的东西会进入 webview:

<button onclick="Ti.App.fireEvent('app:fromWebView', { message: 'event fired from WebView, handled in Titanium' });">fromWebView</button>

后面跟着webview父js里面的this:

Ti.App.addEventListener('app:fromWebView', function(e) {
    alert(e.message);
    //Here you can call the camera api.
})

将图像发送到 webview 遵循相反的过程。

不要忘记检查 Docs .

希望对您有所帮助。