微信小程序解析富文本的方法
1.可以使用wxParse插件解析html
2.下载后复制到自己的小程序项目中
3.设置全局样式
@import "./wxParse/wxParse.wxss";
4.在需要调用插件的页面中引入js
import { shopModel, couponModel } from '../../apis/index.js';
var WxParse = require('../../wxParse/wxParse.js');onLoad(options) {let { uid, scene } = options;let that = this; uid = uid || '';this.setData({uid,}); shopModel.getDetail({ uid }).then((d) => {let detail = d.data;that.setData({detail}) let space = wx.getSystemInfoSync().windowWidth / 750 * 30;/*** WxParse.wxParse(bindName , type, data, target,imagePadding)* 1.bindName绑定的数据名(必填)* 2.type可以为html或者md(必填)* 3.data为传入的具体数据(必填)* 4.target为Page对象,一般为this(必填)* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)* */ if (detail.about) {WxParse.wxParse('about', 'html', detail.about, that, space);} })},
5.wxml
<import src="../../wxParse/wxParse.wxml"/>
<view wx:if="{{detail.about}}" class="wxParse"><template is="wxParse" data="{{wxParseData:about.nodes}}"/>
</view>
微信小程序解析富文本的方法相关推荐
- 小程序(二十六)微信小程序解析富文本的几种方式
微信小程序解析富文本html大概有两种方式(我发现的). 两种方法,各有各的优缺点. 一:使用小程序内置标签rich-text 这个标签解析的富文本会保留你在pc端编辑的样式,也就是说,你在pc端编辑 ...
- 微信小程序富文本解析点击图片放大_微信小程序解析富文本过程详解
前言 最近公司在开发OTA微信小程序,一些页面的详情内容是HTML富文本格式的的,但是微信小程序不能直接解析HTML,需要将内容中的HTML标签转换成微信小程序所支持的标签. 开始的时候想过自己写方法 ...
- 微信小程序端富文本输入
有个需求是用户端也就是小程序端,需要可以富文本发布文章. 示例: 1. 下载组件-微信小程序editor富文本编辑器组件 2.放在小程序自定义组件文件夹下 3.需要用到的页面引入该组件 "u ...
- wxParse-微信小程序解析富文本组件的使用总结
wxParse是一款非常好用的解析微信小程序中富文本的组件,支持大部分的html标签: #####基本使用方法: (1)Copy文件夹wxParse ,放在小程序根目录下. wxParse/ -wxP ...
- 【愚公系列】2022年08月 微信小程序-(rich-text)富文本和(text)文本的详解
文章目录 前言 一.富文本使用 1.富文本的基本使用 2.富文本中预览图片 2.1 原生使用 2.2 组件封装使用 2.2.1 组件封装 2.2.2 组件使用 二.文本 1.文本属性 前言 富文本格式 ...
- 若依前后端分离发布富文本框内容 | uni-app微信小程序展示富文本框内容
微信小程序端引入富文本样式 富文本提交图片json error 一.展示示例: 1.PC端前端发布界面 可以设置文字大小,居中,可以插入图片,设置图片大小,居中. 2.小程序端展示 二.基于若依框架踩 ...
- 微信小程序rich-text富文本图片
背景: 本地做微信小程序项目,后台通过富文本编辑器编辑内容,在小程序页面展示时使用rich-text遇到了图片不能展示和图片尺寸过大的问题. 问题一:富文本编辑器中的图片无法展示 <rich-t ...
- 微信小程序rich-text富文本图片自适应处理
最近在做小程序,在处理富文本图片时没做相应处理,图片width没有自适应 简单的定义:img{max-width: 100%;}并没有生效 说明:微信小程序rich-text,对于样式定义仅支持sty ...
- 微信小程序 rich-text 富文本图片宽度自适应的方法
在小程序里面 展示商品详情的富文本 会有图片 会显示他原来的宽度 这时候 在手机就溢出了 这里的正确的处理办法是: 把图片的宽度改为手机屏幕对应的宽度 或者 100% uniapp WXML < ...
最新文章
- Vue单文件组件的使用
- SQL数据库基础知识总结(三)---对象
- PowerDesigner的逆向工程.
- 公众号的秘密,知道一个biz就够了
- fiddler启动文件_如何成为Fiddler大神,请看这里!
- wordpress php 链接,WordPress中获取页面链接和标题的相关PHP函数用法解析
- ssm(Spring、Springmvc、Mybatis)实战之淘淘商城-第四天(非原创)
- 指标公式c语言源码下载,自用60分钟指标源码
- 能源路由器:基于固态变压器的能源路由器结构与能源流量模型
- 专升本高数第一章试题_专升本高数复习资料,精品系列
- 品味之旅见行见心 ——香港科大EMBA郎酒庄园深度体验之旅
- 如何利用光驱位给老旧笔记本电脑安装固态硬盘
- 小程序逆向——某书小程序反编译(一)
- Arduino基础入门篇(认识开发板和面包板)
- ue4白天夜晚切换_白天/夜晚编码的美好时光...多年来最佳
- 131个经典面试题目+答案
- AI是怎么样的演算的呢?预测《权力游戏》中角色的生死
- 思科华为H3C查看命令对照表
- C++ RegSetValueEx返回值始终为5
- WebView加载html图片不显示问题