登录/注册

QQ

微博

首页 文章 【微信小程序开发教程】富文本插件wxParse的使用

【微信小程序开发教程】富文本插件wxParse的使用

文章来源:http://xcx.9.cn/

微信小程序小程序开发

2017-07-13

2663

昨天一位网友问我小程序怎么解析富文本。他尝试过把html转出小程序的组件,但是还是不成功,我说可以把内容剥离出来。但是这两种方法都是不行了。后来找到了wxParse-微信小程序富文本解析组件


特性



Copy文件夹wxParse 基本使用方法

- wxParse/

  -wxParse.js(必须存在)

  -html2json.js(必须存在)

  -htmlparser.js(必须存在)

  -showdown.js(必须存在)

  -wxDiscode.js(必须存在)

  -wxParse.wxml(必须存在)

  -wxParse.wxss(必须存在)

  -emojis(可选)



引入必要文件

//在使用的View中引入WxParse模块

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



//在使用的Wxss中引入WxParse.css,可以在app.wxss

@import "/wxParse/wxParse.wxss";



数据绑定

var article = '


我是HTML代码

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


模版引用

// 引入模板

<import src="你的路径/wxParse/wxParse.wxml"/>

//这里dataarticlebindName

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



注意点

在上面的基本使用里面在.js文件和.wxml文件里面出现的article这个是两个文件里面是一样的。但是articlejs文件里面的一个变量是可以变的,只要保证js文件和wxml文件里面变量名一致即可。


实例

实例结构

page页面是测试页面。


wxml文件

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

<view class="container">


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

view>



wxss文件

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


js文件

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

data: {

  article: '<div style="text-align:center;">《静夜思》· 李白<br />床前明月光,<br />疑是地上霜。 <br />举头望明月, <br />低头思故乡。<br /><img src="http://www.xiexingcun.com/Poetry/6/images/53e.jpg" alt="" /><br /><img src="http://www.xiexingcun.com/Poetry/6/images/53.jpg" alt="" /><br /><br /><img src="http://www.xiexingcun.com/Poetry/6/images/53b.jpg" alt="" /><br />div>',

},

/**

生命周期函数--监听页面加载

*/

onLoad: function (options) {

 var that = this;

 var temp = WxParse.wxParse('article', 'html', that.data.article, that, 5);

 that.setData({

   article: temp

 })

},



效果图


总结

这里使用这个插件并不难。但是需要主要data里面的那个变量article(这个名字是可变)在几个位置是一样的。需要看看小程序-template

第九程序公众号二维码

评论

关注我们 发布

发布小程序

文章投稿

提交

下载

手机访问

扫一扫体验小程序

Copyright © 2017 9.cn 微信小程序商店 闽ICP备13017663号-12 厦门云游数码科技有限公司 版权所有

扫一扫关注我们

手机访问