Convert Figma logo to code with AI

jin-yufeng logomp-html

小程序富文本组件，支持渲染和编辑 html，支持在微信、QQ、百度、支付宝、头条和 uni-app 平台使用

3,264
479
3,264
35
View on GitHubView on NPM

Top Related Projects

dcloudio's avatar

uni-app

39,886

A cross-platform framework using Vue.js

Tencent's avatar

vConsole

16,806

A lightweight, extendable front-end developer tool for mobile web page.

NervJS's avatar

taro

35,461

开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/

didi's avatar

chameleon

9,015

🦎 一套代码运行多端，一端所见即多端所见

Quick Overview

mp-html is a powerful and flexible HTML parser for mini-programs and mobile apps. It supports rendering rich text content, including custom components and styles, across various platforms such as WeChat, Alipay, and Vue.js applications.

Pros

  • Cross-platform compatibility (WeChat, Alipay, QQ, Baidu, Toutiao, uni-app, etc.)
  • Extensive customization options for tags, styles, and components
  • High performance with virtual DOM and lazy-loading
  • Active development and community support

Cons

  • Learning curve for advanced customizations
  • Limited support for some complex HTML structures
  • May require additional configuration for certain platforms
  • Documentation primarily in Chinese, which may be challenging for non-Chinese speakers

Code Examples

  1. Basic usage in a WeChat mini-program:
<mp-html content="{{htmlContent}}" />
  1. Customizing styles:
<mp-html content="{{htmlContent}}" tag-style="{{tagStyle}}" />

Page({
  data: {
    htmlContent: '<div class="custom">Hello, World!</div>',
    tagStyle: {
      div: 'color: red; font-size: 18px;'
    }
  }
})
  1. Adding custom components:
<mp-html content="{{htmlContent}}" use-custom-components="{{true}}" />

Component({
  properties: {
    nodes: {
      type: Array,
      value: []
    }
  },
  methods: {
    tap() {
      console.log('Custom component tapped')
    }
  }
})

Getting Started

  1. Install the package:

    npm install mp-html

  2. Import and use in your mini-program:

    // In your page.json
{
  "usingComponents": {
    "mp-html": "mp-html"
  }
}

// In your page.wxml
<mp-html content="{{htmlContent}}" />

// In your page.js
Page({
  data: {
    htmlContent: '<h1>Hello, mp-html!</h1>'
  }
})

  3. For more advanced usage and customization, refer to the official documentation.

Competitor Comparisons

dcloudio logo

uni-app

39,886

A cross-platform framework using Vue.js

Pros of uni-app

  • Comprehensive cross-platform development framework for multiple platforms (iOS, Android, Web, etc.)
  • Large ecosystem with extensive plugins and components
  • Supports Vue.js, providing a familiar development experience for Vue developers

Cons of uni-app

  • Steeper learning curve due to its extensive feature set
  • May have performance overhead for simpler projects
  • Larger bundle size compared to more focused solutions

Code Comparison

mp-html (HTML parsing and rendering):

<mp-html content="{{htmlContent}}" />

uni-app (Vue component):

<template>
  <view>
    <text>{{ message }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, uni-app!'
    }
  }
}
</script>

mp-html is specifically designed for HTML parsing and rendering in mini-programs, while uni-app is a full-fledged cross-platform development framework. mp-html offers a simpler, more focused solution for HTML rendering, whereas uni-app provides a comprehensive toolset for building entire applications across multiple platforms. The choice between the two depends on the project's scope and requirements.

Tencent logo

vConsole

16,806

A lightweight, extendable front-end developer tool for mobile web page.

Pros of vConsole

  • More comprehensive debugging tool with network, storage, and element inspection features
  • Designed specifically for mobile web debugging, offering a better mobile-oriented experience
  • Larger community and more frequent updates, backed by Tencent

Cons of vConsole

  • Focused solely on debugging, not offering HTML rendering capabilities
  • Heavier in terms of file size and resource usage compared to mp-html
  • May require more setup and configuration for basic usage

Code Comparison

mp-html (HTML rendering):

<mp-html content="<div>Hello, World!</div>" />

vConsole (Debugging initialization):

import VConsole from 'vconsole';
const vConsole = new VConsole();
// vConsole is now initialized

Summary

While mp-html is primarily an HTML renderer for mini-programs, vConsole is a comprehensive debugging tool for mobile web development. vConsole offers more extensive debugging features but lacks HTML rendering capabilities. mp-html is lighter and more focused on its specific task of HTML rendering. The choice between the two depends on the primary need: debugging (vConsole) or HTML rendering (mp-html).

NervJS logo

taro

35,461

开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/

Pros of Taro

  • Cross-platform development: Supports multiple platforms including WeChat Mini Program, H5, React Native
  • Large ecosystem: Extensive plugin system and community support
  • Familiar React-like syntax: Easier adoption for React developers

