NIUBI
wordpress教程

利用 WP REST API 接口实现微信小程序调用 WordPress 数据

1年前/ 109/ / WP爱好者/ 已收录/
导语: WP REST API 这个东西就是个 WordPress 提供的向外接口,利用它可以跨平台调用 WordPress 网站数据。比如使用微信小程序提供的接口可以请求 WP REST API 实现微信小程序得到 WordPress 网站数据,通过安卓程序请求接口得到数据可以将你的网站做成安卓 APP,使用 C#等请求接口得到数据可以将你的网站做成 Windows 桌面程序。不仅如此,通过这个接口,你可以各个 WordPress 网站间访问数据,更新数据,甚至可以实现 WordPress 站群功能。

WP REST API 这个东西就是个 WordPress 提供的向外接口,利用它可以跨平台调用 WordPress 网站数据。比如使用微信小程序提供的接口可以请求 WP REST API 实现微信小程序得到 WordPress 网站数据,通过安卓程序请求接口得到数据可以将你的网站做成安卓 APP,使用 C#等请求接口得到数据可以将你的网站做成 Windows 桌面程序。不仅如此,通过这个接口,你可以各个 WordPress 网站间访问数据,更新数据,甚至可以实现 WordPress 站群功能。

WP REST API 官方解释

WP REST API 是 wordpress 的一个插件(4.7 版后自带),为 wordpress 提供对外标准的 RESTFul 接口,随着 RESTFul 的畅行和各种前端框架的出现,WP REST API 可以让 wordpress 不仅仅存在 WEB 端,可以让 wordpress 不仅仅履行一个博客功能,而是可以让 wordpress 程序作为后台终端(BackEnd),然后以各种应用的形式实现在各种各样的设备中。

先看看我刚用 WP REST API 通过微信小程序得到的 WP 爱好者博客网站的前 10 篇文章,如下图(css 没学好,写这点样式花了我大半个小时,坑!)。

利用 WP REST API 接口实现微信小程序调用 WordPress 数据

利用 WP REST API 接口实现微信小程序调用 WordPress 数据

实现步骤

检查你的 WordPress 网站是否支持 WP REST API,如果不支持搜索插件安装即可,检查方法是使用浏览器访问:

你的域名/wp-json/wp/v2/posts

支持则会返回你网站的前 10 篇文章的 json 数据,不支持则提示 404。

微信小程序布局 wxml

<view class="excerpt" wx:for="{{wpposts}}" wx:key="unique">     <image class="focus" src="{{item.thumbnailurl}}"/>     <view>       <view>{{item.title.rendered}}       <view>{{item.excerpt.rendered}}       <view class="meta">{{item.date}}wp 建站</view>     </view>

微信小程序布局 wxss

.excerpt{   position: relative;   width: 100%;   height: 120px;       border-bottom: 1px solid #f2f2f2; } .focus{   padding: 5px 5px;   float: left;   width: 110px;   height: 75px;   margin-top: 10px;   margin-bottom: 10px; } .title{     font-size: 16px;     overflow: hidden;   text-overflow: ellipsis;   line-height: 23px;    display: -webkit-box;   max-height: 46px;   -webkit-line-clamp: 1;   -webkit-box-orient: vertical;   padding-top: 10px } .note{   margin-top: 5px;   font-size: 14px;   color: #999;   overflow: hidden;   text-overflow: ellipsis;   display: -webkit-box;   line-height: 23px;   max-height: 46px;   -webkit-line-clamp: 1;   -webkit-box-orient: vertical;  } .meta{     color: #bbbbbb;     font-size: 12px;     position: absolute;     bottom: 20px;     left: 110px; } .cag{   margin-left: 10px; }

通过 wx.request 方法请求数据

onLoad: function (options) {       var that = this;     wx.request({       url: '你的域名/wp-json/wp/v2/posts',        data: {                },       header: {         'content-type': 'application/json' // 默认值       },         success(res) {                  that.setData({           wpposts: res.data         });         console.log(res.data)       }     }) }

请求得到的 json 数据存储在 wpposts 变量中,然后会被 wxml 文件中的 wx 循环解析生成一条条文章数据。

注意事项

WP REST API 中并没有输出缩略图的数据,因此我们需要为 WP REST API 返回的数据添加缩略图地址,将下面的代码放在你的主题 functions.php 文件中即可支持返回缩略图地址。

add_filter( 'rest_prepare_post', 'my_rest_prepare_post', 10, 3 ); function my_rest_prepare_post( $data, $post, $request ) {     $_data = $data->data; if ( has_post_thumbnail() ) {     $thumbnail_id = get_post_thumbnail_id( $_data['id'] );     $thumbnail = wp_get_attachment_image_src( $thumbnail_id , 'thumbnail' );     $thumbnailurl = $thumbnail[0];     $featuredimgurl = $featuredimg[0];     if( ! empty($thumbnailurl)){         $_data['thumbnailurl'] = $thumbnailurl;     }     }else{         $_data['thumbnailurl'] = null;     }     $data->data = $_data;     return $data; }

最终返回数据如下:

利用 WP REST API 接口实现微信小程序调用 WordPress 数据

WP REST API 接口

同样,我们还可以让返回的数据中带上文章的分类、阅读数、评论数等数据。这里就不一一举例了,参照上面输出缩略图的代码 diy 即可,下一章我们再来看看文章详情页的微信小程序代码吧!

点点赞赏,手留余香

还没有人赞赏,快来当第一个赞赏的人吧!
admin给Admin打赏
×
予人玫瑰,手有余香
  • 2
  • 5
  • 10
  • 20
  • 50
2
支付
收藏 0 海报

版权归属:本文为原创文章,版权归 所有

本文链接:( 欢迎分享本文,转载请保留出处 )

免责声明:如发现本站有涉嫌抄袭侵权/违法违规的内容,请邮件/留言反馈,一经查实本站将立刻删除!

<< 上一篇

2019-05-05

下一篇 >>

2019-05-05

全部评论( 1 条 )
    最新评论
  1. admin
    admin 博主 Lv.1

    签到成功!签到时间:2019-09-19 11:00:16,每日打卡,生活更精彩~

    沙发 2019-09-19 11:00
扫一扫二维码分享