html加载富文本_Uniapp基础实战富文本框解析 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>

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

  <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: '

我是HTML代码

' } }, methods: { preview(src, e) { // do something }, navigate(href, e) { // do something } }}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

his.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>

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

3.配置顶部

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

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

总结

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

效果图:(相关源码请阅读原文下载)