Cons of Taro

  • Steeper learning curve: More complex setup and configuration
  • Larger bundle size: May impact performance on resource-constrained devices
  • Potential compatibility issues: Some native features may require platform-specific code

Code Comparison

mp-html (WeChat Mini Program):

<mp-html content="{{htmlContent}}" />

Taro (React-like syntax):

import { RichText } from '@tarojs/components'

function MyComponent() {
  return <RichText nodes={htmlContent} />
}

Key Differences

  • mp-html is specifically designed for WeChat Mini Programs, while Taro aims for cross-platform development
  • mp-html focuses on HTML rendering, whereas Taro provides a complete framework for building applications
  • Taro offers more flexibility and features but comes with increased complexity compared to mp-html's simplicity
didi logo

chameleon

9,015

🦎 一套代码运行多端，一端所见即多端所见

Pros of Chameleon

  • Cross-platform development framework supporting multiple platforms (Web, WeChat Mini Program, Alipay Mini Program, Baidu Smart Program, etc.)
  • Unified development experience with a single codebase for multiple platforms
  • Rich ecosystem with built-in UI components and plugins

Cons of Chameleon

  • Steeper learning curve due to its comprehensive nature and custom syntax
  • Less focused on specific HTML rendering capabilities
  • May introduce overhead for simpler projects that don't require cross-platform support

Code Comparison

mp-html (HTML rendering in Mini Programs):

<mp-html content="{{htmlContent}}" />

Chameleon (Cross-platform component):

<template>
  <view>
    <text>{{ message }}</text>
  </view>
</template>

Key Differences

  • mp-html focuses specifically on HTML rendering in Mini Programs, while Chameleon is a full-fledged cross-platform development framework
  • mp-html provides a simpler API for rendering HTML content, whereas Chameleon offers a more comprehensive set of tools for building entire applications
  • Chameleon requires developers to use its custom syntax and components, while mp-html works with standard HTML content

Use Cases

  • Choose mp-html for projects that primarily need HTML rendering capabilities in Mini Programs
  • Opt for Chameleon when developing complex applications targeting multiple platforms from a single codebase

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

mp-html

一个强大的小程序富文本组件

star forks npm downloads Coverage Status license JavaScript Style Guide

功能介绍

  • 支持在多个主流的小程序平台和 uni-app 中使用
  • 支持丰富的标签（包括 table、video、svg 等）
  • 支持丰富的事件效果（自动预览图片、链接处理等）
  • 支持设置占位图（加载中、出错时、预览时）
  • 支持锚点跳转、长按复制等丰富功能
  • 支持大部分 html 实体
  • 丰富的插件（关键词搜索、内容编辑、latex 公式等）
  • 效率高、容错性强且轻量化（≈25KB，9KB gzipped）

查看 功能介绍 了解更多

使用方法

原生平台

  • npm 方式

    1. 在项目目录下安装组件包

      npm install mp-html

    2. 开发者工具中勾选 使用 npm 模块（若没有此选项则不需要）并点击 工具 - 构建 npm

    3. 在需要使用页面的 json 文件中添加

      {
  "usingComponents": {
    "mp-html": "mp-html"
  }
}

    4. 在需要使用页面的 wxml 文件中添加

      <mp-html content="{{html}}" />

    5. 在需要使用页面的 js 文件中添加

      Page({
  onLoad () {
    this.setData({
      html: '<div>Hello World!</div>'
    })
  }
})
  • 源码方式

    1. 将源码中对应平台的代码包（dist/platform）拷贝到 components 目录下，更名为 mp-html

    2. 在需要使用页面的 json 文件中添加

      {
  "usingComponents": {
    "mp-html": "/components/mp-html/index"
  }
}
    后续步骤同上

查看 快速开始 了解更多

uni-app

  • 源码方式

    1. 将源码中 dist/uni-app 内的内容拷贝到项目根目录下
      可以直接通过 插件市场 引入

    2. 在需要使用页面的 vue 文件中添加

      <template>
  <view>
    <mp-html :content="html" />
  </view>
</template>
<script>
  import mpHtml from '@/components/mp-html/mp-html'
  export default {
    // HBuilderX 2.5.5+ 可以通过 easycom 自动引入
    components: {
      mpHtml
    },
    data () {
      return {
        html: '<div>Hello World!</div>'
      }
    }
  }
</script>

  • npm 方式

    1. 在项目目录下安装组件包

      npm install mp-html

    2. 在需要使用页面的 vue 文件中添加

      <template>
  <view>
    <mp-html :content="html" />
  </view>
</template>
<script>
  import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'
  export default {
    // 不可省略
    components: {
      mpHtml
    },
    data () {
      return {
        html: '<div>Hello World!</div>'
      }
    }
  }
</script>

    使用 cli 方式运行的项目，通过 npm 方式引入时，需要在 vue.config.js 中配置 transpileDependencies，详情可见 #330
    如果在 nvue 中使用还要将 dist/uni-app/static 目录下的内容拷贝到项目的 static 目录下，否则无法运行

