解决小程序富文本显示视频问题

目录

1. 首先用小程序原生的 rich-text 肯定是不行的,它video的HTML节点和属性都不支持的

2. 采用安装插件的方法去处理(强烈推荐:mp-html,可用于多端)

3. 引入

4. 使用

5. 效果


1. 首先用小程序原生的 rich-text 肯定是不行的,它video的HTML节点和属性都不支持的

2. 采用安装插件的方法去处理(强烈推荐:mp-html,可用于多端

  • 安装:
# 通过 npm 获取
npm install mp-html
# 或通过 yarn 获取
yarn add mp-html
  • 需要升级时:
# 通过 npm 升级
npm update mp-html
# 或通过 yarn 升级
yarn upgrade mp-html
  • git 方式
# 通过 github 获取
git clone https://github.com/jin-yufeng/mp-html.git
# 或通过 gitee 获取
git clone https://gitee.com/jin-yufeng/mp-html.git

3. 引入

    1、本方法仅适用于微信、QQ 小程序

  • 在小程序项目根目录下通过 npm 安装组件包
  • 开发者工具中勾选 使用 npm 模块(若没有此选项则不需要)并点击 工具 - 构建 npm
  • 在需要使用页面的 json 文件中添加
{
  "usingComponents": {
    "mp-html": "mp-html"
  }
}

    2、源码引入  

  • 本方法适用于所有平台
  • 将 源码 中对应平台的代码包(dist/platform)拷贝到 components 目录下,更名为 mp-html
  • 在需要使用页面的 json 文件中添加
{
  "usingComponents": {
    "mp-html": "/components/mp-html/index"
  }
}

4. 使用

  •  在需要使用页面的 wxml 文件中添加
  • 在需要使用页面的 js 文件中添加 
Page({
  onLoad () {
    this.setData({
      html: '
Hello World!
' }) } })

 

// 记得用正则给视频添加宽度

let info = '后台返回的数据'
info = info.replace(/

5. 效果

 解决小程序富文本显示视频问题_第1张图片 

插件地址:小程序富文本组件小程序富文本组件https://jin-yufeng.gitee.io/mp-html/#/overview/quickstart

你可能感兴趣的:(小程序,富文本,rich-text,前端,微信小程序,rich-text)