微信小程序html格式转换详解javascriptqq41346335的博客-

前言

在毕设的过程中，把项目迁移到小程序中，遇到了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: 'https://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挺像的。

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