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

笛里谁知壮士心，沙头空照征人骨。这篇文章主要讲述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。另外新建界面和界面配置这边不说啦，如果有需要可以看上面文章或者之前更早的文章

文章图片

随后我们引入样式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 { 11components: { 12uParse 13}, 14data () { 15return { 16article: ‘< div> 我是HTML代码< /div> ‘ 17} 18}, 19methods: { 20preview(src, e) { 21// do something 22}, 23navigate(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 内容 4uni.request({ //接口请求 5url: ‘https://www.frbkw.com/wp-json/wp/v2/posts/1700‘ 6success: (res) => { 7console.log(res.data) 8 9} 10}) 11},

控制台中打印出现数据

文章图片

我们先定义几个我们需要的东西一个内容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 内容 4uni.request({ //接口请求 5url: ‘https://www.frbkw.com/wp-json/wp/v2/posts/‘ + g.id, 6success: (res) => { 7console.log(res.data) 8this.article = res.data.content.rendered; 9this.banner_title = res.data.title.rendered; 10this.banner_img = res.data.featured_image_src; 11// console.log(this.article); 12} 13}) 14},

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

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

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

1 < template> 2< !-- 富文本框解析组件开始 --> 3< div> 4< !-- 顶部图片开始 --> 5< view class="data-banner" > 6< !-- 图片--> 7< image class="data-banner-img" :src="https://www.songbingjia.com/android/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 { 2background-color: #FFFFFF; 3/* padding: 10px; */ 4} 5 6.data-center { 7padding: 10px; 8} 9 10.a { 11height: 360upx; 12overflow: hidden; 13position: relative; 14background-color: #ccc; 15 16} 17.data-banner{ 18position: relative; 19} 20.data-banner-img { 21width: 100%; 22} 23 24.data-bsyj{ 25background-color: #FFFFFF; 26height: 10px; 27width: 100%; 28border-top-left-radius: 10px; 29border-top-right-radius:10px ; 30position: absolute; 31bottom: 0px; 32} 33.banner-title { 34max-height: 84upx; 35overflow: hidden; 36position: absolute; 37left: 30upx; 38bottom: 30upx; 39width: 90%; 40font-size: 32upx; 41font-weight: 400; 42line-height: 42upx; 43color: white; 44z-index: 11; 45}

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

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

自定义h3

.

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

自定义代码块

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

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