利用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页面中加入如下代码

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

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('<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);
            }
        });
    },

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

4、相关效果

20150814002131

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

5个 评论 关于 利用Cordova,jqurey与wp-rest-api制作一个属于自己博客的移动APP

  1. 茫然 says:

    博主大大大牛啊、方便给一下源码呗、感激不尽

  2. mrbig2 says:

    这篇文章不错,赞一下

    博主如果还能看到,希望分享一下code啊

    • king2088 says:

      源码早已分享到了github了,你可以去github上下载,地址:https://github.com/king2088/VueEgtch,记得给我加星

    • king2088 says:

      错了,这个是jquery写的,这个jquery写的app性能是有问题的!根本用不了,建议使用VUEJS来在app吧!可以看我另一篇文章,关于使用vuejs对接WordPress的result api,http://www.egtch.com/archives/396

发表评论

电子邮件地址不会被公开。 必填项已用*标注

33 + 5 = ?