phonegap(Cordova) 入门教程

## phonegap前期准备

整理文本格式版(内容是一样的)整理格式版补充图片内容

1. node.js安装

1. 下载相应的安装跑进行安装即可

2. 安装phonegap

1. npm install -g phonegap

2. npm install -g cordova

3. 生成第一个应用

1. 创建一个cordova项目    phonegap create projectName packageName;

2. 创建一个android工程  cordova platforms add android (等同于phonegap run android,但是执行该句会出现无法执行下去的情况。)

3. cordova  build  编译执行android工程(这里需要连接真机或者测试机)

4. cordova项目目录结构

1.  phonegap create xxxx  创建的文档结构

![cordova项目结构](./png/cordova project.png)

2. cordova platforms add Android 创建的Android项目结构

![android项目结构](./png/cordova_android.png)

3. cordova 为js提供的js 插件 结构

![Codova 定义的js文件](./png/cordova_android_assets_www.png)

4. android 的创建的资源文件内容

![android 的资源文件](./png/cordova_android_res.png)

5. js调用原生api 的方法定义

1. 对于`html+css+js` 书写语法没有变化,只有在通过JS调用原生的api的时候采用特定的格式

2. 插件的定义,建议写在`assets/www/plugins/xxx/xxx`目录下

3. ![插件的书写](./png/cordova_js_pigins.png)

6. js 插件在配置

1. JS配置文件的位置`/assets/www/cordova-plugins.js`

2. ![插件的统一配置管理](./png/cordova_cordova_plugins_js.png)

7. js的调用插件里面的方法 使用`mytoast.show();`    show(); 方法是在插件里面定义的执行方法

8. Android路由表结构

1. 路由表位置, 在Android工程中`/res/xml/config.xml`

2. ![路由表中对插件的配置](./png/cordova_res_xml_config_xml.png)

9. Android中插件的书写

1. java类需要继承CordovaPlugins 重写

```java

//按照不同的参数,重写的不同的方法进行处理不同数据

//参数一  js传递的当前执行的行为识别码 在js插件中方法定义定义

//参数二  传送的数据

//参数三  执行结束以后的回调(成功/失败)会调用js中相应的方法

execute(String action, JSONArray args, CallbackContext callbackContext)

execute(String action, CordovaArgs args, CallbackContext callbackContext)

execute(String action, String rawArgs, CallbackContext callbackContext)

```

2. 如果需要加载动态网络资源需要重写一下方法,

```java

@Override

public Boolean shouldAllowRequest(String url) {

return true;

}

//返回为true就是能够加载网络资源,同时能够使用Cordova.js 能够与Android相互调用

@Override

public Boolean shouldAllowBridgeAccess(String url) {

return true;

}

@Override

public Boolean shouldAllowNavigation(String url) {

return true;

}

```

10. 在activity页面中同时存在html页面和原生Android控件

1. 在界面不居中需要使用SystemWebView的控件,该控件继承WebView

2. Activity需要继承CordovaActivity类

```java

public abstract class BaseActivityWebView extends CordovaActivity{

}

```

3. 在Activity中findViewById得到该控件的实例,然后需要重写`createView` 和 `makeWebView()`

```java

@Override

protected void createViews() {

//获取SystemWebView的焦点

appView.getView().requestFocusFromTouch();

}

@Override

protected CordovaWebView makeWebView() {

return new CordovaWebViewImpl(new SystemWebViewEngine((SystemWebView) webView));

}

```

4. 加载html页面

```java

//针对CordovaActivity中WebView加载页面使用一下方法,才能和Cordova.js进行交互

loadUrl("http://....");

loadUrl("file://....");

```

11. activity调用html中js方法

``` java

//使用CordovaActivity中提供的loadUrl方法直接调用。

//参数格式 String类型  "javascript:"+js方法名字 ,  如果有参数直接拼接即可

loadUrl("javascript:" + jsActionNmae);

```

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容

  • phonegap前期准备 node.js安装下载相应的安装跑进行安装即可 安装phonegapnpm instal...
    汇集阅读 1,224评论 0 2
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,389评论 25 707
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,350评论 0 17
  • “你可以没有梦想,但是不能没有追求;如果你真的没有追求,那么请去尝试拥有喜好;如果你真的连喜好都没有,那么你只能拥...
    Suikayu阅读 233评论 0 0
  • 本组照片2016年8月9日拍摄于武隆江口镇往彭水的乌江沿岸。 乌江画廊偶拾 乌江笑纳芙蓉江,大唐电力输电忙...
    醉卧巴江阅读 414评论 2 0