微信小程序插件wxParse解析处理HTML代码

发布日期: 2017-10-23 21:18:19 作者: Stephen 评论: 0

由于微信小程序不支持HTML代码,但我们存在服务器中的文章内容的代码都是HTML的,当我们在微信小程序上,从服务器取出的HTML数据,又如何在小程序中显示呢?这需要一个插件wxParse。

使用方法:

1.下载wxParse插件:https://github.com/icindy/wxParse,下载后解压到小程序根目录。

2.在需要显示文章内容的wxml文件中引入wxParse.wxml

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

3.在wxml文件需要显示显示文章内容的地方加入以下代码

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

4.在wxss文件中引入wxParse.wxss样式文件

@import "/wxParse/wxParse.wxss";

5.js文件代码

var WxParse = require("../../wxParse/wxParse.js");//引入wxParse.js
Page({
    data: {
        blog: {},
        content: ''//文章内容
    },
    onLoad: function (options) {
        var blog = options.blog;//获取加载页面时传过来的参数
        var that = this;
        wx.request({
            url: 'weixin.html',
            method: 'POST',
            data: {
                blog: blog,
            },
            success: function (res) {
                that.setData({
                    blog: res.data,
                    content: WxParse.wxParse('content','html',res.data.content,that,0)//wxParse处理HTML代码
                })
            }
      })
  },

WxParse.wxParse()方法参数说明:

'content':绑定的数据名(必填)

'html':类型为HTML(必填)

res.data.content:需要处理的具体数据(必填)

that:page对象(必填)

0:当图片自适应是左右的单一padding(默认为0,可选)

快来抢沙发