rich text代码一览表

2022-07-15 04:18:19 文档大全网 [ 字体：小中大 ] [ 阅读： ]

【#文档大全网# 导语】以下是®文档大全网的小编为您整理的《rich text代码一览表》，欢迎阅读！
一览表,代码,rich,text
rich text代码一览表

在微信小程序开发中，rich-text 标签可以用来显示富文本 html内容，可以渲染部分html标签，全局支持class和style属性，但不支持id属性。

1 基本使用

一种最基本的应用场景就是从接口请求加载回来的 html 内容，显示到小程序页面上，常用商品详情等等。

首先，是 wxml 页面元素的使用

然后在对应的 js 文件中 Page({ **

*页面的初始数据*/ data: {

content: ' eh1>这里是标题

这里是段落内容体系

}. /**

*生命周期函数--监听页面加载 onLoad: function (options) { }, }

2 处理图片自适应问题 /**

例妆功加载商品详情*/

getdetail: function （{wX.request({ url:'接口地址'.

data: {'参数key' : ''}.header : { 'content-type ' : 'application/json '}, method: 'GET',

responseType: 'text' ,success(res）{ console.log(res);

if (res.data.code == 0) {//返回的富文本数据 var content = res.data.data. content;that.setData({ //处理图片自适应问题**

*此代码段处理目的为，匹配富文本代码中的标签，并将其图片的宽度修改为适应屏幕max-width : 100%---图片宽度加以限制，避免超出屏幕

* height:auto---高度自适应 * display:block */

contentInfo:content.replace'ght:auto;display-:block;margin:10px 0;"')}

} else {

console.log( '数据加载失败') wx . showToast({ title: res.data.msg,

duration: 2000 } } } }, }

本文来源：https://www.wddqxz.cn/071cb33f5a0102020740be1e650e52ea5518ceac.html