Uni-app基础实战富文本框解析 WordPress rest api实例
文本是更具上篇文章uni-app上下拉刷新的续文有需要了解上文的请点击下面连接访问
传送门: Uni-app实战上加载新下拉刷新 WordPress rest api实例
那么我们就开始了，主要的要是去介绍了以下一个插件的使用方式。官方的富文本框有markdown和html两种方式，但是样式欠佳！
本文插件传送门:uParse修复版，优化表格，css等，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" } } } }
总结
富文本框解析图片和代码块都比较兼容，如果说我们后台有设置其他的东西，例如下载按钮等这些就要自己在从新处理一次了
效果图:
