小程序(二十六)微信小程序解析富文本的几种方式

这篇具有很好参考价值的文章主要介绍了小程序(二十六)微信小程序解析富文本的几种方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

微信小程序解析富文本html大概有两种方式(我发现的)。

两种方法,各有各的优缺点。

一:使用小程序内置标签rich-text

这个标签解析的富文本会保留你在pc端编辑的样式,也就是说,你在pc端编辑的是什么样子,小程序端显示的也是什么样子。

示例:

Html

<view class="container">
  <view class="page-body">
    <view class="page-section">
      <view class="page-section-title">通过HTML String渲染</view>
      <view class="page-content">
        <scroll-view scroll-y>{{htmlSnip}}</scroll-view>
        <button style="margin: 30rpx 0" type="primary" bindtap="renderHtml">渲染HTML</button>
        <block wx:if="{{renderedByHtml}}">
          <rich-text nodes="{{htmlSnip}}"></rich-text>
        </block>
      </view>
    </view>
 
    <view class="page-section">
      <view class="page-section-title">通过节点渲染</view>
      <view class="page-content">
        <scroll-view scroll-y>{{nodeSnip}}</scroll-view>
        <button style="margin: 30rpx 0" type="primary" bindtap="renderNode">渲染Node</button>
        <block wx:if="{{renderedByNode}}">
          <rich-text nodes="{{nodes}}"></rich-text>
        </block>
      </view>
    </view>
  </view>
 
</view>

Javascript:

const htmlSnip =
`<div>
  <h1>Title</h1>
  <p>
    Life is&nbsp;<i>like</i>&nbsp;a box of
    <b>&nbsp;chocolates</b>.
  </p>
</div>
`
 
const nodeSnip =
`Page({
  data: {
    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: red;'
      },
      children: [{
        type: 'text',
        text: 'You never know what you're gonna get.'
      }]
    }]
  }
})
`
 
Page({
  onShareAppMessage() {
    return {
      title: 'rich-text',
      path: 'page/component/pages/rich-text/rich-text'
    }
  },
 
  data: {
    htmlSnip,
    nodeSnip,
    renderedByHtml: false,
    renderedByNode: false,
    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: #1AAD19;'
      },
      children: [{
        type: 'text',
        text: 'You never know what you\'re gonna get.'
      }]
    }]
  },
  renderHtml() {
    this.setData({
      renderedByHtml: true
    })
  },
  renderNode() {
    this.setData({
      renderedByNode: true
    })
  },
  enterCode(e) {
    console.log(e.detail.value)
    this.setData({
      htmlSnip: e.detail.value
    })
  }
})

上边这是微信小程序官方文档给出的示例,更多使用方法,请参照:

https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html

但是rich-text标签有一个问题就是,其无法解析video标签。

因此我就找了第二个解析富文本的方法。

二:使用wxParse插件解析html

wxParse的优点是可以解析video标签,但是他不会保留原有的样式。

这个相关的文件会在文末提供下载,所以别急,请慢慢看下去。

文件列表:

小程序(二十六)微信小程序解析富文本的几种方式

使用示例:

在html中引入:

<import src="../../../wxParse/wxParse.wxml" />

在javascript中引入:

var WxParse = require('../../../wxParse/html2json.js');

在css中引入:

@import "./wxParse/wxParse.wxss";

使用方法:

Javascript

// pages/about/about.js
 onLoad: function (options) {
const that = this; /*** WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName绑定的数据名(必填)
* 2.type可以为html或者md(必填)
* 3.data为传入的具体数据(必填)
* 4.target为Page对象,一般为this(必填)
* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)*/
var temp = WxParse.wxParse('article', 'html', data, that, 5);
},

Wxml:

<!--pages/about/about.wxml-->
<import src="../../wxParse/wxParse.wxml"/>
<view>
 <!-- 这一块是富文本 显示的内容区 -->
 <template is="wxParse" data="{{wxParseData:article.nodes}}"/>

以上大概就是微信小程序中两种解析富文本html的方法

有好的建议,请在下方输入你的评论。

欢迎访问个人博客
https://guanchao.site

欢迎访问小程序:

小程序(二十六)微信小程序解析富文本的几种方式文章来源地址https://www.toymoban.com/news/detail-499326.html

到了这里,关于小程序(二十六)微信小程序解析富文本的几种方式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序格式化日期的几种方式

    wxml 文件 2.JS文件 在 wxml 文件 引入 wxs 文件 2.wxs 文件 wxml 文件 在 JS 文件引入 util 文件 util 文件

    2024年02月08日
    浏览(52)
  • 微信小程序页面之间传参的几种方式

    目录 前言 第一种:url传值 url传值使用详细说明 api跳转 组件跳转 第二种:将值缓存在本地,再从本地取值 第三种:全局传值(应用实例传值) 第四种:组件传值 第五种:使用通信通道(通信通道是wx.navitageTo()独有的) 第六中:使用页面栈(只对当前页面栈中存在的页面生效

    2024年04月13日
    浏览(43)
  • 在微信小程序部署AI模型的几种方法

    本文只是分享思路,不提供可完整运行的项目代码 以目标检测类模型为例,该类模型会输出 类别信息 , 置信度 , 包含检测框的4个坐标信息 但不是所有的onnx模型都能在微信小程序部署,有些算子不支持,这种情况需要点特殊操作。 微信小程序提供的接口相当于使用onnxr

    2024年04月27日
    浏览(59)
  • 微信小程序返回上级页面传参的几种方法

    在做微信小程序跳转页面,经常会遇到二级页面要返回上级页面,并且需要携带参数,wx.navigateTo()跳转大家都知道直接在url上面拼接参数,之后再二级页面onLoad(options)里获取,但是返回页面wx.navigateBack()不可以那样做,所以就可以用以下几种方式来做,具体看个人业务适合用

    2024年02月08日
    浏览(76)
  • 微信小程序中(设置成背景图的几种方式)

    1、使用网络图片 2、使用base64格式图片,访问图片base64编码  将背景图片使用编码base64进行转换, 网址如下: base64图片在线转换工具 - 站长工具 3、使用标签    注意有小朋友可能要用html那一套,使用background-image不适用于微信小程序 background-image: url(\\\"../images/local_image.png\\\")

    2024年04月25日
    浏览(33)
  • 微信小程序--data的赋值与取值的几种方式

    赋值一定需要注意。需要setData的使用,这样页面才刷新,数据才会改变,并且分清that和this的使用 Page() 函数用来注册一个页面。接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。其中的参数data用来设置初始数据,WXML 中的动态数据均来自对应

    2024年02月11日
    浏览(43)
  • 微信小程序wxss定位/选择/查找元素的几种方式

    wxss定位、选择、查找元素的几种方式与css类似,下面介绍常用的几种: 选择器 样例 样例描述 .class .intro 选择所有拥有 class=\\\"intro\\\" 的组件

    2024年01月16日
    浏览(53)
  • 微信小程序和H5之间相互跳转的几种情况

    直接通过web-view内嵌的方式,有且只有这一种方式。 H5内嵌在小程序的web-view中,想要打开小程序自身的页面,可通过 wx.miniProgram.navigateTo 方法,参考链接:web-view | 微信开放文档 (qq.com) H5在非小程序环境中,微信浏览器或者手机自带浏览器打开时,想要跳转到小程序,可通过

    2024年02月11日
    浏览(47)
  • 微信小程序中,将一张图设置成背景图的几种方式

    三种方法实现 1、使用网络图片 2、使用base64格式图片,访问图片base64编码  将背景图片使用编码base64进行转换, 网址如下: base64图片在线转换工具 - 站长工具 3、使用标签 注意有小朋友可能要用html那一套,使用background-image不适用于微信小程序 background-image: url(\\\"../images/loc

    2024年02月11日
    浏览(59)
  • 微信小程序 - 解析富文本插件版们

    https://gitee.com/qwqoffice/html2wxml 插件版本解析服务是由 QwqOffice 完成,存在不稳定因素,如对稳定性有很高的要求,请自行搭建解析服务,或在自家服务器上直接完成解析。对于有关插件版本不能使用/不能解析的提问,不作任何回答。 参考 小程序富文本解析 https://github.com/ici

    2024年02月14日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包