title: bdparse header: develop nav: extended

sidebar: bdparse

本组件为开发者贡献组件，详情访问当前组件的git仓库原始地址。

解释： 智能小程序富文本解析工具bdParse，改造自wxparse，支持html转换成智能小程序富文本节点。

属性说明

属性名 类型 必填 默认值 说明
raw String 是 ‘’ 需要转换展现的原始内容
format String 否 ‘html’ 需要转换内容的原始格式，可选有：’html’, ‘markdown’
padding Number 否 5 渲然出来界面的左右留白(px为单位)

示例

在开发者工具中预览效果

扫码体验

sidebar: bdparse - 图1

图片示例

sidebar: bdparse - 图2

安装

  1. npm install @smt-lib/bdparse

代码示例

  • 在 swan 文件中
  1. <view class="card-area">
  2.     <view class="top-description border-bottom">原文</view>
  3.     <view class="text-content">{{raw}}</view>
  4. </view>
  6. <view class="card-area {{converted ? 'show': 'hide'}}">
  7.     <view class="top-description border-bottom">转换后的内容</view>
  8.     <view class="text-content">
  9.         <bdparse raw={{raw}} />
  10.     </view>
  11. </view>
  • 在 js 文件中
  1. Page({
  2.     data: {
  3.         raw:[
  4.             '<div>',
  5.             '<span>我是HTML代码</span>',
  6.             '<span>',
  7.             '内容',
  8.             '</span>',
  9.             '<img src="https://b.bdstatic.com/miniapp/images/demo-dog.png" class="custom-img" />',
  10.             '</div>'
  11.         ].join('\n')
  12.     }
  13. });
  • 在 css 文件中
  1. .custom-img {
  2.     width: 100% !important;
  3. }