Ubuntu 16.04 安装 PhoneGap 开发环境

0、开发环境

 

安装AndroidStudio：

https://redirector.gvt1.com/edgedl/android/studio/ide-zips/3.5.2.0/android-studio-ide-191.5977832-linux.tar.gz

 

安装node：

下载：

https://nodejs.org/dist/v12.16.2/node-v12.16.2-linux-x64.tar.xz

解压到~/_dev目录：

tar -xJf node-v12.16.2-linux-x64.tar.xz -C ./

创建链接文件，链接到node可执行程序：

sudo ln -s ~/_dev/node-v12.16.2-linux-x64/bin/node /usr/local/bin/node

sudo ln -s ~/_dev/node-v12.16.2-linux-x64/bin/npm /usr/local/bin/npm

 

安装cordova、plugman、phonegap

npm install -g cordova

npm install -g plugman

npm install -g phonegap

创建链接文件：

sudo ln -s ~/_dev/node-v12.16.2-linux-x64/bin/cordova /usr/local/bin/cordova

sudo ln -s ~/_dev/node-v12.16.2-linux-x64/bin/plugman /usr/local/bin/plugman

sudo ln -s ~/_dev/node-v12.16.2-linux-x64/bin/phonegap /usr/local/bin/phonegap

 

1、创建project

 

phonegap create ./HelloWorld --name HelloWorld --id com.hello.world --template hello-world

 

参数含义：

--name, -n <name>       application name (default: "Hello World")
--id, -i <package>          package name (default: "com.phonegap.hello-world")
--template <name>       create app using an existing app template
--copy-from, -src <path>   create project using a copy of the www folder from an existing project
--link-to <path>             symlink/shortcut to the www folder of another project without copying

 

遇到错误：

 

 

修改配置文件权限：

sudo chown -R $USER:$(id -gn $USER) /home/ryan/.config

 

重新运行创建命令：

 

2、运行浏览器程序

进入HelloWorld目录，运行：

phonegap serve

 

参数含义：

--port, -p <n>        port for web server (default: 3000)
--autoreload         enable app refresh on file changes (default: true)
--no-autoreload    disable app refresh on file changes
--browser             enable desktop browser support (default: true)
--no-browser        disable desktop browser support
--localtunnel        enable a local tunnel for public access (default: false)

 

浏览器打开：10.0.2.15:3000

 

3、创建Android项目

进入HelloWorld目录，运行：

phonegap build android

 

4、Android Studio 打开工程

点击OK创建gradle文件。

发生同步错误：

将cdvMinSdkVersion由14改为19。

 

运行：

 

5、安装插件

 

下载插件：

https://github.com/hollyschinsky/HybridBridgePlugin/archive/master.zip

 

解压到HelloWorld同级别目录：

HybridBridgePlugin

 

创建插件的package.json文件，进入插件目录，运行：

plugman createpackagejson ./

 

安装插件：

回到插件目录的上级目录，运行命令：

plugman install --platform android --plugin HybridBridgePlugin --project HelloWorld/platforms/android

 

6、添加Web按钮和Java事件响应

 

在Html页面添加按钮:

打开 HelloWorld/platforms/android/assets/www/index.html文件，添加如下代码：
<input id="bookmark" type="text"/>
<button id="btnAdd">ADD ITEM</button>
<br/>
<button id="btnDeviceInfo">GET DEVICE INFO</button>
<br/>

 

打开 HelloWorld/platforms/android/assets/www/js/index.js 文件，添加如下代码： 
 document.getElementById("btnAdd").addEventListener("click", app.addItem); document.getElementById("btnDeviceInfo").addEventListener("click", app.showDeviceInfo);

 

继续在 index.js 文件中, 添加按钮事件响应函数:

addItem: function() {
 console.log("Plugin ADD ITEM CALLED " + HybridBridge);
 var item = document.getElementById("bookmark").value;
 HybridBridge.addItem(item,function(){console.log("Hybrid Bridge Success")},function(e){console.log("Hybrid Bridge Error" + e)});
},
showDeviceInfo: function(){
 var message = 'Cordova version: ' + device.cordova;
 message += '\n\nDevice Model: ' + device.model;
 message += '\n\nDevice Version (Android): ' + device.version;
 alert(message);
}

 

 

点击【GET DEVICE INFO】按钮，弹出提示：

修改HelloWorld/platforms/android/java/org/js/sample/hybird/HybridBridge.java

文本框输入文字，点击【ADD ITEM】，弹出提示。

 

其他：

 

如果遇到类似下面找不到模块的错误，执行npm install命令安装。

error：Cannot find module 'cordova-common'

npm install --save cordova-common