我们经常用到发布文章,用的是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,解决图片显示路径问题的更多相关文章

  1. 微信小程序开发——base64位图片显示问题

    前言: 目前小程序项目需要后端借口提供验证码图片,后端是以base64位返回的,按照H5的做法,前边拼上 data:image/png;base64, 应该就可以了,关键代码如下: H5: <i ...

  2. 微信小程序--canvas画布实现图片的编辑

    技术:微信小程序   概述 上传图片,编辑图片大小,添加文字,改变文字颜色等 详细 代码下载:http://www.demodashi.com/demo/14789.html 概述 微信小程序--ca ...

  3. 微信小程序:本地资源图片无法通过 WXSS 获取,可以使用网络图片或者 base64或者使用image标签

    微信小程序:本地资源图片无法通过 WXSS 获取,可以使用网络图片或者 base64或者使用image标签 一.问题 报错信息: VM696:2 pages/user/user.wxss 中的本地资源 ...

  4. 微信小程序 使用wxParse解析html

    微信小程序 加载 HTML 标签:https://blog.csdn.net/zclengendary/article/details/54312030 微信小程序 使用wxParse解析html:h ...

  5. 微信小程序开发过程中tabbar页面显示的相关问题及解决办法!

    在微信小程序的开发过程中如果有使用过tabbar的同学,我相信一定会遇到一些困扰.为什么有些时候代码中明明已经在app.json里面增加了tabbar,可以页面中就是不显示呢?可不可以有些页面显示ta ...

  6. (干货)微信小程序之上传图片和图片预览

    这几天一直负责做微信小程序这一块,也可以说是边做边学习吧,把自己做的微信小程序的一些功能分享出来,与大家探讨一下,相互学习相互进步. 先看下效果图 只写了一下效果样式的话希望大家不要太在意,下面马路杀 ...

  7. 微信小程序使用wxParse解析html

    最近项目上遇到在微信小程序里需要显示新闻内容,新闻内容是通过接口读取的服务器中的富文本内容,是html格式的,小程序默认是不支持html格式的内容显示的,那我们需要显示html内容的时候,就可以通过w ...

  8. 微信小程序使用wxParse实现接入富文本编辑

    简介 微信小程序中比如活动说明,简介这样的图文介绍说明页面,后台通常配置成富文本编辑框,由后台直接输入内容,然后在小程序界面展现. 但是富文本编辑提取到内容是html格式的,写法与小程序的wxml并不 ...

  9. 微信小程序开发之多图片上传+服务端接收

    前言: 业务需求,这次需要做一个小程序同时选中三张图片一起上传到服务端,后端使用的.NET WEBAPI接收数据保存. 使用技术: 在这章中将会使用到微信小程序wx.uploadFile(Object ...

随机推荐

  1. Drools规则引擎入门指南(三)——使用Docker部署Workbench

    其实本来我也是打算使用Tomcat来部署Workbench的,但是在网上看了几篇文章,超级繁琐的配置.各种版本.实在看不下去了索性就直接使用Docker来部署了.本次部署的版本是最新稳定版,对应dro ...

  2. mysql连接失败HikariPool错误

    1. mysql连接失败HikariPool错误 1.1. 异常 com.zaxxer.hikari.pool.HikariPool : HikariPool-1 - Exception during ...

  3. vs2017使用GitHub插件发布项目到github

    几乎每天都从博客园获取新知识,今天才发现我竟然没有博客园的账号,你说气人不.2008年10月就开始在CSDN上写记录,因为CSDN做记录还可以,但记录整个项目就有些捉襟见肘,后来就写Demo做备份到云 ...

  4. 【翻译】浏览器渲染Rendering那些事:repaint、reflow/relayout、restyle

    原文链接:http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/ 有没有被标题中的5个“R”吓到?今天,我们来讨论一下浏览器的渲 ...

  5. 谷歌浏览器中安装Axure扩展程序

    当使用谷歌浏览器预览Axure原型文件的时候,首次打开会出现以下界面: 我们按照图片中的步骤来即可,不过前提条件是翻.墙[我使用的是蓝灯,下载地址:https://github.com/getlant ...

  6. Java工程师修炼之路(从小白到BAT的两年学习历程)

    ​ 作者:陆小凤 文章首发于:微信公众号[程序员江湖] 前言 在下本是跨专业渣考研的985渣硕一枚,经历研究生两年的学习积累,有幸于2019秋季招聘中拿到几个公司的研发岗offer,包括百度,阿里,腾 ...

  7. java中fail-fast 和 fail-safe的区别

    java中fail-fast 和 fail-safe的区别   原文地址:http://javahungry.blogspot.com/2014/04/fail-fast-iterator-vs-fa ...

  8. leetcode — next-permutation

    import java.util.Arrays; /** * Source : https://oj.leetcode.com/problems/next-permutation/ * * Creat ...

  9. Spring mybatis源码篇章-MapperScannerConfigurer关联dao接口

    前言:Spring针对Mybatis的XML方式的加载MappedStatement,通过引入MapperScannerConfigurer扫描类来关联相应的dao接口以供Service层调用.承接前 ...

  10. 【Linux】基于VMware搭建Linux系统

    本篇文章侧重于操作,主要内容大致包括: 两大类操作系统简要介绍 VMware Workstation Pro 15简要介绍及安装 CentOS简要介绍及基于Wi'n'dows 操作系统的安装 一 关于 ...