当前位置:代码狗 > WordPress > WP建站 > 正文

利用WP REST API接口实现微信小程序调用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通过微信小程序得到的代码狗博客网站的前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即可,下一章我们再来看看文章详情页的微信小程序代码吧!

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

赞(0) 打赏

评论 3

  1. #1

    文章详情页的微信小程序代码呢?特别需要啊

    小麦之神1周前 (05-16)回复
    • 找不到了,改天再写个。

      代码狗7天前回复
      • 期待中…………

        小麦之神7天前
×

请作者吃根烤肠!

支付宝