本帖最后由 fengrui99 于 2019-5-8 11:27 编辑
Uni-app基础实战富文本框解析 WordPress rest api实例原文来自啊文本是更具上篇文章uni-app上下拉刷新的续文有需要了解上文的请点击下面连接访问
原文来自：https://www.frbkw.com/1705/
传送门: Uni-app实战上加载新下拉刷新 WordPress rest api实例
文本是更具上篇文章uni-app上下拉刷新的续文有需要了解上文的请点击下面连接访问
传送门: Uni-app实战上加载新下拉刷新 WordPress rest api实例
那么我们就开始了，主要的要是去介绍了以下一个插件的使用方式。官方的富文本框有markdown和html两种方式，但是样式欠佳！
本文插件传送门:uParse修复版，优化表格，css等，html富文本加载
1.导入组件官网可以一键导入，直接点击hbuilder x导入就ojbk。另外新建界面和界面配置这边不说啦，如果有需要可以看上面文章或者之前更早的文章
随后我们引入样式app.vue中引入[Asm] 纯文本查看 复制代码 <style>
/*每个页面公共css */
[url=home.php?mod=space&uid=476974]@import[/url] "components/un-parse/u-parse.css";
</style>[Asm] 纯文本查看 复制代码 <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
[Asm] 纯文本查看 复制代码 onLoad() {
// _self = this;
// 加载 html 内容
uni.request({ //接口请求
url: 'https://www.frbkw.com/wp-json/wp/v2/posts/1700'
success: (res) => {
console.log(res.data)
}
})
},
控制台中打印出现数据
我们先定义几个我们需要的东西一个内容article
[Asm] 纯文本查看 复制代码 this.article = res.data.content.rendered;
还要一个图片作为顶部封面
[Asm] 纯文本查看 复制代码 this.banner_img = res.data.featured_image_src;
最后还一个标题
[Asm] 纯文本查看 复制代码 this.banner_title = res.data.title.rendered;
整理后如下
[Asm] 纯文本查看 复制代码 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);
}
})
},[Asm] 纯文本查看 复制代码 data() {
return {
article: '',
banner_title: ''
}
},
为了美观我们在顶部加入图片，学习小程序的样式，下面内容突起一点点圆角，整体template[Asm] 纯文本查看 复制代码 <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样式[Asm] 纯文本查看 复制代码 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中覆盖样式大家下载源码查看刚刚忘记这个步骤，后面才发现忘记了。我们消息界面打开顶部是图片，我们往上滑动的时候图片消失，显示标题。在pages.json中配置界面如下
[Asm] 纯文本查看 复制代码 {
"path" : "pages/data/data",
"style": {
"navigationBarTitleText": "详情",
"app-plus": {
"titleNView": {
"type": "transparent"
}
}
}
}
总结
富文本框解析图片和代码块都比较兼容，如果说我们后台有设置其他的东西，例如下载按钮等这些就要自己在从新处理一次了效果图
:
| 
发表于 2019-5-8 11:25
|
发表于 2019-5-8 11:48
