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

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下添加如下代码即可

// 添加缩略图
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 'https://ccc.nnbbxx.net/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/

项目截图

1

2

3

4

5

##License

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

The MIT License (MIT)

Copyright (c) 2016 Zhen.Wang

版权声明:
作者:王金阁
链接:https://www.nnbbxx.net/post-6292.html
来源:王金阁博客
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
打赏
< <上一篇
下一篇>>