适用于 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 ...
随机推荐
- JVM02——JVM运行时内存
在上一篇文章中,我们介绍了 JVM 的内存区域,本文我们将继续围绕 JVM 展开话题,介绍 JVM 运行时内存.关注我的公众号「Java面典」了解更多 Java 相关知识点. Java 堆从 GC 的 ...
- C++ 按行读取文件并打印
#include<iostream> #include<fstream> #include<string> #include <vector> #inc ...
- throttle工具函数
// fn是我们需要包装的事件回调, delay是时间间隔的阈值 export function throttle(fn, delay) { // last为上一次触发回调的时间, timer是定时器 ...
- java实现QQ、微信、轰炸机,撩妹,抖图功能,轻松自如
今天交大家一个很牛的功能,让你朋友服你,他不扶你你来找我. 打游戏被骂,骂不过你来找我,我们有神器,直到他怕了为止. 废话少说,代码如下,动手,干就完了 乞丐版如下 参考连接:Java实现QQ微信轰炸 ...
- Maven+JSP+Servlet+JDBC+Mysql实现的dbExper宾馆管理系统
本文存在视频版本,请知悉 项目简介 项目来源于:https://github.com/mafulong/databaseExper-hotelMaster 这次分享的也是毕设或课程设计选择一样很多的宾 ...
- no parameterless constructor define for type 解决一例
在生成根据模型和上下文生成带增删查改操作的视图的控制器时,提示上述信息,网上查找了资料也没有解决,突然想起该项目是连接MSSQL数据库和Redis数据库的,并且已经依赖注入了,而Redis数据库的服务 ...
- 直径问题 Diameter Problems
2019-11-03 21:37:59 一.Diameter of Binary Tree 问题描述: 问题求解: 解法一.第一反应是树上动归,每个节点保存一下左右的最大深度,最后以每个节点作为中枢计 ...
- 「面试指南」JS数组Array常用算法,Array算法的一般解答思路
先看一道面试题 在 LeetCode 中有这么一道简单的数组算法题: // 给定一个整数数组 nums 和一个目标值 target, // 请你在该数组中找出和为目标值的那两个整数,并返回他们的数组下 ...
- 强化学习之四:基于策略的Agents (Policy-based Agents)
本文是对Arthur Juliani在Medium平台发布的强化学习系列教程的个人中文翻译,该翻译是基于个人分享知识的目的进行的,欢迎交流!(This article is my personal t ...
- Data Management and Data Management Tools
Data Management ObjectivesBy the end o this module, you should understand the fundamentals of data m ...