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

更多的效果需要自己一步步慢慢去实现,如果有需要源码的朋友,请留下你的电子邮件
博主大大大牛啊、方便给一下源码呗、感激不尽
已经发到你的邮箱了!
这篇文章不错,赞一下
博主如果还能看到,希望分享一下code啊
源码早已分享到了github了,你可以去github上下载,地址:https://github.com/king2088/VueEgtch,记得给我加星
错了,这个是jquery写的,这个jquery写的app性能是有问题的!根本用不了,建议使用VUEJS来在app吧!可以看我另一篇文章,关于使用vuejs对接WordPress的result api,http://www.egtch.com/archives/396