wordpress小程序图片广告组件实现

组件实现"/>

wordpress小程序图片广告组件实现

小程序的图片广告组件，因为用到了uni-app，而且还有界面不错的第三方组件库uView /，那么直接拿来用，其中的swiper组件用来做广告轮播合适，文档：.html。

wordpress从4.4版本后，就自带了REST API功能，那么我需要随便找个网站测试一下。通过API能够获取到网站的数据那么就算成功了，要读取wordpress网站的图片资源，那么再去github上找一下看看有没有client库，因为后端使用Java开发，找个Java版的，还真找到了，   只不过好几年没更新了，先拿过来试试，不行再说，看了代码还行，能满足我的需求，只是有些东西不完善，比如：web端用到的分页，需要用到总记录数，原版本未实现，我给它增加了一下，fork到自己的库里。

代码里面增加里几行，满足我的需求即可，后面看不够了再改，完整的看github库。

       public Builder<BT> withPages(int pages, int total) {this.pages = pages;this.total = total;return this;}public Builder<BT> withPages(HttpHeaders headers) {Optional<String> totalPages = headers.keySet().stream().filter(x -> Strings.HEADER_TOTAL_PAGESpareToIgnoreCase(x) == 0).findFirst();Optional<String> totalOptional = headers.keySet().stream().filter(x -> Strings.HEADER_TOTALpareToIgnoreCase(x) == 0).findFirst();LOG.debug("found pages {}, total {} from headers {}", totalPages, totalOptional, headers);Stream<String> totalPageHeader = totalPages.map(x -> headers.get(x)).map(x -> x.stream()).orElse(Stream.empty());int page = Integer.valueOf(totalPageHeader.findFirst().get());Stream<String> totalHeader = totalOptional.map(x -> headers.get(x)).map(x -> x.stream()).orElse(Stream.empty());totalHeader.findFirst().ifPresent(total -> Builder.this.withPages(page, Integer.valueOf(total)));return this;}

对于我这个wordpress小程序在线编辑器，主要需要实现3个部分：

1、编辑器部分

直接使用第三方组件库uView

2、小程序部分

也用第三方组件库uView，只需要把编辑器里面保存的json数据重新渲染出来即可，这里用到了JSON Schema / 

3、后端

做一些接口，提供给编辑器和小程序使用。这次主要去实现一个获取图片的接口，并在编辑器上实现分页，因为wordpress里面的图片、附件等资源接口是一个，那么读取数据的时候，需要只读图片类型的。包装好给web端使用

        WpPage<ArtResponse> responsePage = new WpPage<>();responsePage.setList(list);responsePage.setTotalPage(pagedResponse.getPages());responsePage.setHasNext( pagedResponse.hasNext() );responsePage.setHasPrevious( pagedResponse.hasPrevious() );responsePage.setTotalRow( pagedResponse.getTotal() );return ResponseEntity.ok(responsePage);

小成果看下面的视频，已经把这个组件在编辑器上实现出来，并在微信小程序开发环境测试通过，效果还行：每天总结一下，希望能把这个项目坚持下去。

WordPress小程序编辑器广告轮播图实现效果