标签:lan otto 插件 cpp 控制 end highlight load() eth
文本是更具上篇文章uni-app上下拉刷新的续文有需要了解上文的请点击下面连接访问
传送门: Uni-app实战上加载新下拉刷新 WordPress rest api实例
那么我们就开始了,主要的要是去介绍了以下一个插件的使用方式。官方的富文本框有markdown和html两种方式,但是样式欠佳!
本文插件传送门:uParse修复版,优化表格,css等,html富文本加载
官网可以一键导入,直接点击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 { 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代码 这行文字了。
如果步骤一出现错误大家自己排除下,如果正常我们就继续往下走,在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 },
控制台中打印出现数据
我们先定义几个我们需要的东西一个内容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 width: 100%; 22 } 23 24 .data-bsyj{ 25 background-color: #FFFFFF; 26 height: 10px; 27 width: 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 width: 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 }
刚刚忘记这个步骤,后面才发现忘记了。我们消息界面打开顶部是图片,我们往上滑动的时候图片消失,显示标题。在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实例(二)
标签:lan otto 插件 cpp 控制 end highlight load() eth
原文地址:https://www.cnblogs.com/adozheng/p/12408255.html