如何在android phonegap中控制javascript_Javascript_Android_Cordova

如何在android phonegap中控制javascript

javascript android cordova

如何在android phonegap中控制javascript,javascript,android,cordova,Javascript,Android,Cordova,我是phonegap的新手，刚开始学习我根据phonegap.com上的教程制作了一个演示应用程序，这是我的index.html <!DOCTYPE HTML> <html> <head> <title>mobiletuts phonegap</title> <script src="cordova-2.7.0.js"></script> <script> va

我是phonegap的新手，刚开始学习

我根据phonegap.com上的教程制作了一个演示应用程序，这是我的index.html

    <!DOCTYPE HTML>
<html>
  <head>
    <title>mobiletuts phonegap</title>
  <script src="cordova-2.7.0.js"></script>
  <script>

    var pictureSource;  
    var destinationType; 


   document.addEventListener("deviceready",onDeviceReady,false);
   document.addEventListener("backbutton", function(e){
        if($.mobile.activePage.is('index.html')){
            e.preventDefault();
            navigator.app.exitApp();
        }
        else {
            navigator.app.backHistory()
        }
    }, false);

   function onDeviceReady() 
   {
        pictureSource=navigator.camera.PictureSourceType;
        destinationType=navigator.camera.DestinationType;
        navigator.geolocation.getCurrentPosition(onSuccess, onError);
    }

    function onPhotoDataSuccess(imageData) 
    {
      var smallImage = document.getElementById('smallImage');
      smallImage.style.display = 'block';
      smallImage.src = "data:image/jpeg;base64," + imageData;
    }

    function onPhotoURISuccess(imageURI) 
    {
       var largeImage = document.getElementById('largeImage');
       largeImage.style.display = 'block';
       largeImage.src = imageURI;
    }

    function capturePhoto() 
    {
      navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
        destinationType: destinationType.DATA_URL });
    }

    function capturePhotoEdit() 
    {
      navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true,
        destinationType: destinationType.DATA_URL });
    }

    function getPhoto(source) 
    {
      navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, 
        destinationType: destinationType.FILE_URI,
        sourceType: source });
    }

    function onFail(message) 
    {
      alert('Failed because: ' + message);
    }

    function onSuccess(position) 
    {
        var element = document.getElementById('geolocation');
        element.innerHTML = 'Latitude: '           + position.coords.latitude              + '<br />' +
                            'Longitude: '          + position.coords.longitude             + '<br />' +
                            'Altitude: '           + position.coords.altitude              + '<br />' +
                            'Accuracy: '           + position.coords.accuracy              + '<br />' +
                            'Altitude Accuracy: '  + position.coords.altitudeAccuracy      + '<br />' +
                            'Heading: '            + position.coords.heading               + '<br />' +
                            'Speed: '              + position.coords.speed                 + '<br />' +
                            'Timestamp: '          +                                   position.timestamp          + '<br />';
    }

    function onError(error) 
    {
        alert('code: '    + error.code    + '\n' +
                'message: ' + error.message + '\n');
    }

    function onLoad(){
          document.addEventListener("deviceready", onDeviceReady, false);
      }

     function changeBG(){

          navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
                destinationType: destinationType.DATA_URL });
          document.bgColor = '#aaa';

     }

     function Alert()
     {
        alert('Ther alert dialog from the javascript method');
     }
     function onAlert()
     {
        AndroidFunction.showAlert();
     }

  </script>
  </head>
  <body>

        <button onClick="capturePhoto();">Capture Photo</button> <br>
        <button onClick="capturePhotoEdit();">Capture Editable Photo</button> <br>
        <button onClick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br>
        <button onClick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button><br>
        <button onClick="Alert();">Show Alert msg from javascript</button><br>
        <button onClick="onAlert();">Show Alert msg from java</button><br>
        <p id="geolocation">Finding geolocation...</p>
        <img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
        <img style="display:none;" id="largeImage" src="" />
  </body>
</html>

}

现在我想从javascript调用java方法，因此我在index.html中添加了一个按钮和两个脚本方法，它们是

function Alert()
 {
    alert('Ther alert dialog from the javascript method');
 }
 function onAlert()
 {
    AndroidFunction.showAlert();
 }

添加一个按钮来调用onAlert（）函数，但当我在设备上运行它时，任何按钮都不起作用。。。

我不明白是什么问题，有人能帮我吗……

在你的情况下，需要在Android上嵌入Cordova WebView

将您的主要活动修改为

public class MainActivity extends Activity implements CordovaInterface {
    CordovaWebView cwv;
    /* Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        cwv = (CordovaWebView) findViewById(R.id.tutorialView);
        cwv.loadUrl("file:///android_asset/www/index.html");
    }

在布局中，将webview替换为

<org.apache.cordova.CordovaWebView
    android:id="@+id/tutorialView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

我发现Cordova CLI非常容易入门，您无需编写任何本机代码即可启动和运行

这里有一些信息：

基本上，这些命令可以归结为：

使用NPM安装Cordova命令行界面

npm install -g cordova

创建新的Cordova项目

cordova create <Project Directory> <Package Name> <Project Name>

将Android平台添加到项目中

cd my-project
cordova platform add android

启动仿真器： cordova模拟android

或在设备上运行：

cordova run android

cd my-project
cordova platform add android

cordova run android