适用于 Mpvue 的微信小程序富文本解析自定义组件
废话不多说,直接上方法:
首先 npm 安装 mpvue-wxparse
npm i mpvue-wxparse
接下来:使用
<template>
<div>
<wxParse :content="article" @preview="preview" @navigate="navigate" />
</div>
</template> <script>
import wxParse from 'mpvue-wxparse' export default {
components: {
wxParse
},
data () {
return {
article: '<div>我是HTML代码</div>'
}
},
methods: {
preview(src, e) {
// do something
},
navigate(href, e) {
// do something
}
}
}
</script> <style>
@import url("~mpvue-wxparse/src/wxParse.css");
</style>
当然:article 里面的值我们可以动态加载
扩展学习地址:https://github.com/htzhanglong/mpvue-wxParse
适用于 Mpvue 的微信小程序富文本解析自定义组件的更多相关文章
- 微信小程序-富文本解析插件wxParse基础使用及问题解决
一.插件准备 在github上可以直接下载该插件:https://github.com/icindy/wxParse 二.基本使用 1.将插件导入项目: 将wxParse文件夹放在项目目录下,如图: ...
- [微信小程序] 微信小程序富文本-wxParse的使用
最近小程序蛮火的,公司要做于是学了一点点小程序 不知道你们有没有遇到过这种问题: 从公司服务器获取的文章内容是有HTML标签格式的一段内容,但是微信是不支持这些标签的,怎么办呢? 1.一般网站后台的文 ...
- 微信小程序学习笔记四 自定义组件
1. 自定义组件 类似Vue或react中的自定义组件 小程序允许我们使用自定义组件的方式来构建页面 1.1 创建自定义组件 类似于页面, 一个自定义组件由json wxml wxss js 4个文件 ...
- 微信小程序富文本渲染组件html2wxml及html2wxml代码块格式化在ios下字体过大问题
1.组件使用: 之前微信小程序的富文本渲染组件用的wxParse,对普通富文本确实可以,但是对于代码格式pre标签则无法使用. 下面这个html2wxml很不错,可以支持代码高亮. 详细文档:http ...
- [转]wxParse-微信小程序富文本解析组件
本文转自:https://github.com/icindy/wxParse 基本使用方法 Copy文件夹wxParse - wxParse/ -wxParse.js(必须存在) -html2json ...
- 微信小程序入坑之自定义组件
前言 最近接触微信小程序,再次之前公司用的前端框架是vue ,然后对比发现,开发小程序是各种限制,对于开发者非常不友好.各种槽点太多,完全吐槽不过来,所以在此不多说,打算下次专门写一篇文章吐槽一下.本 ...
- 微信小程序富文本中的图片大小超出屏幕
这个问题我在小程序社区中提的,后来有个帮我回答了这个问题,我试了一下可以. 解决办法是过滤富文本内容,给图片标签添加一个样式,限制图片的最大宽度. replace(/\<img/gi, '& ...
- 微信小程序各类型的自定义组件篇
由于本人最近在开发小程序项目,期间对小程序有花点时间去研究,同时也找了网上大牛的一些案例,在这里分享部分自定义组件,部分代码是copy大牛案例的,有对小程序有兴趣的伙伴拿走,不谢! 源码下载地址:ht ...
- 微信小程序 富文本插件 循环渲染方式
感谢GitHub https://github.com/icindy/wxParse/wiki/wxParse%E5%A4%9A%E6%95%B0%E6%8D%AE%E5%BE%AA%E7%8E%AF ...
随机推荐
- Kaggle 题目 nu-cs6220-assignment-1
Kaggle题目 nu-cs6220-assignment-1 题目地址如下: https://www.kaggle.com/c/nu-cs6220-assignment-1/overview 这是个 ...
- CSS样式命名
CSS样式命名 说明网页公共命名#wrapper 页面外围控制整体布局宽度#container或#content 容器,用于最外层#layout 布局#head, #heade ...
- 浅析Redis分布式锁---从自己实现到Redisson的实现
当我们在单机情况下,遇到并发问题,可以使用juc包下的lock锁,或者synchronized关键字来加锁.但是这俩都是JVM级别的锁,如果跨了JVM这两个锁就不能控制并发问题了,也就是说在分布式集群 ...
- Altium Designer 20下载与安装教程
目录 一.Altium Designer 20下载 二.Altium Designer 20安装 三.Altium Designer 20破解 四.Altium Designer 20汉化 作者:st ...
- Python下载各种功能包出问题
问题详情 点击之后出现 AttributeError: module 'importlib._bootstrap' has no attribute 'SourceFileLoader' 解决方法 c ...
- WEB应用之httpd基础入门(二)
前文我们聊了下httpd的一些基础设置,聊了下httpd的配置文件格式,长连接.mpm的配置以及访问控制基于文件路径和URL管控,回顾请参考https://www.cnblogs.com/qiuhom ...
- 【转】不怕难之BlockingQueue及其实现
1. 前言 BlockingQueue即阻塞队列,它是基于ReentrantLock,依据它的基本原理,我们可以实现Web中的长连接聊天功能,当然其最常用的还是用于实现生产者与消费者模式,大致如下图所 ...
- List集合概述和特点
List集合概述 有序集合(也称序列)用户可以精确控制列表的每一个元素的位置插入,用户可以通过整数索引访问元素,并搜索列表中的元素 与set集合不同,列表通常允许重复的元素 List集合的特点 有序: ...
- 嵌入式LCD闪烁--emWin使用内存设备避免闪烁
0.引子 近日在论坛看到有人说屏幕闪烁,问道怎么解决.在嵌入式gui使用方面,屏幕闪烁一般多出现在多个窗口层叠.多图层层叠.更新图层时.受限于接口速度,即使屏幕有很高的刷新率,也做不到无闪烁,所以要从 ...
- 为什么我推荐你用Ubuntu开发?
前言: 鱼哥在做多媒体开发时,领导倒逼我们用Ubuntu开发,后来才发现它的牛逼和高效.所以对于还在用Windows上开发的朋友,鱼哥建议,趁周末,搞个双系统,切到Ubuntu上开发, Ubuntu最 ...