小程序富文本处理wxParse
最近项目资讯类的小程序,富文本处理成了难题,在百度上看了很多文章,都大同小异。一样原理,下边是记录。
先看效果图:(图片自动居中自适应哦!还可以预览~)
注意事项:方式名字前两字母是wx小写哦!!!看清楚,网上有的是大写。
2引入(我的放在根目录下了你们自己的随意,注意更改路径哦~)
代码:// pages/text/text.js
var WxParse = require('../../wxParse/wxParse.js');
Page({
/**
* 页面的初始数据
*/
data: {
art:'',
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var _this = this;
wx.request({
url: 'http://www.admin.test/api/test', //仅为示例,并非真实的接口地址
data: {
},
success(res) {
WxParse.wxParse('article', 'html', res.data.text, _this, 5);
_this.setData({
art:res.data.text
})
}
})
},
然后在wxml引入:
最后是wxss中引入:/* pages/text/text.wxss */
@import "../../wxParse/wxParse.wxss";
.article{
padding: 0 40rpx;
text-indent: 20rpx;
line-height: 46rpx;
font-size: 36rpx;
}
.article .wxParse-img{
display: flex;
}
效果图已经在最上边了! 如果有问题可以留言哦!
OK 小程序富文本就到这里了~~
小程序富文本处理wxParse