微信小程序--解析富文本编辑器HTML

谁践踏了优雅 2022-03-09 15:36 430阅读 0赞

1. index.wxss 中引入wxParse.wxss文件

  1. @import "../wxParse/wxParse.wxss";

2. index.wxml页面 中引入wxParse.wxml文件

  1. <import src="../wxParse/wxParse.wxml" />

3. index.js页面 中引入wxParse.js文件

  1. var WxParse = require('../wxParse/wxParse.js');

内容解析:

  1. wx.request({
  2. url: 'https://xxxx/detail',
  3. headers: {
  4. 'Content-Type': 'application/json'
  5. },
  6. method: 'GET',
  7. success: function (res) {
  8. var article = res.data.result.data;
  9. WxParse.wxParse('article', 'html', article, that, 20);
  10. }
  11. })
  12. 参数说明
  13. WxParse.wxParse(输入需要解析的内容, 解析类型, 输出变量值, that, 边距(默认为0));

4. index.wxml页面中输出

  1. <view class="container">
  2. <template is="wxParse" data="{
  3. {wxParseData:article.nodes}}" />
  4. </view>

注意:如果有输出图片的时候,会遇到图片不居中,解决方法如下

  1. //在wxss中加入
  2. image{
  3. width: 100% !important;
  4. }

发表评论

表情:
评论列表 (有 0 条评论,430人围观)

还没有评论,来说两句吧...

相关阅读