基于 WordPress REST API 和Ionic的APP

移动互联网算是一次革命,但是任何革命都不是要彻底打碎旧世界的,所以,桌面端的WEB还是有存在的理由和必要的, WordPress 可以通过扩展满足桌面端、微信端和APP端的需求,本文记录如何使用Ionic和WordPress + REST API生成自定义APP。

准备

计算机需要安装ionic以及其依赖,网站服务端需安装 REST API插件(在其进入到WordPress核心之前,是需要安装的),由于REST API插件的某些不足,需要自定义其扩展。

步骤

ionic start a0

在上一步骤中,a0为项目目录,可根据实际需要命名;

ionic platform add android

在上一步骤中,添加对安卓平台的支持,可在MAC/MAC BOOK上使用如下命令添加对IOS平台的支持:

ionic platform add ios

可使用

cordova platform list

查看支持的平台/系统。

接下来就是编写js/css/html了,重点是WordPress REST API 与 自定义的 AngularJS 服务之间的数据衔接。

在编写过程中,可使用:

ionic serve

在自己的浏览器上预览APP的大致效果并可在console中输出调试数据。

编写之后,使用命令:

ionic build android

创建安卓平台上的未签名app:

WordPress REST API IONIC

实际运行效果如下:

WordPress REST IONIC APP

这是实验品,所以就不用喷它多丑了。

APP的基本结构

没有定式,下面只是推荐的结构:

WordPress REST IONIC APP

service.js:自定义的服务;

filter:自定义的过滤器,用于信任HTML;

controllers.js:控制器;

config.js:配置文件;

app.js:引导文件。

templates目录下的html文件为APP的页面模板。

 

自制 WordPress APP 测试截图

本文记录一个自制 WordPress APP 的测试,基于 Ionic 制作,可编译为Android、IOS、Windows 等多平台的APP,下述截图仅是在Android平台的测试。

登录前

icon:

429

首屏:

WordPress APP

注册/登录提示屏:

WordPress APP

注册屏(可注册):

WordPress APP

 

登录屏(可登录):

WordPress APP

重置密码屏(可重置密码):

WordPress APP

开始登录:

WordPress APP

WordPress APP

登录后

WordPress APP

详情屏:

WordPress APP

发表评论:

WordPress APP

WordPress APP

WordPress APP

左侧滑菜单:

WordPress APP

设置屏:

WordPress APP

上述屏幕开发记录:

启用位置: @TODO;

发送反馈: 调用 设备上安装的邮件APP(比如QQ邮箱、阿里云邮等) 自动发送邮件,如下:

WordPress APP

邮箱中收到上述邮件:

阿里云邮

 

点个赞: 调用应用管理APP(如XXX手机助手、Google Play 等)给该APP一个评价;

两个广告插件:准备弃用 iAd ,保留 AdMob:

AdMob 的 banner广告:

WordPress APP

AdMob 的全屏广告:

WordPress APP

关于子项的对应屏示例:

WordPress APP

退出选项:

WordPress APP

右侧滑搜索屏:

WordPress APP

当然是ajax效果的即时搜索了。

收藏屏:

WordPress APP

收藏按钮在“新文”屏中文章项目右下角。

收藏文章之后:

WordPress APP

 

联络屏: 调用 WordPress 某个页面/文章 的详情 或者 自定义 HTML。

其它

分享 : 调用 设备安装的具有分享功能的应用分享某个项目,示例如下:

WordPress APP

下面的示例截屏是使用QQ发送到电脑的(当然了,微信、微博、QQ好友、QQ群等,都不是问题):

WordPress APP

电脑桌面端接收到后的截图如下(链接前的提示文字预置于APP内):

WordPress APP

结论

使用 Ionic 制作 基于 WordPress 的  hybrid app 的难度并不大,前提是需要对下列知识和经验储备:

WordPress;

Ionic;

Cordova 以及插件的使用;

AngularJS 的使用;

CSS+JS(这个算是兜底的技能)。

有了上述知识储备,剩下的只是时间问题。

Ionic for WordPress Tested

Ionic for WordPress Tested :本文记录用Ionic结合WordPress生成Android和IOS应用的效果,仅以安卓平台为例。

Ionic 开发框架的大致架构: Cordova + Ant + Node.js + Angular.js。

启动页面:

WordPress+Ionic

WordPress+Ionic

WordPress+Ionic

默认的无限下滑文章列表页面:

WordPress+Ionic

文章详情页:

WordPress Ionic

特定的页面:

WordPress+Ionic

登录页面:

WordPress+Ionic

侧滑菜单:

WordPress+Ionic

Ionic 是一个不错的混合应用开发框架!

 

将Ionic项目编译为Android APP

我在前面已经写了篇文章说Ionic是个比较好使的APP框架,本文记录如何将Ionic项目编译为Android APP。

假如你的开发环境已经正确配置了 Node.js+Cordova+Ionic+Ant+Android SDK,那么,只需要在项目中加入对安卓平台的支持,然后编译就行了,步骤如下:

在项目中加入对安卓平台的支持

输入 ionic platform add android,点击回车,将会自动下载所需文件:
ionic platform add android
下载完毕后,将会有个提示,按照提示指示输入命令,并运行:
cordova platform add android

编译为安卓APP

 

然后输入编译为安卓APP的命令:
ionic build android
点击回车键开始运行,噼里啪啦的运行之后,如果没错的话,会看到编译成功的提示:
ionic build android

实测生成的APP

 

找到这个编译后的apk文件(下图中的coolwp_2),放进安卓测试环境:
apk测试环境
点击运行:

android app

android app

 

android app

结论

Ionic结合自己搭建的APP开发环境,在申请个免费的Firebase账号,就可以使正规APP都免费了,当然了,这个开发环境的时间成本比较大。

Ionic 项目编译为IOS应用的方法与之类似,不赘述。本文首发酷威普和索凌网络,转载请注明。