适用于 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 ...
随机推荐
- 浅析js中的堆和栈
这里先说两个概念:1.堆(heap)2.栈(stack)堆 是堆内存的简称.栈 是栈内存的简称.说到堆栈,我们讲的就是内存的使用和分配了,没有寄存器的事,也没有硬盘的事.各种语言在处理堆栈的原理上都大 ...
- Flask 请求中间件、错误处理、标签、过滤器、CBV
目录 一.请求中间件 二.请求中间件额外方法(重写源码) 三.请求错误处理 四.请求标签.过滤器 五.CBV写法 基础版 常用版 一.请求中间件 中间件: 1 before_first_request ...
- can do / will do / should do 情态动词
can do = be able to do will do = be going to do should do = ought to do 情态动词 都是表示建议 从这里发现 to do (不确定 ...
- watch 同步表单 记得$nextTick,否则不会同步更新到组件内
watch 同步表单 记得$nextTick,否则不会同步更新到组件内 watch: { 'formData.aaa' (val) { this.$nextTick(() => { this.f ...
- props watch 接口抖动
readType (val) { this.innerReadType = '-' this.$nextTick(() => { this.innerReadType = val }) },
- 学习webpack基础笔记01
学习webpack基础笔记 1.webpack搭建环境最重要的就是如何使用loader和plugins,使用yarn/npm安装插件.预处理器,正确的配置好去使用 2.从0配置webpack - 1. ...
- Elasticsearch系列---多字段搜索
概要 本篇介绍一下multi_match的best_fields.most_fields和cross_fields三种语法的场景和简单示例. 最佳字段 bool查询采取"more-match ...
- SQL常见错误总结
目录 语法错误 标点错漏 重命名 数据拼接 null值 逻辑顺序 函数错误 参数的数量 参数的格式 逻辑错误 数据重复 无效筛选 标签重叠 时间错位 SQL是数据分析中最高频的操作之一,本文梳理常见的 ...
- Integration of Metabolomics and Transcriptomics To Reveal Metabolic Characteristics and Key Targets Associated with Cisplatin Resistance in Nonsmall Cell Lung Cancer(解读人:林山云)
期刊名:J. Proteome Res 发表时间:(2019年8月) IF:3.78 单位: 上海第九人民医院药学系,上海交通大学药学院 上海交通大学药物与生物化学系 物种:人源A549细胞系 技 ...
- Python-String字符串操作
name='xioer-pipo' print(name.capitalize()) #第一个字符大写 print(name.expandtabs()) print(name.count('o')) ...