JiroZhang博客

关于小程序页面不解析html的结局方法

     相信做小程序接口的伙伴们都会遇到这个问题,,小程序没有内置解析html的功能,导致接口的数据显示得比较怪异,所以就上网找了前辈们的解决方法。感觉很实用,,就记录下来。

       

    第一步:

    首先我们下载wxParse

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


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


    下面是具体的使用步骤

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

    ?

    1
    @import "/page/wxParse/wxParse.wxss";

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

    ?

    1
    var WxParse = require('../../wxParse/wxParse.js');

    3、通过调用WxParse.wxParse方法来设置html内容

    ?

    1
    2
    3
    4
    5
    6
    7
    8
    /**
    * WxParse.wxParse(bindName , type, data, target,imagePadding)
    * 1.bindName绑定的数据名(必填)
    * 2.type可以为html或者md(必填)
    * 3.data为传入的具体数据(必填)
    * 4.target为Page对象,一般为this(必填)
    * 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
    */

    ?

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    Page({
     data: {
     },
     onLoad: function () {
     var that = this;
     wx.request({
     url: '',
     method: 'POST',
     data: {
     'id':13
     },
     header: {
     'content-type''application/json'
     },
     success: function(res) {
     var article = res.data[0].post;
     WxParse.wxParse('article''html', article, that,5);
     }
     })
     }
    })

    4、在页面中引用模板

    ?

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


    注意    

     以上内容均来自www.jb51.net。 并非博主本人原创 


赞 (0) 打赏

评论