小程序 - 解析html - WxParse

wxParse-微信小程序富文本解析组件,支持Html及markdown转wxml可视化


test.wxml

<template is="wxParse" data="{{wxParseData:content.nodes}}"/>
<import src="../../wxParse/wxParse.wxml"/>

app.wxss

@import "/wxParse/wxParse.wxss";

test.js

var Api = require('../../utils/api.js');
var WxParse = require('../../wxParse/wxParse.js');
import config from '../../utils/config.js';
const app = getApp();
Page({
  data: {
    cid: 0,
    commentsNum: 0,
    created: 0,
    viewsNum: 0,
    title: 'title',
    text: 'content'
  },
  onLoad: function (options) {
    var that = this;
    var cid = options.cid;
    that.setData({
      cid: cid
    });
    that.getContent(cid);
  },
  getContent(cid) {
    var that = this;
    var url = config.getApiurl;
    wx.request({
      url: url + '/index/detail',
      data: {
        cid: cid
      },
      header: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      success: function (res) {
        var data = res.data[0];
        var commentsNum = data.commentsNum;
        var created = data.created;
        var title = data.title;
        var viewsNum = data.viewsNum;
        var text = data.text;
        that.setData({
          commentsNum: commentsNum,
          created: created,
          viewsNum: viewsNum,
          title: title,
          text: text
        });
        /**
          * WxParse.wxParse(bindName , type, data, target,imagePadding)
          * 1.bindName绑定的数据名(必填)
          * 2.type可以为html或者md(必填)
          * 3.data为传入的具体数据(必填)
          * 4.target为Page对象,一般为this(必填)
          * 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
          */
        WxParse.wxParse('content', 'html', text, that, 5);
      }
    });
  }
});

github

返回文章列表 打赏
本页链接的二维码
打赏二维码
期待你的评论