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

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

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

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

1.导入组件

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

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

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

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

<template>
  <div>
    <u-parse :content="article" @preview="preview" @navigate="navigate" />
  </div>
</template>


import uParse from '@/components/un-parse/u-parse.vue'

export default {
  components: {
    uParse
  },
  data () {
    return {
      article: '<div>我是HTML代码</div>'
    }
  },
  methods: {
    preview(src, e) {
      // do something
    },
    navigate(href, e) {
      // do something
    }
  }
}



<style>

</style>

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

2.获取接口数据

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

onLoad() {
			// _self = this;
			// 加载 html 内容
			uni.request({ //接口请求
				url: 'https://www.frbkw.com/wp-json/wp/v2/posts/1700' 
				success: (res) => {
					console.log(res.data)

				}
			})
		},

控制台中打印出现数据

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

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

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

this.banner_img = res.data.featured_image_src;

最后还一个标题

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

整理后如下

onLoad(g) {
			// _self = this;
			// 加载 html 内容
			uni.request({ //接口请求
				url: 'https://www.frbkw.com/wp-json/wp/v2/posts/' + g.id,
				success: (res) => {
					console.log(res.data)
					this.article = res.data.content.rendered;
					this.banner_title = res.data.title.rendered;
					this.banner_img = res.data.featured_image_src;
					// console.log(this.article);
				}
			})
		},

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

data() {
			return {
				article: '',
				banner_title: ''

			}
		},

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

<template>
	<!-- 富文本框解析组件 开始 -->
	<div>
		<!-- 顶部图片 开始 -->
		<view class="data-banner" >
			<!-- 图片	 -->
			<image class="data-banner-img" :src="banner_img"></image>
			<!-- 白色圆角 -->
			<view class="data-bsyj" ></view>
		</view>
		<!-- 顶部图片  结束 -->

		<!-- 文章详情 开始 -->
		<div class="data-center">
			<u-parse :content="article" @preview="preview" @navigate="navigate" />
		</div>
		<!-- 文章详情 结束 -->
	</div>
	<!-- 富文本框解析组件 结束 -->
</template>

相关css样式

page {
		background-color: #FFFFFF;
		/* padding: 10px; */
	}

	.data-center {
		padding: 10px;
	}

	.a {
		height: 360upx;
		overflow: hidden;
		position: relative;
		background-color: #ccc;
		
	}
	.data-banner{
		position: relative;
	}
	.data-banner-img {
		width: 100%;
	}

	.data-bsyj{
		background-color: #FFFFFF;
		height: 10px;
		width: 100%;
		border-top-left-radius: 10px;
		border-top-right-radius:10px ;
		position: absolute;
		bottom: 0px;
	}
	.banner-title {
		max-height: 84upx;
		overflow: hidden;
		position: absolute;
		left: 30upx;
		bottom: 30upx;
		width: 90%;
		font-size: 32upx;
		font-weight: 400;
		line-height: 42upx;
		color: white;
		z-index: 11;
	}

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

自定义h2

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

自定义h3

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

自定义代码块

.wxParse .pre {
  overflow: auto;
  background: #4a4a4a;
  padding: 16upx;
  white-space: pre;
  margin: 1em 0upx;
	color: #73d8a1;
}
.wxParse .code {
  display: inline;
  background: #4a4a4a;
	color: #73d8a1;
}

3.配置顶部

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

{
            "path" : "pages/data/data",
             "style": {
             	"navigationBarTitleText": "详情",
             	"app-plus": {
             		"titleNView": {
             			"type": "transparent"
             		}
             	}
             }
        }

总结

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

效果图:

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