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

Petrochor

发布于 2022-06-07 15:24:20

1.3K0

发布于 2022-06-07 15:24:20

文章被收录于专栏：StephenStephen

由于微信小程序不支持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,可选)

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2017-10-23 ，如有侵权请联系 cloudcommunity@tencent.com 删除

html