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,可选)
    */
  • 相关阅读:
    iOS 上传appstore 一直卡在正在通过 App Store 进行鉴定(转)
    MySQL连接超时处理
    Windows上安装运行Spark
    NSQ端口关系以及注意事项
    C++ http服务
    C++ OpenSSL 之一:编译和使用
    C++ OpenSSL 之二:生成RSA文件
    C++ OpenSSL 之三:生成CSR文件
    C++ OpenSSL 之四:CER转换为PEM
    C++ OpenSSL 之五:生成P12文件
  • 原文地址:https://www.cnblogs.com/zxf100/p/10086575.html
Copyright © 2011-2022 走看看