小程序rich-text对富文本支持方案

William_Sang 发布于2019-08-29 17:21 / 3002人阅读

摘要：小程序富文本解析目前小程序使用比较多的富文本方案一个是小程序自带的组件，一个是。使用方法文殊林舍山房由丽江铂尔曼度假酒店余明金老师设计，是丽江古城的网红民宿，年被评为全国家最美民宿，以及年最值得睡的张床。

小程序富文本解析

目前小程序使用比较多的富文本方案一个是小程序自带的rich-text组件，一个是wxPrase。

wxPrase原理是把原有的html标签全部解析成小程序的组件，这样无论事件可控以及扩展性都是比较好的，但是对于行内渲染和多重渲染方面表现不是很好。

微信自带的rich-text组件刚好补足了wxPrase行内渲染和多重渲染方面表现方面的缺点，但是对于一些自定义的标签支持度不高并且会屏蔽元素所有事件，虽然支持直接解析html字符串，但是性能没有直接绑定json串好。

官网给的rich-text演示demo:

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

rich-text-parser是一个能将html字符串转成rich-text组件可以解析的json格式，并且可以自定义扩展标签，并且支持修改rich-text组件内部html样式（包括img标签）。

使用方法：

npm i rich-text-parser -S --production

import parser from "rich-text-parser"

Page({
  data: {
        html: `文殊林舍、山房由丽江铂尔曼度假酒店余明金老师设计，是丽江古城的网红民宿，2017年被评为全国100家“最美民宿”，以及2017年最值得睡的“365张床”。
    

    两家店均位于古城北门坡半山处，背倚青山，可俯瞰古城全景。
    

    文殊·林舍2间房、文殊·山房6间房，共8间房。有可看丽江古城全景的景观房，有落满阳光的大床房，有花园院景的复式房...
    

    房间按照五星级标准配套，科勒卫浴、鹅绒被、品牌乳胶床垫、高端洗漱用品等，提供免费洗衣机、烘干机、自助厨房等配套服务。
    

    每个房间距离适中，为所有入住房客营造更私密舒适的空间体验感！另房东可以提供一对一的管家服务，接受所有房客吃喝玩乐咨询以及打折的各种便利活动！
    

    
        
            丽江文殊设计师网红民宿大床房
        
    
    
        
            丽江文殊设计师网红民宿大床房
        
    
    
        
            丽江文殊设计师网红双床房
        
    
    
        
            丽江文殊设计师网红大床房（可观古城全景）
            
        
    
    
        
            丽江文殊设计师网红大床房（可观古城全景）
            
        
    
    
        
            丽江文殊设计师网红复式星空房（可观古城全景）
            
        
    
    
        
            丽江文殊设计师网红民宿别墅东院
        
    
    
        
            餐厅
        
    
    
        
            公共区域
        
    
    
        
            公共区域
        
    
    
        
            公共区域-露台
        
    
    
        
            丽江文殊设计师网红民宿汤池别墅西院
        
    
    
        
            丽江文殊设计师网红民宿别墅东院
        
    
    

    门店信息：
    ·wifi已覆盖、24小时热水、吹风机、一次性用品
    ·电热毯、壁炉、一对一管家服务等
    

    商家联系电话：
    ·地址：云南省丽江市古城区北门坡玄天巷26号
    ·电话：15099128722`,
    html2: []
  },
  onLoad () {
      const {html} = this.data
      // 定义需要解析的特殊标签，value不填默认是div
      parser.definedCustomTag({figure: "div", figcaption: ""})
      const nodes = parser.getRichTextJson(html)
      console.log(nodes)
      this.setData({
        html2: nodes.children
      })
    }
})

源码参见rich-text-parser

效果图以及数据结构：

GPU云服务器云服务器小程序webrtc支持小程序支持webrtc 小程序支持webrtc吗微信小程序支持webrtc

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114267.html

小程序rich-text对富文本支持方案

摘要：小程序富文本解析目前小程序使用比较多的富文本方案一个是小程序自带的组件，一个是。使用方法文殊林舍山房由丽江铂尔曼度假酒店余明金老师设计，是丽江古城的网红民宿，年被评为全国家最美民宿，以及年最值得睡的张床。小程序富文本解析目前小程序使用比较多的富文本方案一个是小程序自带的rich-text组件，一个是wxPrase。 wxPrase原理是把原有的html标签全部解析成小程序的组件，这...

keelii 2019-08-26 13:25 评论0 收藏0
富文本解析-微信小程序 rich-text 组件

摘要：微信小程序富文本解析器微信小程序在组件后开始支持富文本解析，但需要对照一套自定义规则的数据格式，返回的富文本需要前端做数据转换。微信小程序富文本解析器微信小程序在rich-text组件后开始支持富文本解析，但需要对照一套自定义规则的 JOSN 数据格式，API 返回的富文本需要前端做数据转换。这个主要是用于某些需要 API 直接输出富文本的地方。比如后端输出title字段, 但 ...

renweihub 2019-08-23 11:31 评论0 收藏0
微信小程序Markdown渲染组件wemark

摘要：可以实现在小程序下渲染内容，支持图片表格在内的大部分特性。运行效果其他项目地址小程序推荐百科知识词典 wemark可以实现在小程序下渲染Markdown内容，支持图片、表格在内的大部分Markdown特性。特性以小程序自定义组件形式提供，可直接引入使用支持大部分markdown标记的解析、渲染支持代码表格、代码高亮、HTML视频等特性支持使用原生rich-text进行渲染 ...

ctriptech 2019-08-23 12:28 评论0 收藏0
小程序-心理学辞典应用开发的心得

摘要：小程序心理学辞典应用开发的心得前言最近学习小程序，用了五天工作之余从开始，到一个简单的完成，有点心得，记录下来。数据库方面，小程序最近推出云开发的服务，这东西类似，这些后端云服务，而且这些第三方的服务对微信支持的也不错。小程序-心理学辞典应用开发的心得前言最近学习小程序，用了五天工作之余从0开始，到一个简单的App完成，有点心得，记录下来。想法最近在学习算法动态规划那部分，有...

cnTomato 2019-08-23 12:22 评论0 收藏0
做完小程序项目、老板给我加了6k薪资～

摘要：大家好，我是平头哥联盟的首席填坑官苏南，今天要给大家分享的是最近公司做的一个小程序项目，过程中的一些好的总结和遇到的坑，希望能给其他攻城狮带来些许便利，更希望能做完之后老板给你加薪今天是中秋节的第一天，假日的清晨莫名的醒的特别早，不知道为什 showImg(https://segmentfault.com/img/bVbhAYf?w=1278&h=722); 　　大家好，我是@IT·平...

z2xy 2019-08-26 12:20 评论0 收藏0