小程序格式怎么转换,微信小程序格式化代码

文章目录 前言解决步骤注意事项

前言

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

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

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

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

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

通过调用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); } }) }, 在对应的wxml中就可以使用了，下面第一个为模板，第二个为在singleBlog.wxml的部分代码截图。其中data中的htmlContent为bindname，即第一个参数。 <import src="../../wxParse/wxParse.wxml"/><template is="wxParse" data="{{wxParseData:htmlContent.nodes}}"/>

效果如下图所示:

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

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