zoukankan      html  css  js  c++  java
  • 微信小程序显示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]去将数组传入

  • 相关阅读:
    sql&nbsp;一些语法&nbsp;聚合函数,…
    SQL标准
    margin:auto 和margin:0 auto的区别
    div居中
    相对问题和绝对问题
    有三行文字,每行最多80个字符,求其中大写字母,小写字母,数字,空格和其他
    输入n个字符串,将以A打头的字符串输出
    判断一个字符串是否是回文字符串
    从键盘键入5个国家的名字,按字典序输出
    输入五个字符串,输出最长的字符串
  • 原文地址:https://www.cnblogs.com/goloving/p/10513322.html
Copyright © 2011-2022 走看看