Blog | Phodal - A Growth Engineerhttp://www.phodal.com/blog/2016-05-07T15:17:26.201250+00:00BlogCordova插件 / 混合应用插件开发: hello,world解析2016-05-07T15:16:45+00:002016-05-07T15:17:26.201250+00:00Phodal Huanghttp://www.phodal.com/blog/author/root/http://www.phodal.com/blog/create-cordova-plugin-demo-hello-world/周末学了一下怎么样开始Cordova的插件,也顺便分享一下这一天的经验。
Cordova插件创建
---
在解释之前,我们先来创建一个插件。这里我们用用到一个名为``plugman``的工具,然后执行如下的命令:
```bash
plugman create --name cordovaCoap --plugin_id coap-cordova-plugin --plugin_version 0.0.1
```
然后就会生成如下的文件内容,即下面的两个文件:
```
.
├── plugin.xml
├── src
└── www
└── cordovaCoap.js
```
**plugin.xml**
先让我们来看看``plugin.xml``文件里有什么:
```xml
<?xml version='1.0' encoding='utf-8'?>
<plugin id="coap-cordova-plugin" version="0.0.1" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
<name>cordovaCoap</name>
<js-module name="cordovaCoap" src="www/cordovaCoap.js">
<clobbers target="cordovaCoap"></clobbers>
</js-module>
</plugin>
```
它定义了几个内容:
- plugin -- 命名空间、ID、版本
- name -- 名称
- js-module -- js文件地址,会被默认加载到首页面(index.html)。clobbers元素定义的内容将会被插入到window对象中,即变成window.cordovaCoap。
使用创建的命令少了一些内容,我们在hello,world中详细展开。
**src**目录中定义了不同平台的代码,我们就会在稍后的内容中看到。
让我们来看看``www``目录下的``cordovaCoap.js``吧:
```javascript
var exec = require('cordova/exec');
exports.coolMethod = function(arg0, success, error) {
exec(success, error, "cordovaCoap", "coolMethod", [arg0]);
};
```
我们给上面的cordovaCoap创建了一个名为coolMethod的方法,然后cordova将调用对应平台的Native方法。
插件创建的内容,还是比较简单,让我们来看看一个完整的hello,world示例代码吧。
Cordova插件hello,world
---
在网上寻找到一个已经创建好的Hello,world包含了iOS、Android和Windows Phone下的代码,地址:[https://github.com/don/cordova-plugin-hello](https://github.com/don/cordova-plugin-hello)
目录如下所示:
```
├── README.md
├── plugin.xml
├── src
│ ├── android
│ │ └── Hello.java
│ ├── ios
│ │ ├── HWPHello.h
│ │ └── HWPHello.m
│ └── wp7
│ └── Hello.cs
└── www
└── hello.js
```
让我们再从``plugin.xml文件看起:
```xml
<?xml version="1.0" encoding="utf-8"?>
<plugin id="com.example.hello" version="0.7.0" xmlns="http://www.phonegap.com/ns/plugins/1.0">
<name>Hello</name>
<engines>
<engine name="cordova" version=">=3.4.0"></engine>
</engines>
<asset src="www/hello.js" target="js/hello.js"></asset>
<js-module name="hello" src="www/hello.js">
<clobbers target="hello"></clobbers>
</js-module>
<platform name="android">
<config-file parent="/*" target="res/xml/config.xml">
<feature name="Hello">
<param name="android-package" value="com.example.plugin.Hello"/>
</feature>
</config-file>
<source-file src="src/android/Hello.java" target-dir="src/com/example/plugin/"></source-file>
</platform>
<platform name="ios">
<config-file parent="/widget" target="config.xml">
<feature name="Hello">
<param name="ios-package" value="HWPHello"/>
</feature>
</config-file>
<header-file src="src/ios/HWPHello.h" target-dir="HelloPlugin"></header-file>
<source-file src="src/ios/HWPHello.m" target-dir="HelloPlugin"></source-file>
</platform>
<platform name="wp7">
<source-file src="src/wp7/Hello.cs"></source-file>
</platform>
</plugin>
```
在这个``xml``里多定义了下面的一些内容:
- engines定义了基于Cordova插件的Codova版本,也可以定义不同平台的版本,如`` <engine name="cordova-android" version=">=1.8.0"></engine>
``
- platform定义了iOS、android、wp7三个不同平台的代码
- 在不同的平台里,又有不同的定义。如Android定义了包名和路径、iOS定义了头文件和源文件也有包名。
在我们的``www``目录的``hello.js``的内容也是一样的:
```javascript
/*global cordova, module*/
module.exports = {
greet: function (name, successCallback, errorCallback) {
cordova.exec(successCallback, errorCallback, "Hello", "greet", [name]);
}
};
```
区别比较大的就是三个不同平台的Native代码。
Cordova iOS、Android、WP原生代码
---
在开始看代码之前,我们先看看应该怎么去调用这些代码:
```javascript
var success = function(message) {
alert(message);
}
var failure = function() {
alert("Error calling Hello Plugin");
}
hello.greet("World", success, failure);
```
我们创建了一个成功和失败的回调,并且直接调用了hello对象的greet方法,将"World"这个值传了进去。并且,这个hello是绑定在window对象中。
现在我们来看看Android平台下的Java代码吧:
```java
package com.example.plugin;
import org.apache.cordova.*;
import org.json.JSONArray;
import org.json.JSONException;
public class Hello extends CordovaPlugin {
@Override
public boolean execute(String action, JSONArray data, CallbackContext callbackContext) throws JSONException {
if (action.equals("greet")) {
String name = data.getString(0);
String message = "Hello, " + name;
callbackContext.success(message);
return true;
} else {
return false;
}
}
}
```
我们创建了一个Hello类,它继承了CordovaPlugin,然后Override了execute方法。接着从data中取出了第一个值,即"World",并且callbackContext.success返回了处理完后的结果——Hello,World。
同理,对于Windows Phone平台来说也是如此:
```java
using WP7CordovaClassLib.Cordova;
using WP7CordovaClassLib.Cordova.Commands;
using WP7CordovaClassLib.Cordova.JSON;
namespace Cordova.Extension.Commands
{
public class Hello : BaseCommand
{
public void greet(string args)
{
string name = JsonHelper.Deserialize<string>(args);
string message = "Hello, " + name;
PluginResult result = new PluginResult(PluginResult.Status.OK, message);
DispatchCommandResult(result);
}
}
}
```
对于iOS来说就稍微麻烦一些了,我们需要源文件和头文件,如下是头文件:
```objc
#import <cordova cdv.h="">
@interface HWPHello : CDVPlugin
- (void) greet:(CDVInvokedUrlCommand*)command;
@end
```
下面是源文件:
```objc
#import "HWPHello.h"
@implementation HWPHello
- (void)greet:(CDVInvokedUrlCommand*)command
{
NSString* callbackId = [command callbackId];
NSString* name = [[command arguments] objectAtIndex:0];
NSString* msg = [NSString stringWithFormat: @"Hello, %@", name];
CDVPluginResult* result = [CDVPluginResult
resultWithStatus:CDVCommandStatus_OK
messageAsString:msg];
[self success:result callbackId:callbackId];
}
@end
```
方法总的来说都是一样的。
Cordova插件要素
---
从上面的代码中我们可以发现,对于一个插件来说,我们需要下面的一些内容:
- plugin.xml 清单文件,定义了插件的结构以及相关的设置。
- JavaScript接口,用于插件与混合应用的接口。
- 原生代码,提供原生功能和接口。
相关参考资料:
- [Cordova Hello World Plugin](https://github.com/don/cordova-plugin-hello)
- [Plugin.xml Spec](https://cordova.apache.org/docs/en/latest/plugin_ref/spec.html)</cordova></string>HTML5打造原生应用——Ionic框架简介与Ionic Hello World2015-03-23T11:52:22+00:002015-05-24T09:38:24.760422+00:00Phodal Huanghttp://www.phodal.com/blog/author/root/http://www.phodal.com/blog/ionic-development-android-ios-windows-phone-application/试了试用Ionic框架打造了两个应用,然后在Google Play上架了。
- [程序语言答人](https://play.google.com/store/apps/details?id=com.ionicframework.learningionic860614)
- [教你设计物联网](https://play.google.com/store/apps/details?id=com.phodal.designiot)
更有意思的是这是在一周的业余时间内完成的三个应用中的两个,接着让我们看看这个框架如何实现高效地开发。
##Ionic 框架
> Ionic是一个新的、可以使用HTML5构建混合移动应用的用户界面框架,它自称为是“本地与HTML5的结合”。该框架提供了很多基本的移动用户界面范例,例如像列表(lists)、标签页栏(tab bars)和触发开关(toggle switches)这样的简单条目。它还提供了更加复杂的可视化布局示例,例如在下面显示内容的滑出式菜单。
官网地简介上说了下面的一些优点:
- Performance obsessed
- Angular & Ionic
- Native focused
- Beautifully designed
- A powerful CLI
- Fun to learn
- Built by nerds (like you)
简单地来说就是:
- 性能比用jQuery构建好
- 基于Angluar JS
- 更加原生化
- 设计精美
- 更大地CLI
- 学习乐趣
- 为极客而构建
##Ionic Hello World
###安装Ionic
1.安装Node.js
2.安装Cordova和Ionic
$ npm install -g cordova ionic
3.创建项目,官方给了三个不同类型的基础项目:
- 空白应用
- Tabs应用
- 滑动菜单应用
对应的创建方式有:
1) 空白应用
$ ionic start myApp blank
2) Tabs应用
$ionic start myApp tabs
3)滑动菜单应用
$ ionic start myApp sidemenu
4.运行
$ cd myApp
$ ionic platform add android
$ ionic run android
接着我们就可以看到一个应用就生成了。