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

野性酷女 2024-02-19 16:35 73阅读 0赞

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][https_edu.csdn.net_topic_huangjuhua]  
微信小程序支持富文本编辑器代码  
一：下载：[https://github.com/icindy/wxParse][https_github.com_icindy_wxParse]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70]

二：将wxParse文件夹粘贴到项目  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70 1]

三：引入文件  
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_c_p_show.asp_id_32]

改造给微信小程序的内容  
[http://gs.8895.org/m/wx\_api\_CpInfo.asp?id=32][http_gs.8895.org_m_wx_api_CpInfo.asp_id_32]

[欢迎大家学习我的视频课程：微信小程序WxParse解析富文本HTML代码视频课程][WxParse_HTML]  
[https://edu.csdn.net/course/detail/10311][WxParse_HTML]  
![微信小程序WxParse解析富文本（html）代码在线视频教程][WxParse_html]

[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[https_github.com_icindy_wxParse]: https://github.com/icindy/wxParse
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/730c344eb3f44eef8098763c4b9eb969.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/18927f57ba7549d0a8b730b9d127420a.png
[http_gs.8895.org_m_c_p_show.asp_id_32]: http://gs.8895.org/m/c_p_show.asp?id=32
[http_gs.8895.org_m_wx_api_CpInfo.asp_id_32]: http://gs.8895.org/m/wx_api_CpInfo.asp?id=32
[WxParse_HTML]: https://edu.csdn.net/course/detail/10311
[WxParse_html]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/cf69edcbf003458f99c957560231d9de.png