废话不多说,直接上方法:

首先 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 的微信小程序富文本解析自定义组件的更多相关文章

  1. 微信小程序-富文本解析插件wxParse基础使用及问题解决

    一.插件准备 在github上可以直接下载该插件:https://github.com/icindy/wxParse 二.基本使用 1.将插件导入项目: 将wxParse文件夹放在项目目录下,如图: ...

  2. [微信小程序] 微信小程序富文本-wxParse的使用

    最近小程序蛮火的,公司要做于是学了一点点小程序 不知道你们有没有遇到过这种问题: 从公司服务器获取的文章内容是有HTML标签格式的一段内容,但是微信是不支持这些标签的,怎么办呢? 1.一般网站后台的文 ...

  3. 微信小程序学习笔记四 自定义组件

    1. 自定义组件 类似Vue或react中的自定义组件 小程序允许我们使用自定义组件的方式来构建页面 1.1 创建自定义组件 类似于页面, 一个自定义组件由json wxml wxss js 4个文件 ...

  4. 微信小程序富文本渲染组件html2wxml及html2wxml代码块格式化在ios下字体过大问题

    1.组件使用: 之前微信小程序的富文本渲染组件用的wxParse,对普通富文本确实可以,但是对于代码格式pre标签则无法使用. 下面这个html2wxml很不错,可以支持代码高亮. 详细文档:http ...

  5. [转]wxParse-微信小程序富文本解析组件

    本文转自:https://github.com/icindy/wxParse 基本使用方法 Copy文件夹wxParse - wxParse/ -wxParse.js(必须存在) -html2json ...

  6. 微信小程序入坑之自定义组件

    前言 最近接触微信小程序,再次之前公司用的前端框架是vue ,然后对比发现,开发小程序是各种限制,对于开发者非常不友好.各种槽点太多,完全吐槽不过来,所以在此不多说,打算下次专门写一篇文章吐槽一下.本 ...

  7. 微信小程序富文本中的图片大小超出屏幕

    这个问题我在小程序社区中提的,后来有个帮我回答了这个问题,我试了一下可以. 解决办法是过滤富文本内容,给图片标签添加一个样式,限制图片的最大宽度. replace(/\<img/gi,   '& ...

  8. 微信小程序各类型的自定义组件篇

    由于本人最近在开发小程序项目,期间对小程序有花点时间去研究,同时也找了网上大牛的一些案例,在这里分享部分自定义组件,部分代码是copy大牛案例的,有对小程序有兴趣的伙伴拿走,不谢! 源码下载地址:ht ...

  9. 微信小程序 富文本插件 循环渲染方式

    感谢GitHub https://github.com/icindy/wxParse/wiki/wxParse%E5%A4%9A%E6%95%B0%E6%8D%AE%E5%BE%AA%E7%8E%AF ...

随机推荐

  1. Python操作系统

    一 为什么要有操作系统 (两本书:现代操作系统.操作系统原理,学好python以后再去研究吧~~) 现代的计算机系统主要是由一个或者多个处理器,主存,硬盘,键盘,鼠标,显示器,打印机,网络接口及其他输 ...

  2. 【Python】2.13学习笔记 数学函数和随机函数

    我死了,今天看课看过头了,忘了发作业,被典明批评 而且化学作业还是瞎搞的,直接就发了 我觉得我已经提前死亡了,现在不死亡,开学也会的 函数 挺容易的,有很多语言之间重合的部分 注意 在使用某些数学函数 ...

  3. Excel表格转Json数据结构

    Excel表格转Json数据结构 辗转了好几个项目,每个项目的导表工具都巨难用,速度慢,潜规则多,扩展性差,不易于调试.Sqlite,Json,Lua,Xml各种格式都用过. 举个例子: 大多数导表工 ...

  4. postman使用简介

    postman进行Http类型的接口测试的功能测试(手工测试): 1.postman下载,解压,打开Chrome浏览器-->设置-->扩展程序-->勾选开发者模式-->加载已解 ...

  5. Python-hashlib、OS、Random、sys、zipfile模块

    # print(sys.version) #python 版本 # print(sys.path) # print(sys.platform) #当前什么系统 # print(sys.argv) #当 ...

  6. c# winform 访问WebServices (通过Http方式)

    第一步.编写WebServices服务方法 [WebMethod] public void PostJson(string str, string bb) { Dictionary<string ...

  7. mysql存储过程简单用法

    show procedure status 查看所有存储过程 <!--  简单存储过程  --> 先将结束符改成// delimiter // create procedure query ...

  8. 第十周Java实验作业

    实验十  泛型程序设计技术 实验时间 2018-11-1 1.实验目的与要求 (1) 理解泛型概念: 泛型:也称参数化类型,就是在定义类,接口和方法时,通过类型参数只是将要处理的类型对象.(如Arra ...

  9. 自定义实现 PyQt5 下拉复选框 ComboCheckBox

    一.前言 由于最近的项目需要具有复选功能,但过多的复选框会影响界面布局和美观,因而想到把 PyQt5 的下拉列表和复选框结合起来,但在 PyQt5 中并没有这样的组件供我们使用,所以想要自己实现一个下 ...

  10. 题解 P1985 【[USACO07OPEN]翻转棋】

    讲讲我的做法 刚开始做这道题的时候,看到\(n<=15\),我这个\(6\)年级的蒟蒻的第1反应是状压\(dp\).貌似不好做.然而,等到我在省中集训的时候,老师的一席话,让我豁然开朗.今天我准 ...