查看 快速开始 了解更多

组件属性

属性类型默认值说明
container-styleString容器的样式（2.1.0+）
contentString用于渲染的 html 字符串
copy-linkBooleantrue是否允许外部链接被点击时自动复制
domainString主域名（用于链接拼接）
error-imgString图片出错时的占位图链接
lazy-loadBooleanfalse是否开启图片懒加载
loading-imgString图片加载过程中的占位图链接
pause-videoBooleantrue是否在播放一个视频时自动暂停其他视频
preview-imgBooleantrue是否允许图片被点击时自动预览
scroll-tableBooleanfalse是否给每个表格添加一个滚动层使其能单独横向滚动
selectableBooleanfalse是否开启文本长按复制
set-titleBooleantrue是否将 title 标签的内容设置到页面标题
show-img-menuBooleantrue是否允许图片被长按时显示菜单
tag-styleObject设置标签的默认样式
use-anchorBooleanfalse是否使用锚点链接

查看 属性 了解更多

组件事件

名称触发时机
loaddom 树加载完毕时
ready图片加载完毕时
error发生渲染错误时
imgtap图片被点击时
linktap链接被点击时

查看 事件 了解更多

api

组件实例上提供了一些 api 方法可供调用

名称作用
in将锚点跳转的范围限定在一个 scroll-view 内
navigateTo锚点跳转
getText获取文本内容
getRect获取富文本内容的位置和大小
setContent设置富文本内容
imgList获取所有图片的数组
pauseMedia暂停播放音视频（2.2.2+）
setPlaybackRate设置音视频播放速率（2.4.0+）

查看 api 了解更多

插件扩展

除基本功能外，本组件还提供了丰富的扩展，可按照需要选用

名称作用
audio音乐播放器
editable富文本编辑
emoji解析 emoji
highlight代码块高亮显示
markdown渲染 markdown
search关键词搜索
style匹配 style 标签中的样式
txv-video使用腾讯视频
img-cache图片缓存 by @PentaTea
latex渲染 latex 公式 by @Zeng-J
card卡片展示 by @whoooami

查看 插件 了解更多

使用案例

官方示例欢喜商城多么生活食法查微慕古典文学名著阅读
富文本插件欢喜商城多么生活食法查微慕古典文学名著阅读
科学复习程序员技术之旅典典博客优秀笔记365 刷题同城共享书
科学复习程序员技术之旅典典博客优秀笔记365刷题同城共享书
技术源 share你的代码写的真棒谛否小莫唐尼模版演示AI瓦力
技术源share你的代码写的真棒谛否小莫唐尼MiniProgram模版演示AI瓦力

以上排名不分先后，更多可见 使用案例收集（欢迎添加）

许可与支持

  • 许可
    您可以免费的使用（包括商用）、复制或修改本组件 MIT License
    在用于生产环境前务必经过充分测试，由插件 bug 带来的损失概不负责（可以自行修改源码）

  • 联系
    欢迎加入 QQ 交流群：
    群1（已满）：699734691
    群2（已满）：778239129
    群3：960265313
    group

  • 支持
    支持

更新日志

  • v2.5.0 (20240422)

    1. U play 事件增加返回 src 等信息 详细
    2. U preview-img 属性支持设置为 all 开启 base64 图片预览 详细
    3. U editable 插件增加简易模式（点击文字直接编辑）
    4. U latex 插件支持块级公式 详细
    5. F 修复了表格部分情况下背景丢失的问题 详细
    6. F 修复了部分 svg 无法显示的问题 详细
    7. F 修复了 uni-app 包 h5 和 app 端部分情况下样式无法识别的问题 详细
    8. F 修复了 latex 插件部分情况下显示不正确的问题 详细
    9. F 修复了 editable 插件表格无法删除的问题
    10. F 修复了 editable 插件 uni-app 包 vue3 h5 端点击图片报错的问题
    11. F 修复了 editable 插件 uni-app 包点击表格没有菜单栏的问题

  • v2.4.3 (20240121)

    1. A 增加 card 插件 详细 by @whoooami
    2. F 修复了 svg 中包含 foreignobject 可能不显示的问题 详细
    3. F 修复了合并单元格的表格部分情况下显示不正确的问题 详细
    4. F 修复了 img 标签设置 object-fit 无效的问题 详细
    5. F 修复了 latex 插件公式会换行的问题 详细
    6. F 修复了 uni-app 包 editable 和 audio 插件共用时点击 audio 无法编辑的问题 详细 by @whoooami
    7. F 修复了支付宝小程序设置了宽高的图片可能显示不正常的问题 详细
    8. F 修复了 uni-app 包微信小程序部分情况下图片会报错 replace of undefined 的问题
    9. F 修复了 uni-app 包快手小程序图片不显示的问题 详细

    从 1.x 的升级方法可见 更新指南

查看 更新日志 了解更多

NPM DownloadsLast 30 Days