怎样将后端返回的html代码解析成微信小程序的代码呢？

后端有时候返回的数据是如下的：

<div>啦啦啦啦啦啦啦啦<h2>哦哦哦哦哦哦</h2></div>

但是，微信小程序里面使用的是<view>标签的，不支持html标签，这就需要转换下，那么下面就介绍一个解析html的插件wxParse。

解析html代码（将html代码解析成 微信小程序的标签）

（1-1）找到github上的地址： https://github.com/icindy/wxParse，按照步骤一步一步即可完成。

（1-2）下载demo

（1-3）把wxParse目录放进项目文件夹里面的根目录

（1-4）引入 .js 

在要用到的.js里面引入  waParse         var WxParse = require( ' ../../ wxParse / wxParse.js ' );

（1-5）在.wxss引入

在我们用到的.wxss里面引入或者全局引入：  @import "/wxParse/wxParse.wxss";

（1-6）在.wxml 里面引入模板： 

<import src = " 路径/wxParse/wxParse.wxml">
//这里data中article为bindName
<template is = ' wxParse '  data="{{wxParseData:article.nodes}}"></template>

（1-7）

// 解析html
var article = '<h2>我是html格式的</h2>';
var that = this;
WxParse.wxParse('article','html',article,that,5);

/**
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName绑定的数据名(必填)
* 2.type可以为html或者md(必填)
* 3.data为传入的具体数据(必填)
* 4.target为Page对象,一般为this(必填)
* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
*/

栗子：步骤（1）（2）（3）

（1）details.js文件

//引入wxParse.js文件
var WxParse = require('../../wxParse/wxParse.js');
Page({

  data: {
    list:[],
    host:'http://abc.com/'            // 此域名是错误的
  },
  onLoad: function (options) {
    // 获取上个页面的传值
    console.log(options);
    this.requestData();
  },
  requestData(){
    var api = 'http://abc.com/api/productcontent?id=5ac1a22011f48140d0002955';
    var that = this;
    wx.request({
      url: api,
      data: {},
      header: {
        'content-type': 'application/json' // 默认值
      },
      success(res) {
        var result = res.data.result[0];
        res.data.result[0].img_url = res.data.result[0].img_url.replace(/\\/g,'/');
        var article = result.content;        //带有html的
        WxParse.wxParse('article','html',article,that,5);
        that.setData({
          list: result
        })
      }
    })
  }
})


步骤：
(1)引入wxParse.js文件
(2) var article = '<h2>我是带有HTML标签的</h2>';        //带有html的
      var that = this; 
      WxParse.wxParse('article','html',article,that,5);

（2）app.wxss文件

/* 引入wxParse.wxss文件 */
@import './wxParse/wxParse.wxss';

（3）details.wxml

<!--pages/details/details.wxml-->
<!-- 引入wxParse.wxml -->
<import src="../../wxParse/wxParse.wxml" />
<text>food详情页面</text>
<view>
   <view>{{list.catename}}</view>
   <image src="{{host}}{{list.img_url}}"></image>
   
   <!-- 引入模板 -->
   <view>
        <template is='wxParse' data="{{wxParseData:article.nodes}}"/>
   </view>
</view> 


步骤：
(1)引入wxParse.wxml文件
(2)引入模板
   这里data中article为bindName
    <template is='wxParse' data="{{wxParseData:article.nodes}}"/>

解析前和解析后的结果图如下：

（解析前）

（解析后）