小程序富文本处理wxParse

小程序富文本处理wxParse

最近项目资讯类的小程序,富文本处理成了难题,在百度上看了很多文章,都大同小异。一样原理,下边是记录。

先看效果图:(图片自动居中自适应哦!还可以预览~)

image.png

image.png


注意事项:方式名字前两字母是wx小写哦!!!看清楚,网上有的是大写。

1下载wxParse

2引入(我的放在根目录下了你们自己的随意,注意更改路径哦~)

image.png

代码:

// 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引入:

<!--pages/text/text.wxml-->
<import src="../../wxParse/wxParse.wxml"/>

<view class="article">
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>
</view>

最后是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

喜欢(2)

评论 抢沙发

表情