微信小程序WxParse解析富文本（html）代码在线视频教程

版权声明：黄菊华 https://blog.csdn.net/u013818205/article/details/86622233

微信小程序支持富文本编辑器代码
一：下载：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);
  }, 
  
  // 获取详情
  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
        })
      }
    })
  },

H5/WebApp页面内容
http://gs.8895.org/m/c_p_show.asp?id=32

改造给微信小程序的内容
http://gs.8895.org/m/wx_api_CpInfo.asp?id=32

欢迎大家学习我的视频课程：微信小程序WxParse解析富文本HTML代码视频课程
https://edu.csdn.net/course/detail/10311