在线咨询
微信咨询
服务热线
服务热线:15639912513
TOP
当前位置:
首页 > 新闻中心> 前端设计>如何在微信小程序中显示html格式内容

如何在微信小程序中显示html格式内容

发布时间:2019-08-20 浏览:3984次

在进行微信小程序定制开发的时候,遇到了微信小程序不能显示html格式内容。于是到网上搜了下教程,进行多番尝试,发现只能参考,于是有了下面的流程:

1、下载wxParse

github地址: https://github.com/icindy/wxParse

2、下载完之后我们需要用到目录下的wxParse文件夹,把他拷贝到我们的项目目录下

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

@import "wxParse/wxParse.wxss";

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

let 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,可选)

*/

  getcontent: function (id){

    var that = this

    wx.request({

      url: 'https://www.xhhkj.cn/api/Index/article',

      data: {

        id

      },

      success: function (res) {

        that.setData({ 

          article: res.data,

          content: res.data['content']

        })

        wxparse.wxParse('content', 'html', that.data.content, that, 5)

      }

    })

    

  }

5、在页面中引用模板

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

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

1.jpg

TAG
3984
该内容对我有帮助