消息关闭
    暂无新消息!
︿ 2

wxParse : 小程序靠它来解析html

Canham2017-08-07发布

一、首先将插件文件夹复制到项目里面


二、导入文件

首先在xx.wxml导入文件,在文件头写上:

 

然后再wxss导入文件,在文件头写上:

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

三、在页面xx.js里的onLoad()方法里面写上:

WxParse.wxParse('content', 'html', content, that,5)

此方法的含义为:

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


四、模板引用:

//这里data中article为bindName
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>


实战项目:

<--wxml文件-->
<import src="../../wxParse/wxParse.wxml" />

<view class="wxParse">

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

view>
//wxss文件

@import "../../wxParse/wxParse.wxss";
/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/*其他样式...*/
//js文件

Page({
  data: {

  },
  onLoad: function () {
    var that = this
    var WxParse = require('../../wxParse/wxParse.js');
    var result
    wx.request({
      url:  '请求数据的地址 将要返回html内容 可以是一个网页的代码',
      success: function (res) {
        console.log(res);
        that.setData({
          article_title: res.data,
          article_content: WxParse.wxParse('article_content', 'html', res.data, that, 5)
        })
      }
    })
    //request
  }
})

效果图:







浏览次数 : 2302
0 条评论

技术交流

  1. QQ群号码:264268059
  2. 关注订阅号(极客起源),每天分享精彩技术文章: