微信小程序使用wxParse,解决图片显示路径问题
我们经常用到发布文章,用的是UEditor百度富文本编辑器,方便排版,存储的也是html代码,这样小程序解析出来的也是排版的样式,但是使用wxParse解析html的时候,因为存储的是图片的相对路径,所有在小程序解析的时候图片不显示,网上搜了好多,说当时图片的时候在解析出来的图片相对路径前面加上域名,这样也挺麻烦的,没到图片的地方都要判断一下,所有我找了个简单粗暴的方法,直接改wxParse的代码,只需要改这一个地方就可以了。


另外附上小程序 wxParse的使用方法
小程序 转换富文本编辑器的方法 先到github下载一个库 https://github.com/icindy/wxParse 包含文件夹
-wxParse
--wxParse.js(必须存在)
--html2json.js(必须存在)
--htmlparser.js(必须存在)
--showdown.js(必须存在)
--wxDiscode.js(必须存在)
--wxParse.wxml(必须存在)
--wxParse.wxss(必须存在)
--emojis(表情文件,可选) 在页面引入js和css文件
在使用的View中引入Wxparse模块
var WxParse = require('../wxParse/wxParse.js');括号里放入你的路径
在使用的Wxss中引入WxParse.css,可以在app.wxss
@import "./wxParse/wxParse.wxss"; 引号内放入你的路径 接下来 我们需要显示的wxss页面上加 template标签 (就是要显示wxml页面)
<import src="../../wxParse/wxParse.wxml"/> <view class="wxParse"> <text>{{title}}</text> <template is="wxParse" data="{{wxParseData:res.data.content.nodes}}"/> //这里data中res.data.content 为bindName
</view> .js文件
页面顶部引入文件
var WxParse = require('../wxParse/wxParse.js'); 在监听页面onload写入
let that = this
在返回成功位置(success)写入
var temp = WxParse.wxParse('res.data.content', 'html', res.data.content, that, 5);
that.setData({
msg:temp
}) * WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName绑定的数据名(必填)
* 2.type可以为html或者md(必填)
* 3.data为传入的具体数据(必填)
* 4.target为Page对象,一般为this(必填)
* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
*/
微信小程序使用wxParse,解决图片显示路径问题的更多相关文章
- 微信小程序开发——base64位图片显示问题
前言: 目前小程序项目需要后端借口提供验证码图片,后端是以base64位返回的,按照H5的做法,前边拼上 data:image/png;base64, 应该就可以了,关键代码如下: H5: <i ...
- 微信小程序--canvas画布实现图片的编辑
技术:微信小程序 概述 上传图片,编辑图片大小,添加文字,改变文字颜色等 详细 代码下载:http://www.demodashi.com/demo/14789.html 概述 微信小程序--ca ...
- 微信小程序:本地资源图片无法通过 WXSS 获取,可以使用网络图片或者 base64或者使用image标签
微信小程序:本地资源图片无法通过 WXSS 获取,可以使用网络图片或者 base64或者使用image标签 一.问题 报错信息: VM696:2 pages/user/user.wxss 中的本地资源 ...
- 微信小程序 使用wxParse解析html
微信小程序 加载 HTML 标签:https://blog.csdn.net/zclengendary/article/details/54312030 微信小程序 使用wxParse解析html:h ...
- 微信小程序开发过程中tabbar页面显示的相关问题及解决办法!
在微信小程序的开发过程中如果有使用过tabbar的同学,我相信一定会遇到一些困扰.为什么有些时候代码中明明已经在app.json里面增加了tabbar,可以页面中就是不显示呢?可不可以有些页面显示ta ...
- (干货)微信小程序之上传图片和图片预览
这几天一直负责做微信小程序这一块,也可以说是边做边学习吧,把自己做的微信小程序的一些功能分享出来,与大家探讨一下,相互学习相互进步. 先看下效果图 只写了一下效果样式的话希望大家不要太在意,下面马路杀 ...
- 微信小程序使用wxParse解析html
最近项目上遇到在微信小程序里需要显示新闻内容,新闻内容是通过接口读取的服务器中的富文本内容,是html格式的,小程序默认是不支持html格式的内容显示的,那我们需要显示html内容的时候,就可以通过w ...
- 微信小程序使用wxParse实现接入富文本编辑
简介 微信小程序中比如活动说明,简介这样的图文介绍说明页面,后台通常配置成富文本编辑框,由后台直接输入内容,然后在小程序界面展现. 但是富文本编辑提取到内容是html格式的,写法与小程序的wxml并不 ...
- 微信小程序开发之多图片上传+服务端接收
前言: 业务需求,这次需要做一个小程序同时选中三张图片一起上传到服务端,后端使用的.NET WEBAPI接收数据保存. 使用技术: 在这章中将会使用到微信小程序wx.uploadFile(Object ...
随机推荐
- 从PMP培训归来,跟大家聊聊做项目的套路
管理也是一些套路的传承,很多人说不去学专门的管理,照样把工作做得很好.是的,不是散打乱打就不能赢,只是会吃点亏而已.如果你有了套路在心中,那么必定会让自己车到山前开路,让事情更好办. 所以,我去学了几 ...
- 大数据基础Hadoop 2.x入门
hadoop概述 存储和分析网络数据 三大组件 MapReduce 对海量数据的处理 思想: 分而治之 每个数据集进行逻辑业务处理map 合并统计数据结果reduce HDFS 储存海量数据 分布式存 ...
- ubuntu 16.04 清空log文件的方法
由于ubuntu日志文件syslog 和 kern.log 时刻在增长,一会儿就使得根目录文件夹不够用了,需使用如下命令清理 sudo -i 然后输入密码,执行: echo > /var/log ...
- Scala - 快速学习08 - 函数式编程:高阶函数
函数式编程的崛起 函数式编程中的“值不可变性”避免了对公共的可变状态进行同步访问控制的复杂问题,能够较好满足分布式并行编程的需求,适应大数据时代的到来. 函数是第一等公民 可以作为实参传递给另外一个函 ...
- ionic2 基于ngx-translate实现多语言切换,翻译
介绍 ngx-translate 是Angular 2+的国际化(i18n)库,在github的地址是箭头 https://github.com/ngx-translate/core 将ngx-tra ...
- 《C++ Primer Plus 第6版》学习笔记
第三章.基本数据类型 整形 short:至少16位 int:至少与short一样长 long:至少32位,且至少与int一样长 long long:至少64位,且至少与long一样长 字符类型 cha ...
- 【Objective-C】内存管理
涉及三大知识点:引用计数器,属性参数,自动释放池 一.引用计数器(程序编译时Xcode可以自动给你的代码添加内存释放代码,如果编写手动释放代码Xcode会报错) 1.关闭ARC(xcode 4.x之后 ...
- 为hexo博客添加基于gitment评论功能
关于gitment gitment其实就是利用你的代码仓库的Issues,来实现评论.每一篇文章对应该代码仓库中的 一个Issues,Issues中的评论对应你的博客每篇文章中的评论.如果你是用git ...
- Hadoop学习笔记(二):简单操作
1. 启动namenode和datanode,在master上输入命令hdsf dfsadmin -report查看整个集群的运行情况(记得关闭防火墙) 2. 输入命令查看hadoop监听的端口,ne ...
- Spring Boot 系列 - WebSocket 简单使用
在实现消息推送的项目中往往需要WebSocket,以下简单讲解在Spring boot 中使用 WebSocket. 1.pom.xml 中引入 spring-boot-starter-websock ...