微信小程序html格式转换详解

前言

在毕设的过程中，把项目迁移到小程序中，遇到了html格式的博客内容，在小程序中直接以标签的格式显示出来了，并没有进行标签格式的转换，因此记下该问题并解决。问题的截图如下:

解决步骤

1. 首先要先下载wxParse：官网的github地址为:[点击此处进行下载] https://github.com/icindy/wxParse)。并把下载后的文件解压到项目中，如下图,为我存放的位置。
   
2. 在app.wxss全局样式文件中，需要引入wxParse的样式表。

/app.wxss/
@import “/pages/wxParse/wxParse.wxss”;

3. 在需要加载html内容的页面对应的js文件里引入wxParse，比如我需要在单个博客详情中把html标签转化成小程序能识别的标签，我就在singleBlog.js中引。

var WxParse = require(’…/wxParse/wxParse.js’);

4. 通过调用WxParse.wxParse方法来设置html内容,以下为singleBlog.js中部分代码。请求地址，并且获得单个博客的详情信息。

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

  /**
   * 页面的初始数据
   */
  data: {
    singleBlog:{}
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log("options",options);
    wx.request({
      url: 'http://localhost:9200/blog/singleBlog/'+options.blogId,
      header: {
        'Content-Type': 'application/json'
      },
      success:res=>{
        console.log(res);
        this.setData({
          singleBlog:res.data.dataInfo
        })
        // 解析为
        // console.log("s",this.data.singleBlog);
        WxParse.wxParse('htmlContent', 'html', this.data.singleBlog.htmlContent, this,0);
      }
    })

  },

5. 在对应的wxml中就可以使用了，下面第一个为模板，第二个为在singleBlog.wxml的部分代码截图。其中data中的htmlContent为bindname，即第一个参数。

<import src="../../wxParse/wxParse.wxml"/>
<template is="wxParse" data="{{wxParseData:htmlContent.nodes}}"/>

效果如下图所示:

注意事项

1. 如果使用传统的方法，wx.request中的success的this指向并不是page，可以在前面把this用that存起来，或者把success改成箭头指向的方法。
2. 在js中获取data中数据的时候，用this.data.你定义的属性，这点和vue不一样，vue不用写data。设置属性的时候用this.setData({
   singleBlog:res.data.dataInfo
   })，这个和react挺像的。

---

没有人能预测未来，但总有人后悔当初。