Uni-app基础实战富文本框解析 WordPress rest api实例（二）

Uni-app基础实战富文本框解析 WordPress rest api实例

文本是更具上篇文章uni-app上下拉刷新的续文有需要了解上文的请点击下面连接访问

传送门: Uni-app实战上加载新下拉刷新 WordPress rest api实例

那么我们就开始了，主要的要是去介绍了以下一个插件的使用方式。官方的富文本框有markdown和html两种方式，但是样式欠佳！

本文插件传送门:uParse修复版，优化表格，css等，html富文本加载

1.导入组件

官网可以一键导入，直接点击hbuilder x导入就ojbk。另外新建界面和界面配置这边不说啦，如果有需要可以看上面文章或者之前更早的文章

Uni-app基础实战富文本框解析 WordPress rest api实例

随后我们引入样式app.vue中引入

1 <style>  
2     /*每个页面公共css */
3     @import "components/un-parse/u-parse.css";
4 </style>

文章详情界面绑定数据（来自官方插件的代码复制，其中包含界面引入组件和注册组件复制即可用）

 1 <template>
 2   <div>
 3     <u-parse :content="article" @preview="preview" @navigate="navigate" />
 4   </div>
 5 </template>
 6 
 7 
 8 import uParse from '@/components/un-parse/u-parse.vue'
 9 
10 export default {
11   components: {
12     uParse
13   },
14   data () {
15     return {
16       article: '<div>我是HTML代码</div>'
17     }
18   },
19   methods: {
20     preview(src, e) {
21       // do something
22     },
23     navigate(href, e) {
24       // do something
25     }
26   }
27 }
28 
29 
30 
31 <style>
32 
33 </style>

在用浏览器运行应该就可以看到我是html代码这行文字了。

2.获取接口数据

如果步骤一出现错误大家自己排除下，如果正常我们就继续往下走，在onLoad中发起一个接口请求，我们这个界面接受的是上个界面传过来的文章ID，为了方面单独演示这样就直接添加文章ID，没有从上级接受。测试文章：https://www.frbkw.com/wp-json/wp/v2/posts/1700

 1 onLoad() {
 2             // _self = this;
 3             // 加载 html 内容
 4             uni.request({ //接口请求
 5                 url: 'https://www.frbkw.com/wp-json/wp/v2/posts/1700' 
 6                 success: (res) => {
 7                     console.log(res.data)
 8 
 9                 }
10             })
11         },

控制台中打印出现数据

Uni-app基础实战富文本框解析 WordPress rest api实例

我们先定义几个我们需要的东西一个内容article

1 this.article = res.data.content.rendered;

还要一个图片作为顶部封面

1 this.banner_img = res.data.featured_image_src;

最后还一个标题

1 this.banner_title = res.data.title.rendered;

整理后如下

 1 onLoad(g) {
 2             // _self = this;
 3             // 加载 html 内容
 4             uni.request({ //接口请求
 5                 url: 'https://www.frbkw.com/wp-json/wp/v2/posts/' + g.id,
 6                 success: (res) => {
 7                     console.log(res.data)
 8                     this.article = res.data.content.rendered;
 9                     this.banner_title = res.data.title.rendered;
10                     this.banner_img = res.data.featured_image_src;
11                     // console.log(this.article);
12                 }
13             })
14         },

在data的return中我们就要写上内容和标题为空，图片就不要了。整体效果下

1 data() {
2             return {
3                 article: '',
4                 banner_title: ''
5 
6             }
7         },

为了美观我们在顶部加入图片，学习小程序的样式，下面内容突起一点点圆角，整体template

 1 <template>
 2     <!-- 富文本框解析组件 开始 -->
 3     <div>
 4         <!-- 顶部图片 开始 -->
 5         <view class="data-banner" >
 6             <!-- 图片     -->
 7             <image class="data-banner-img" :src="banner_img"></image>
 8             <!-- 白色圆角 -->
 9             <view class="data-bsyj" ></view>
10         </view>
11         <!-- 顶部图片  结束 -->
12 
13         <!-- 文章详情 开始 -->
14         <div class="data-center">
15             <u-parse :content="article" @preview="preview" @navigate="navigate" />
16         </div>
17         <!-- 文章详情 结束 -->
18     </div>
19     <!-- 富文本框解析组件 结束 -->
20 </template>

相关css样式

 1 page {
 2         background-color: #FFFFFF;
 3         /* padding: 10px; */
 4     }
 5 
 6     .data-center {
 7         padding: 10px;
 8     }
 9 
10     .a {
11         height: 360upx;
12         overflow: hidden;
13         position: relative;
14         background-color: #ccc;
15         
16     }
17     .data-banner{
18         position: relative;
19     }
20     .data-banner-img {
21          100%;
22     }
23 
24     .data-bsyj{
25         background-color: #FFFFFF;
26         height: 10px;
27          100%;
28         border-top-left-radius: 10px;
29         border-top-right-radius:10px ;
30         position: absolute;
31         bottom: 0px;
32     }
33     .banner-title {
34         max-height: 84upx;
35         overflow: hidden;
36         position: absolute;
37         left: 30upx;
38         bottom: 30upx;
39          90%;
40         font-size: 32upx;
41         font-weight: 400;
42         line-height: 42upx;
43         color: white;
44         z-index: 11;
45     }

最后因为自定义了一些其他东西修改了下原作者的插件，添加了一些样式，请在components/un-parse/u-parse.css中覆盖样式（也可以直接在详情界面下方添加）

自定义h2

 1 .wxParse .h2{
 2   font-size: 1.5em;
 3   margin: 0.83em 0;
 4     background-color: #fcf2e9;
 5     padding: 10px;
 6     line-height: 1.7;
 7     border-left: #ff7800 5px solid;
 8   border-top-right-radius: 5px;
 9   border-bottom-right-radius: 5px;
10 }

自定义h3

1 wxParse .h3{
2   font-size: 1.17em;
3   margin: 1em 0;
4     background-color: #eef6fd;
5     padding: 10px;
6     line-height: 1.7;
7     border-left: #38A3FE 5px solid;
8 }

自定义代码块

 1 .wxParse .pre {
 2   overflow: auto;
 3   background: #4a4a4a;
 4   padding: 16upx;
 5   white-space: pre;
 6   margin: 1em 0upx;
 7     color: #73d8a1;
 8 }
 9 .wxParse .code {
10   display: inline;
11   background: #4a4a4a;
12     color: #73d8a1;
13 }

3.配置顶部

刚刚忘记这个步骤，后面才发现忘记了。我们消息界面打开顶部是图片，我们往上滑动的时候图片消失，显示标题。在pages.json中配置界面如下

 1 {
 2             "path" : "pages/data/data",
 3              "style": {
 4                  "navigationBarTitleText": "详情",
 5                  "app-plus": {
 6                      "titleNView": {
 7                          "type": "transparent"
 8                      }
 9                  }
10              }
11         }

总结

富文本框解析图片和代码块都比较兼容，如果说我们后台有设置其他的东西，例如下载按钮等这些就要自己在从新处理一次了

效果图:

Uni-app基础实战富文本框解析 WordPress rest api实例