wordpress转APP方案(安卓&IOS)

作者: Rememberautumn 分类: css,html5,JavaScript,Web前端,WP主题,WP分享 发布时间: 2016-03-30 22:09 阅读: 26,308

已支持底部菜单栏

以wordpress的Rest Api构建的app

项目主页:http://aorz.github.io/Wordpress-Mobile-Application/

更新内容

2017.6.26: 文章列表页增加截图,兼容4.8

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版本及以上,wordpress 4.8以上不需要安装,自带 json api)
  3. 更改/js/app.js里面的name和菜单名称和对应的id(可在example.com/wp-json/wp/v2/categories查看)
  4. 下载安装Hbuilder,使用其在线打包功能,选择文件/打开目录(打开本项目代码目录),双击manifest.json设置app名称和id,修改app图标和启动图。
  5. 点击发行,发行为原生应用,设置好开发者证书,然后打包。

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

案例体验

我的博客:奋斗的承诺

用到的技术

  1. html5+:http://www.html5plus.org/doc/h5p.html
  2. mui:http://dev.dcloud.net.cn/mui/
  3. hbuilder:http://www.dcloud.io/

项目截图

首页 菜单 搜索 正文 正文

下载测试:http://pan.baidu.com/s/1hsLI3ZY

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

28条评论
  • Pingback: 代码高亮插件Prism.js高亮动态插入内容–ajax内容 | 奋斗的承诺
  • 海滨稻香

    2016年7月6日 17:24

    怎样把侧边菜单改为底部菜单,更多功能什么更新一下呢

    1. Rememberautumn

      2017年7月29日 08:51

      已支持

  • 海滨稻香

    2016年7月7日 13:17

    还有发现设置为自己分类之后 出错,调用不了分类文章列表

    1. Rememberautumn

      2017年7月29日 08:51

      看一下分类Id是否正确

  • st

    2016年12月6日 16:18

    同上,不能调用分类文章,不过还是希望可以是自定义的伪静态连接比较好,望博主有时间了可以看看。

    1. Rememberautumn

      2017年7月29日 08:52

      伪静态连接 是可以的

  • S-E-O

    2016年12月23日 13:22

    如果能在里面添加广告就完美了

    1. Rememberautumn

      2017年7月29日 08:52

      可以自行添加推广广告

  • 晕菜

    2017年4月22日 21:34

    设置/固定链接设置为文章格式:这是要怎么设置呀?总提示错误,要怎么做才好?

    1. Rememberautumn

      2017年7月29日 08:52

      不需要设置也可

  • 小天狼姬

    2017年8月7日 19:06

    请问能制作成登录功能吗

    1. Rememberautumn

      2017年8月8日 19:29

      暂时没有开发此功能

  • lengxia

    2017年8月7日 19:16

    无事来一发

  • 阿布

    2017年8月26日 02:10

    在functions.php添加了缩略图的函数,并且看到json有缩略图的字段输出。

    但是测试APP时就是看不到图片 望回复

    1. Rememberautumn

      2017年8月27日 07:45

      代码是不是最新版?

      1. 阿布

        2017年8月27日 23:56

        是最新版

        1. Rememberautumn

          2017年8月30日 11:15

          详细描述下?

  • 小天狼姬

    2017年9月3日 13:46

    我想请问下,在HB里预览项目时,预览Index.html 和 list.html 会出现报错,报错内容是这样的,请问有办法解决吗?
    XMLHttpRequest cannot load http://xxxx/wp-json/wp/v2/posts?page=1&context=embed&categories=&per_page=20. Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers.” /Wordpress-Mobile-Application-master/list.html (0)

    1. Rememberautumn

      2017年9月4日 17:02

      跨域了,搜一下跨域的解决方案

  • 枫瑞

    2017年9月11日 23:32

    这个开发工具 不是不能支持PHP的操作吗

    1. Rememberautumn

      2017年9月13日 23:16

      使用的是rest api

  • xiaomo

    2017年10月3日 18:25

    请问“侧滑菜单配置项“和”底部菜单配置项“中如何将某个点击项换成链接url

    1. Rememberautumn

      2017年10月13日 10:54

      目前好像不支持,你可以自己改下代码实现下

  • mi

    2017年10月4日 10:45

    请问这样弄出来的app可以上架通过苹果审核吗?

    1. Rememberautumn

      2017年10月13日 10:53

      可以的

  • mi

    2017年10月4日 12:24

    用你最新版打成的安卓包,打开首页直接提醒没有内容,然后首页只显示一页内容,不能自动加载下一页,直接提醒没有更多数据,麻烦看看哦

    1. Rememberautumn

      2017年10月13日 10:55

      看看你的接口返回的数据是不是有多个

发表评论

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