• 微信小程序显示html格式内容(wxParse使用及循环解析数据渲染)


      小程序默认是不支持html格式的内容显示的,那我们需要显示html内容的时候,就可以通过wxParse来实现。

      首先我们下载wxParse,github地址:https://github.com/icindy/wxParse

    1、下载完之后我们需要用到目录下的wxParse文件夹,把他拷贝到我们的项目目录下(与pages同级目录)

    2、然后,在app.wxss全局样式文件中,需要引入wxParse的样式表

    @import "wxParse/wxParse.wxss";

    3、在需要加载html内容的页面对应的js文件里引入wxParse

    const WxParse = require('../../wxParse/wxParse.js');

      通过调用WxParse.wxParse方法来设置html内容

      WxParse.wxParse(bindName , type, data, target,imagePadding)
      1、bindName绑定的数据名(必填)
      2、type可以为html或者md(必填)
      3、data为传入的具体数据(必填)
      4、target为Page对象,一般为this(必填)
      5、imagePadding为当图片自适应时左右的单一padding(默认为0,可选)
    // 获取问题详情
      getIssueDetail (id) {
        var that = this
        app.ajaxGet('dbask/detail/' + id, {}, res => {
          this.setData({
            issue: res.data
          })
          if (that.data.issue.description) {
            WxParse.wxParse('issue.description', 'html', that.data.issue.description, that);
          }
          var _data = that.data.issue.askItems
          var _len = _data.length
          for (var i = 0; i < _len; i++) {
            WxParse.wxParse('comment' + i, 'html', _data[i].comment, that);
            if (i === _len - 1) {
              WxParse.wxParseTemArray("askItemsArr", 'comment', _data.length, that)
            }
          }
          wx.hideLoading()
        })
      },

    4、最后,在页面中引用模板

    <import src="../../wxParse/wxParse.wxml"/>
    
    <view class='issue_content'>
        <template is="wxParse" data="{{wxParseData:issue.description.nodes}}"/>
    </view>

      注意循环使用的时候,引用模板

    <view class='issue_content'>
      <template is="wxParse" data="{{wxParseData:askItemsArr[index]}}"/>
    </view>

      注意wxParse解析数组数据时,按照文档上的方法进行操作

          var _data = that.data.issue.askItems
          var _len = _data.length
          for (var i = 0; i < _len; i++) {
            WxParse.wxParse('comment' + i, 'html', _data[i].comment, that);
            if (i === _len - 1) {
              WxParse.wxParseTemArray("askItemsArr", 'comment', _data.length, that)
            }
          }

      这个时候我们会发现askItemsArr里只有comment的数据,其他数组都消失了。

      那么在渲染数组时,我们就通过askItemsArr[index]去将数组传入

  • 相关阅读:
    [转]tensorflow提示:No module named ''tensorflow.python.eager"
    mac使用pip3安装tensorflow(不用conda)
    不限速、没广告的迅雷(旧版迅雷)
    python从国内镜像安装第三方库
    Jupyter 安装并配置工作路径[转]
    VS2013只显示会附加到进程,无法启动调试
    电脑磁盘空间占用高于文件夹大小
    Latex基础
    C#/.Net 部分缩写
    texstudio设置外部浏览器及右侧预览不能使用问题
  • 原文地址:https://www.cnblogs.com/goloving/p/10513322.html
Copyright © 2020-2023  润新知