移动开发 phonegap 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

项目

  在本节讲程中,我们就带大家来创建一个自己的phonegap程序,主要实现功能就是点击返回按钮时,弹出“hello world”。

1.在我们的命令行中,首先转到root目录,这就是我们要创建项目的目录。如下代码:

cd /
cd root

2.转到root目录后,然后就可以通过phonegap create命令来创建项目了。我们创建一个项目名为project的项目。如下代码:

phonegap create project com.example.hello HelloWorld

创建完成后的目录结构如下:

3.创建命令完成后,我们转到project目录下,然后添加我们要用到的插件,如网络,通讯录等。如下命令:

cd project
phonegap plugin add cordova-plugin-network-information 
phonegap plugin add cordova-plugin-contacts

  由于我们所创建的项目没有用到插件,所以不用添加。

4.插件添加完成以后,我们就可以在创建的目录中,进入www目录下,然后对index.html进行编辑,我们在这里面实现点击返回按钮时,弹出“hello world”,保存文件。如下代码:

<script type="text/javascript" charset="utf-8">
    document.addEventListener("deviceready", onDeviceReady, false);
    function onDeviceReady() {
        document.addEventListener("backbutton", onBackKeyDown, false);
    }
    // 处理后退按钮操作
    function onBackKeyDown() {
        alert("hello world");
    }
</script>

5.在命令行中,通过如下命令,使我们的项目运行到android平台,并生成apk文件。如下代码:

phonegap build android

  由于我们在网络上进行编译并且是第一次,所以用时会比较长,等编译完成后,再编译就比较快了。

  好了,现在我们的第一个phonegap程序就完成了,那我们就击屏幕上方的【下载Apk】,用手机扫描打开的二维码,下载到我们手机中,然后安装打开,去试一试吧。

  有情提示:由于微信不支持我们的扫码下载,请用其它的扫码工具下载。