微信小程序/支付宝小程序 WxParse解析富文本（html）代码

时间：2024-04-17 21:28:45

小程序本身并不太支持html代码，比如html的img、span、p这个时候改这么办呢？需要用到一个小插件WxParse来实现。

小程序高级交流群：336925436

 微信小程序支持富文本编辑器代码

一：下载：https://github.com/icindy/wxParse

 

二：将wxParse文件夹粘贴到项目

 

三：引入文件

index.js文件中引入

var WxParse = require(\'../wxParse/wxParse.js\');

 

onLoad: function (e) {
    var article = \'<div>我是HTML代码<img src="http://image.chunshuitang.com/goods/401078.jpg"></img></div>\';
    WxParse.wxParse(\'article\', \'html\', article, that, 5);   // 实例化对象
    
  },

 

index.wxss 

@import "../wxParse/wxParse.wxss";

index.wxml

<import src="../wxParse/wxParse.wxml" />   // 引入文件
<view class="content {{tabArr.curBdIndex==\'0\'? \'active\' : \'\'}}"><template is="wxParse" data="{{wxParseData:article.nodes}}"></view>   // 这段放入需要显示的位置

 

 

拓展：在实际应用中wx.request和wxParse一起使用有可能会出现，ajax请求属于同步与异步的问题，解决办法如下

onLoad: function (e) {
    // 设置全局变量 商品id
    var that = this;
    that.gid = e.gid;
    
    // 获取详情
    that.requestGoodsInfo(that.gid);
    //console.log(that.data);

    //如果wxparse放这里，会出现数据为空（ajax异步这里是没有数据的）;
    //var article = \'<div>我是HTML代码<img src="http://image.chunshuitang.com/goods/401078.jpg"></img></div>\';
    //WxParse.wxParse(\'article\', \'html\', article, that, 5);
    
  }, 

  // swiper  幻灯片
  
  // 获取详情
  requestGoodsInfo:function(gid){
    var that = this;
    var goodsInfo = api.url.goodsInfo;
    //console.log(goodsInfo);
    wx.request({
      url: "https://api.xxx.com/goods/index",
      method:\'get\',
      data:{gid:gid},
      success:function(res){
        //console.log(res.data.data);
        if(res.data.code ==0){
          that.setData({
            goods: res.data.data
          })
　　　　　　// 这里是完美方案
          //var article = \'<div>我是HTML代码<img src="http://image.chunshuitang.com/goods/401078.jpg"></img></div>\';    // 这里是文字版
          var article = res.data.data.content;     // 这里是ajax请求数据
          WxParse.wxParse(\'article\', \'html\', article, that, 5);
        }else{
          wx.showLoading({
            title: \'数据出现故障\',
            duration: 1000,
          })
        }
      },
      fail:function(){
        wx.showLoading({
          title: \'网络出现故障\',
          duration: 1500
        })
      }
    })
  },

 

 

其它：

- wxParse/
  -wxParse.js(必须存在)
  -html2json.js(必须存在)
  -htmlparser.js(必须存在)
  -showdown.js(必须存在)
  -wxDiscode.js(必须存在)
  -wxParse.wxml(必须存在)
  -wxParse.wxss(必须存在)
  -emojis(可选)

 

小程序支持富文本编辑器代码

使用方法基本与微信小程序一样，有几个地方需要修改

1.文件引入样式：@import "/wxParse/wxParse.acss";

2.引入js：var WxParse= require(\'../../wxParse/wxParse.js\');

3.wxParse.wxml改名wxParse.axml,并且bindload（微信专用） 改为onLoad(支付宝专用)

<template name="wxParseImg">
  <image class="{{item.classStr}} wxParse-{{item.tag}}" data-from="{{item.from}}" data-src="{{item.attr.src}}" 
  data-idx="{{item.imgIndex}}" src="{{item.attr.src}}" onLoad="wxParseImgLoad" //此处要改
  bindtap="wxParseImgTap" mode="widthFix" style="width:{{item.width}}px;"/>
</template>

 

wxParse.axml改名wxParse.acss

4.wxParse.js 修改

// 微信小程序专用
/**
 * utils函数引入
 **/
import showdown from \'./showdown.js\';
import HtmlToJson from \'./html2json.js\';

// 支付宝小程序专用
import showdown from \'/wxParse/showdown.js\';
import HtmlToJson from \'/wxParse/html2json.js\';

5.html2json.js

// 微信小程序专用
var wxDiscode = require(\'./wxDiscode.js\');
var HTMLParser = require(\'./htmlparser.js\');
// 支付宝小程序专用
var wxDiscode = require(\'/wxParse/wxDiscode.js\');
var HTMLParser = require(\'/wxParse/htmlparser.js\');

 

总结：各种路径修改要正确

 

小程序高级交流群：336925436

 

相关文章