zoukankan      html  css  js  c++  java
  • 微信小程序使用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,可选)
    */
  • 相关阅读:
    PAT 甲级 1115 Counting Nodes in a BST (30 分)
    PAT 甲级 1114 Family Property (25 分)
    PAT 甲级 1114 Family Property (25 分)
    Python Ethical Hacking
    Python Ethical Hacking
    Python Ethical Hacking
    Python Ethical Hacking
    Python Ethical Hacking
    Python Ethical Hacking
    Python Ethical Hacking
  • 原文地址:https://www.cnblogs.com/zxf100/p/10086575.html
Copyright © 2011-2022 走看看