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" } } } }
总结
富文本框解析图片和代码块都比较兼容,如果说我们后台有设置其他的东西,例如下载按钮等这些就要自己在从新处理一次了
效果图:(相关源码请阅读原文下载)
html加载富文本_Uniapp基础实战富文本框解析 WordPress rest api实例相关推荐
- 用爬虫抓取动态加载数据丨Python爬虫实战系列(6)
提示:最新Python爬虫资料/代码练习>>戳我直达 前言 抓取动态加载数据 话不多说,开练! 爬虫抓取动态加载数据 确定网站类型 首先要明确网站的类型,即是动态还是静态.检查方法:右键查 ...
- 华为畅享9,进入小程序,经常加载不出详情页 editorCtx 富文本
因为详情是使用富文本编辑框来解析的文本内容, 1.wxml页面代码 <editor id="editor" class="ql-container" re ...
- h5 先加载小图_交互基础:加载的10种类型和应用场景分析
原文地址:白鹭漫谈(公众号) 作者:白鹭漫谈 目录: 一.为什么需要加载 二.常见的加载场景 三.加载的10种类型和分析 四.总结 一.为什么需要加载? 1 给用户反馈 在上篇<尼尔森10大可用 ...
- Python Word2vec训练医学短文本字/词向量实例实现,Word2vec训练字向量,Word2vec训练词向量,Word2vec训练保存与加载模型,Word2vec基础知识
一.Word2vec概念 (1)Word2vec,是一群用来产生词向量的相关模型.这些模型为浅而双层的神经网络,用来训练以重新建构语言学之词文本.网络以词表现,并且需猜测相邻位置的输入词,在word2 ...
- 腾讯动漫爬虫与动态随机加载反爬破解技术实战
本文作者韦玮原创,转载请注明出处. 项目需求与问题引入 有时,我们想爬取腾讯动漫中的漫画,比如,我们不妨打开腾讯动漫中某一个动漫的网址ac.qq.com/Comic/comic-,如下图所示: 然后, ...
- 【微前端开发环境下,加载远程子应用的实战。】
一开始我们的本地开发运行的环境,如果没有启动子应用的话.对应的页面是白屏的. 问题: 当有关联资源需要跳转时无法跳转,需要额外打开一个浏览器tab页到环境上面执行操作. 当bug类型为纯ui-serv ...
- MUI框架的上拉加载的深入探索和实战运用
文章目录 上拉加载 初始化 端部上拉载荷 重置上拉加载 禁用上拉刷新 启用上拉刷新 选项卡更改图标 mui变量和plus变量分别是什么 网络请求必须用mui.ajax,调试必须用真机或模拟器 上拉加载 ...
- ASP.NET网站页面加载及运行效率等多方面实战优化
网站加载内容较多,图片.Flash等文件较大.请求次数较多.页面不具有缓存性等等都会影响网站的页面加载速度和运行效率.之前做过很多网站,但是基本上都没有进行过优化,比如运用缓存等技术.最近有一个网站加 ...
- mysql初始化加载插件_Hapi+MySql项目实战配置插件-加载文件渲染母版(三)
加载插件 一般在其它node框架下,我们安装好插件直接require('插件')就能正常使用了,但是在Hapi下我们必须要Server.register()方法,才能正常使用插件.举个例子: 1 se ...
最新文章
- wxWidgets:wxArrayString类用法
- Linux crontab的使用方式,sh脚本的编写,sh脚本自动启动tomcat服务器,sh监控系统运行情况
- WordPress强制跳转https教程
- java proguard 使用_一步步教你使用Proguard混淆Java源代码
- SpringCloud Hoxton版微服务- Gateway网关
- SQL Serve 查询所有可用的数据库语句
- 苹果叶片病害识别中的深度学习研究
- 编译报错程序集版本高于所引用的程序集的版本
- oracle打印awr报告,oracle生成awr报告
- ubuntn 常用命令和快捷键汇总
- MySQL数据分析-(12)表操作补充:字段属性
- 好记性真的不如烂笔头
- 考研英语语法_Day02_并列句
- 土气和洋气的方法不用π求圆的面积
- 《算法》中的红黑树实现
- “图形驱动程序无法找到兼容的图形硬件”的处理方式
- linux格式化光盘找不到介质,Linux挂载光盘的问题解决方案(mount: you must specify the filesystemnbs...
- uc保存html,UC浏览器如何保存网页?UC浏览器保存网页教程图文详解
- C++ 三目运算符 ?:
- 教程:如何下载坦克世界
热门文章
- python解析器是什么_如何用python写一个简单的词法分析器
- c++全局变量怎么定义_C errno全局变量是否是线程安全的
- Google和微软哪个更可怕?
- 江苏约谈滴滴、T3出行等6家企业 因疫情防控落实不到位
- 1899元起!iQOO Z5造梦空间配色明日正式开售
- 苹果iPad mini 6更多细节曝光:全面屏加持 搭载A14/A15芯片
- 岳云鹏:买128G手机仅112G可用!手机系统占用存储空间应厂商消化?
- 三年白干!程序员因违反《竞业协议》赔偿腾讯97.6万元,返还15.8万元
- 便利蜂发布《白领早餐报告》:仅5成白领每天吃早餐
- 官方正式预热华为Mate40系列发布盛典:余承东称还有新功能