利用Cordova，jqurey与wp-rest-api制作一个属于自己博客的移动APP

你有一个自己的WordPress博客？想要制作一个个人博客的APP吗？这样一个APP要怎么才能实现？其实可以直接通过HTML+css的方法直接实现，大家应该听说过PhoneGap这个东东了吧，PhoneGap简单的说就是让一些专门做前端开发的开发者通过简单的HTML与CSS及javascript代码来实现一个手机端的APP，目前PhoneGap已将相应的核心技术贡献给了Apache，Apache利用PhoneGap的核心技术，又重新塑造了一个名为cordova的APP开发工具，下面重点介绍下Cordova。

1、开发工具

1.1、Cordova

首先Cordova为Apache一个开源项目，主要应用于手机端APP，主要通过HTML、CSS以及javascript这类基本的前端开发语言来进行开发和功能的实现。
Cordova提供了一组设备相关的API，通过这组API，移动应用能够以JavaScript访问原生的设备功能，如摄像头、麦克风等。
Cordova还提供了一组统一的JavaScript类库，以及为这些类库所用的设备相关的原生后台代码。
Cordova支持如下移动操作系统：iOS, Android,ubuntu phone os, Blackberry, Windows Phone, Palm WebOS, Bada 和 Symbian。

1.2、jqurey

jqurey这里就不用介绍了，做前端的应该都知道这个javascript开源库。

1.3、wp-reset-api

首先需要在WordPress后台安装wp-reset-api插件，此插件有相应的说明文件和使用方法，相关文档也可以到WordPress官方查看（无法访问WordPress点击修改hosts文件）。

1.4、NetBeans、elipse、Visual Studio

目前这几个开发工具最新版都集成了Cordova开发环境，因此你不用再去搭建另一个开发环境。

2、开发思路

首先wp-reset-api插件是一个WordPress程序的json插件，我们可以通过此json插件，利用jqurey来将json数据读出，并使用html与CSS将其数据一一显示和布局出来。

3、相关重要代码

3.1、html页面

正如咋们进行手机端web前端开发一样，必须让其页面设计为响应式，一定要记得html页面中加入如下代码




3.2、jqurey获取json相关代码

获取所有文章的jqurey代码

//以下javascript代码主要为获取WordPress文章wp-reset-api获取文章使用的是http://www.xxx.com/wp-json/posts的方式进行获取文章列表json
getPosts: function() {
console.log('app.getPosts');
var rootURL = 'http://www.egtch.com/wp-json';
$.ajax({
type: 'GET',
url: rootURL + '/posts',
dataType: 'json',
success: function(data){
$.each(data, function(index, value) {
$('ul.topcoat-list').append('

' +
'

'+value.title+'

' +
'

'+value.excerpt+'

');
});
},
error: function(error){
console.log(error);
}
});
},
//以下代码为显示文章内容的javascript所通过相应的json文章ID获取文章内容wp-reset-api使用的方法为http://www.xxx.com/wp-json/posts/103，103即文章ID
getSinglePost: function(postID) {
console.log('getSinglePost');
var rootURL = 'http://www.egtch.com/wp-json';
$.ajax({
type: 'GET',
url: rootURL + '/posts/' + postID,
dataType: 'json',
success: function(data){
console.log(data);
$('.single-post .title').append(data.title);
$('.single-post .content').append(data.content);
},
error: function(error){
console.log(error);
}
});
},

完整的JS代码包含了分页，大家可以点击此处进行查看，而其中使用到的样式，可以根据自己的需要进行修改。

4、相关效果

更多的效果需要自己一步步慢慢去实现，如果有需要源码的朋友，请留下你的电子邮件