• 注册
  • 个人说明:TA有点懒了,什么都没有写。
    关注 1 粉丝 0 喜欢 0 内容 256
    河南省·郑州市
    聊天 送礼

    新版界面开发进度

    14%
    其实就是啥也没写,只有想法,哈哈
    • 回帖总排行
    • 采纳总排行

    分享精彩给好友

    全部文章 关注:0 内容:1074

    利用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数据

      实现步骤

      检查你的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接口

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

      你需要登录,才能进行发帖操作