Wordpress-Mobile-Application

利用wordpress作为后台,构建App(安卓和IOS)

更新内容

2017.6.26: 文章列表页增加截图

2016.10.24: 添加底部菜单栏

2016.10.02: 升级 vue 2.0 版本
2016.05.15:支持代码高亮,支持语言PHP,JS,CSS,Java等,代码格式<pre class="lang:js">code</pre><pre class="lang:js"><code>code<code></pre>,代码高亮使用了prismjs,做了一些修改,如有其它需求可修改此插件。

定制 APP

修改主题颜色

下载本项目代码,打开css/mystyle.css最后几行有注释声明可以修改颜色值,修改颜色值即可自定义主题颜色。

修改底部菜单

/js/app.js 中修改 nav_bar 数据可以修改底部菜单栏,其中 class 为图标样式,可选样式参考 所有图标


构建方法

  1. 安装wordpress

  2. wordpress安装 wordpress rest api (2.0版本及以上)

  3. wordpress后台:设置/固定链接设置为文章格式

  4. 更改/js/app.js里面的name和菜单名称和对应的id(可在example.com/wp-json/wp/v2/categories查看)

  5. 下载安装Hbuilder,使用其在线打包功能,选择文件/打开目录(打开本项目代码目录),双击manifest.json设置app名称和id,修改app图标和启动图。

  6. 点击发行,发行为原生应用,设置好开发者证书,然后打包。

打包成功后会自动下载到本地目录,这样一个App就制作好了。

列表页增加图片

当前主题的functions.php下添加如下代码即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 添加缩略图
add_action( 'rest_api_init', 'add_thumbnail_to_JSON' );
function add_thumbnail_to_JSON() {
//Add featured image
register_rest_field( 'post',
'featured_image_src', //NAME OF THE NEW FIELD TO BE ADDED - you can call this anything
array(
'get_callback' => 'get_image_src',
'update_callback' => null,
'schema' => null,
)
);
}

// 自动缩略图
function get_image_src( $object, $field_name, $request ) {
$first_img = '';
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $object['content']['rendered'], $matches);
$first_img = $matches [1] [0];

if(empty($first_img)){
// echo get_bloginfo ( 'stylesheet_directory' );
// echo '/img/default.jpg';
$first_img = 'https://fddcn.cn/uploads/suoluo/'.rand(1,15).'.png';
}
return $first_img;
}

案例体验

作者的博客:奋斗的承诺

用到的技术

  1. html5+:http://www.html5plus.org/doc/h5p.html

  2. mui:http://dev.dcloud.net.cn/mui/

  3. hbuilder:http://www.dcloud.io/

项目截图

首页
首页
菜单
菜单
搜索
搜索
正文
正文
正文
正文

##License

来源 https://github.com/aOrz/Wordpress-Mobile-Application

The MIT License (MIT)

Copyright (c) 2016 Zhen.Wang