微信小程序富文本三种方法+0.1rich-text+0.2插件+0.3webview

官方的跟我们想要的有些不同

把标签一个一个的定下来，这样是满足不了富文本的需求的

我们需要的可以是有文字，有图片掺杂在一起的

所以我们的处理方式是后台上传图片的时候处理一下

方法有三种

1.使用rich-text

2.使用插件

3.使用web-view（网页渲染图片）

rich-text

基础库 1.4.0 开始支持，低版本需做兼容处理

富文本。

属性	类型	默认值	说明	最低版本
nodes	Array / String	[]	节点列表 / HTML String	1.4.0

<!-- rich-text.wxml -->
<rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>

// rich-text.js
Page({data: {nodes: [{name: 'div',attrs: {class: 'div_class',style: 'line-height: 60px; color: red;'},children: [{type: 'text',text: 'Hello&nbsp;World!'}]}]},tap() {console.log('tap')}
})

遇到的问题也很多

1.使用起来图片需要处理一遍，因为图片的大小控制起来比较麻烦

第二中方法

使用web-view

微信小程序富文本三种方法+0.1rich-text+0.2插件+0.3webview相关推荐

微信小程序路由的三种方法
wx.navigateTo(Object object) 保留当前页面,跳转到应用内的某个页面.但是不能跳到 tabbar 页面.使用 wx.navigateBack 可以返回到原页面. wx.swi ...
微信小程序开发的三种模式
摘要:截止到2018年6月底,正式上线发布的微信小程序已超过100万个.而越来越多的公司也已经在做微信小程序开发,许多人会觉得"微信小程序开发是开发者们的专利".答案是否定的,今天 ...
微信小程序富文本解析
微信小程序富文本解析 *人狠话不多,直接代码搞起* html代码(后台返回的html代码) 这是一段文字这是加粗的字 ...
微信小程序富文本处理
微信小程序富文本处理 wxml页面代码: <rich-text nodes ="{{content.content}}"></rich-text> ts代码 ...
微信小程序富文本编辑器获取内容
1.新建wxParse文件夹里面的结构是这样:wxParse :{ emojis (文件夹) html2json.js (文件) htmlparser.js(文件) showdown.js (文件) ...
微信小程序富文本渲染(rich-text)换行失效
微信小程序富文本渲染(rich-text)换行失效给rich-text标签加css 样式 white-space: pre;
微信小程序富文本编辑器组件 editor
微信小程序富文本编辑器组件 editor <view class="container"><view class="titlebox"> ...
微信小程序富文本修改图片的大小
一.先言有时后端直接返回的富文本内容,前端展示的时候会出现图片太大或太小,所以需要处理一下,,,实现并不难,主要是利用replace方法全局替换图片img标签的style样式,修改其宽度样式. 二. ...
微信小程序富文本组件使用
能够使用微信小程序提供的富文本组件及引入的第三方富文本组件掌握使用微信小程序的表单组件掌握使用微信小程序的form表单及如何提交数据掌握使用微信小程序的导航及跳转组件一.基础内容组件 1.1 ...
微信小程序富文本编辑器editor初体验-图片上传
https://developers.weixin.qq.com/miniprogram/dev/component/editor.html 以前没有小程序富文本编辑器,只能输入文字,图片上传后,在服 ...

微信小程序富文本三种方法+0.1rich-text+0.2插件+0.3webview

官方的跟我们想要的有些不同

rich-text

微信小程序富文本三种方法+0.1rich-text+0.2插件+0.3webview相关推荐

最新文章

热门文章