微信小程序不使用插件,渲染富文本中的视频,图片自适应,plus版本

本文讲述了如何在微信小程序中处理原生rich-text不支持的视频渲染问题,通过字符串操作和匹配,实现图片自适应,并针对特定的百度富文本编辑器生成的格式处理视频嵌入。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

小程序原生的rich-text不支持渲染视频,所以需要处理后显示,主要用了字符串切割以及匹配
富文本图片自适应的问题
当我们从后端拿到富文本数据时,我们利用replace方法去修改图片的样式,保证图片与手机宽度保持一致

//richtext为富文本
let content = richtext.replace(/<img/gi, '<img style="max-width:100%;height:auto"')   //图片自适应

如果富文本出现莫名的空白区域,可能是富文本中包含有换行标签,我们就将
标签替换掉

//richtext为后端传过来的富文本
dealRichText(richtext) {
	let content = richtext.replace(/<img/gi, '<img style="max-width:100%;height:auto"').replace(/<br\/>/g, '');
	return content;
}

渲染视频
网上也有不少方法,但是我的富文本是用百度富文本编辑器生成的,有些复杂,是这样的:

<p>
    随便的文字
</p>
<p>
    <img src="https://weiqing.kuxia.top/uploads/20220720/0fa5869614f227c88c7c89737836814c.png" title="" alt=""/>
</p>
<p>
    <video class="edui-upload-video vjs-default-skin video-js" controls="" preload="none" width="420" height="280" src="https://xxx.xxx.top/uploads/20220720/888a8ab9fdafa65bca08375fb4f6fb1f.mp4" data-setup="{}">
        <source src="https://xxx.xxx.top/uploads/20220720/888a8ab9fdafa65bca08375fb4f6fb1f.mp4" type="video/mp4"/>
    </video>
    <video class="edui-upload-video vjs-default-skin video-js" controls="" preload="none" width="420" height="280" src="https://xxx.xxx.top/uploads/20220720/888a8ab9fdafa65bca08375fb4f6fb1f.m
微信小程序中实现Vue.js的组件,特别是像Element UI中的`el-table`这样的表格,你可以通过以下几个步骤完成: 1. **引入Vue及Element UI**: 首先,你需要在微信小程序项目中安装Vue的轻量版本Weex-VueJS,以及Element UI的小程序适配包`miniprogram-element-ui`。参考官方文档进行安装: ```bash npm install weexpack@latest weex-vue-renderer @element-plus/core mini-program-element-ui ``` 2. **配置Weex Vue Render**: 在`app.json`中添加对Vue渲染的支持: ```json { "framework": { "runtimeVersion": "1.0.0", "compilerVersion": "1.0.0" }, ... } ``` 3. **Vue实例化**: 在小程序的入口文件(如`index.js`或`pages/index/index.js`)中创建Vue实例,并挂载到全局: ```javascript var app = Weex.createApp({ template: '<div><el-table :data="tableData" /></div>', components: { 'el-table': require('@mini-program-element-ui/el-table') }, data() { return { tableData: ... // 初始化表格数据 }; }, methods: {} }); app.start(); ``` 4. **定义`el-table`组件**: 在Vue实例中定义你的表格组件,传入数据和配置选项: ```javascript data() { return { tableData: [ { name: 'Row 1', age: '22' }, { name: 'Row 2', age: '25' }, ... ], elTableConfig: { // 元素表头配置 columns: [ { prop: 'name', label: '姓名' }, { prop: 'age', label: '年龄' } ] } }; }, mounted() { this.$refs.elTable.render(); } ``` 5. **HTML模板**: 创建对应的`index.wxml`文件,引用Vue的`<template>`标签: ```html <template> <view class="container"> <el-table ref="elTable" :config="elTableConfig" :data="tableData" /> </view> </template> ``` **相关问题--:** 1. 如何动态更新`el-table`的内容? 2. 如何设置分页功能? 3. `el-table`的列宽自适应是如何实现的?
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值