让代码更简单

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

重要:本文最后更新于2019-05-21 20:07:20,某些文章具有时效性,若有错误或已失效,请在下方留言或联系代码狗

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通过微信小程序得到的代码狗博客网站的前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接口

WP REST API接口

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

感觉很棒!可以赞赏支持我哟~

2 打赏

评论 (8)

登录后评论
用了wp API后,每次访问时,网站服务器CPU瞬间占用90%多,不知道您遇到过这样的问题吗?怎么解决?
我这没有啊
I believe what you published was very logical.

But, think on this, suppose you composed a catchier title?

I ain't saying your content is not good., but suppose you added something that grabbed a person's
attention? I mean 利用WP REST API接口实现微信小程序调用WordPress数据-代码狗 is kinda boring.
You ought to glance at Yahoo's home page and watch how they write post titles
to get viewers to open the links. You might add a video or a related picture
or two to grab people excited about everything've
written. In my opinion, it could make your posts a little livelier.
Thank you for your advice
同求小程序代码,谢谢~~~~万分感谢
文章详情页的微信小程序代码呢?特别需要啊
找不到了,改天再写个。
期待中............
QQ咨询 邮件咨询 狗哥推荐