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

谁践踏了优雅 2022-03-09 15:36 447阅读 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.     })
  13. 参数说明
  14. 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 条评论，447人围观）

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

相关阅读