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