Skip to content

小小前端

明月本无心,行人自回首。

Menu
  • 前端开发
  • 编程技术
  • SQL语句
  • Linux
  • 生活/旅行
  • JSEditor
  • MiniBarCMS
  • About
  • 隐私政策
Menu

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

Posted on 2015年8月14日2015年8月14日 by king2088

你有一个自己的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、相关效果

    20150814002131

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

    5 thoughts on “利用Cordova,jqurey与wp-rest-api制作一个属于自己博客的移动APP”

    1. 茫然说道:
      2015年9月2日 下午4:03

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

      回复
      1. king2088说道:
        2015年9月5日 下午4:20

        已经发到你的邮箱了!

        回复
    2. mrbig2说道:
      2017年8月17日 下午12:33

      这篇文章不错,赞一下

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

      回复
      1. king2088说道:
        2017年8月17日 下午6:05

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

        回复
      2. king2088说道:
        2017年8月17日 下午6:41

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

        回复

    发表评论 取消回复

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

    分类

    近期文章

    • cordova-plugin-camera在某些android机型中拍照或选择文件时闪退出错的解决办法 2019年10月24日
    • JavaScript nodeJS base64加密解密url参数 2019年10月15日
    • 利用expressJS编写reset api 2019年4月13日
    • angular4 + http拦截器 2019年3月21日
    • ionic navCtrl.pop如何传递参数给上一个页面 2018年11月16日
    • ionic3搭建开发/测试环境 2018年10月25日
    • ionic2、3双击硬件back按键退出应用 2018年10月24日
    • VMware安装Mac OS High Sierra 10.12及高版本无法全屏 2018年8月24日

    近期评论

    • 手表资讯发表在《ReactJS环境搭建》
    • king2088发表在《ionic中使用热更新插件cordova-hot-code-push》
    • 重阳节的诗句发表在《常用的sql语句》
    • 新郎致辞发表在《PHP代码实现WordPress相关文章的几种方法》
    • 霸道总裁发表在《vsftpd 提示 unrecognized service 解决办法》

    归档

    标签

    Ajax Android Angular APP Cordova CSS css3 express html5 ionic Java javascript jQuery Linux loading mac Mac OS mongodb MySQL node nodejs PHP react SQL SSH VirtualBox vue vue-cli win10 WordPress WP REST API 主题 兼容性 前端 备份 插件 数据库 数组 服务器 正则表达式 浏览器 热更新 目录 组件 错误
    2023年 3月
    一 二 三 四 五 六 日
     12345
    6789101112
    13141516171819
    20212223242526
    2728293031  
    « 10月    
    © 2023 小小前端 | Powered by Superbs Personal Blog theme