利用Cordova，JQ与WP-REST-API制作一个属于自己博客的移动APP

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

开发工具

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。

jqurey

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

wp-reset-api

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

NetBeans、elipse、Visual Studio

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

开发思路

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

相关重要代码

html页面

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

1	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

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('<li class="topcoat-list__item">' +
                '<h3><a class="view-link" href="#'+value.ID+'">'+value.title+'</a></h3>' +
                '<p>'+value.excerpt+'</p></li>');
            });
        },
        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);
        }
    });
},

Notes for a front-end developer, esyou.net