wxParse 問題總結 圖片不顯示+排版不顯示

最近項目遇到了 百度富文本內容顯示在微信小程序上的情景

用到了 wxPrase組件 在此記錄一下使用方法及遇到的問題和解決辦法

使用方法：

1.下載文件

https://github.com/icindy/wxParse 下載wxParse文件到小程序目錄中

2.引入文件

/*js*/
1 //在使用的頁面js中引入WxParse模塊
var WxParse = require('../../wxParse/wxParse.js');

/*wxss*/
//在使用的Wxss中引入WxParse.css,可以在app.wxss
@import "/wxParse/wxParse.wxss";

3.綁定數據及頁面引用

 /*js文件*/
 1 var data= '<div>我是HTML代碼</div>';
/**
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName綁定的數據名(必填)
* 2.type可以為html或者md(必填)
* 3.data為傳入的具體數據(必填)
* 4.target為Page對象,一般為this(必填)
* 5.imagePadding為當圖片自適應是左右的單一padding(默認為0,可選)
*/
var that = this;
WxParse.wxParse('article', 'html', data, that, 0);

這里注意 imagePadding 填0比較好 在外部盒子設置寬度 邊距 

例：

/* wxml */
<view style="width:94%；margin:0 auto">
    <import src="你的路徑/wxParse/wxParse.wxml"/>
    //這里data中article為bindName
    <template is="wxParse" data="{{wxParseData:data.nodes}}"/>
</view>    

更多使用方法 可以去github上查看

問題及解決方法：

1.富文本容易嵌套很多層，WxParse用以循環解析的模板有11層，如果只是簡單的百度富文本編輯器提交的內容是夠用的，但是如果加上復雜的樣式（如下），

 

就需要手動添加很多層，我暫時用了比較笨的方法手動加到了50層……

官方給的解決方案：https://github.com/icindy/wxParse/wiki/wxParse-%E5%A6%82%E4%BD%95%E9%87%8D%E5%A4%8D%E5%B5%8C%E5%A5%97%E6%A8%A1%E7%89%88

 

2.圖片路徑問題

直接用百度文本編輯的圖片不帶域名，而直接粘貼的圖文，圖片是帶着外部鏈接的。這里需要用wxs寫個函數處理一下

2.1圖片顯示

 <wxs src="./imgsrc.wxs" module="getImgSrc" />


<template name="wxParseImg">
  <image class="{{item.classStr}} wxParse-{{item.tag}}" data-from="{{item.from}}" data-src="{{getImgSrc.getImgSrc(item.attr.src)}}"
    data-idx="{{item.imgIndex}}" src="{{getImgSrc.getImgSrc(item.attr.src)}}" mode="aspectFit"
    bindload="wxParseImgLoad" bindtap="wxParseImgTap" mode="widthFix" style="width:{{item.width}}px;" />
</template>

 

var getImgSrc = function (src) {
  var a = getRegExp("http", "img");
  var b = a.test(src)
  if (b) {
    return src;
  } else {
    src = 'https://域名' + src
    return src;
  }
}

module.exports = {
  getImgSrc: getImgSrc
}

 

2.2圖片點擊事件

因為圖片路徑的問題，點擊事件中也需要改一下圖片路徑

// 圖片點擊事件
function wxParseImgTap(e) {
  var that = this;
  var nowImgUrl = e.target.dataset.src;
  var tagFrom = e.target.dataset.from;
  var imageUrls = [];
  that.data[tagFrom].imageUrls.forEach(function (item, index, arr) {
    if (item.indexOf('http') == 0) {
      imageUrls.push(item)
    } else {
      imageUrls.push('https://域名' + item)
    }
  })
  if (typeof (tagFrom) != 'undefined' && tagFrom.length > 0) {
    wx.previewImage({
      current: nowImgUrl, // 當前顯示圖片的http鏈接
      urls: imageUrls // 需要預覽的圖片http鏈接列表
    })
  }
}

 

改動代碼地址：https://gitee.com/svv2020/wx-parse.git

 

如果文章對您有幫助 歡迎打賞~