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

小程序高级交流群：336925436

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

一：下载：

 

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

 

三：引入文件

index.js文件中引入

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

 

onLoad: function (e) {    var article = '
     
      我是HTML代码
      
     
';    WxParse.wxParse('article', 'html', article, that, 5);   // 实例化对象      },

 

index.wxss 

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

index.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 = '
     
      我是HTML代码
      
     
';    //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 = '
     
      我是HTML代码
      
     
';    // 这里是文字版          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(支付宝专用)

 

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