欢迎光临,了解微信小程序开发,就上易用通!

小程序开发填坑《十七》微信小程序富文本解析自定义组件,支持HTML及markdown解

发布:2018-01-25 11:04浏览: 来源:网络 作者:tianshu

小程序开发填坑《十七》微信小程序富文本解析自定义组件,支持HTML及markdown解(图1) 

源码下载:https://pan.baidu.com/s/1pNdvkfh
 



基本使用方法
  • 1. Copy文件夹wxParse
  1. - wxParse/
  2.   -wxParse.js(必须存在)
  3.   -html2json.js(必须存在)
  4.   -htmlparser.js(必须存在)
  5.   -showdown.js(必须存在)
  6.   -wxDiscode.js(必须存在)
  7.   -wxParse.wxml(必须存在)
  8.   -wxParse.wxss(必须存在)
  9.   -emojis(可选)



  • 2. 引入必要文件
  1. //在使用的View中引入WxParse模块
  2. var WxParse = require('../../wxParse/wxParse.js');

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


  • 4. 模版引用
  1. //这里data中article为bindName
  2. <template is="wxParse" data="{{wxParseData:article.nodes}}"/>

高级用法
  • 配置小表情emojis
  1. /**
  2. * WxParse.emojisInit(reg,baseSrc,emojis)
  3. * 1.reg,如格式为[00]=>赋值 reg='[]'
  4. * 2.baseSrc,为存储emojis的图片文件夹
  5. * 3.emojis,定义表情键值对
  6. */
  7. WxParse.emojisInit('[]', "/wxParse/emojis/", {
  8.       "00": "00.gif",
  9.       "01": "01.gif",
  10.       "02": "02.gif",
  11.       "03": "03.gif",
  12.       "04": "04.gif",
  13.       "05": "05.gif",
  14.       "06": "06.gif",
  15.       "07": "07.gif",
  16.       "08": "08.gif",
  17.       "09": "09.gif",
  18.       "09": "09.gif",
  19.       "10": "10.gif",
  20.       "11": "11.gif",
  21.       "12": "12.gif",
  22.       "13": "13.gif",
  23.       "14": "14.gif",
  24.       "15": "15.gif",
  25.       "16": "16.gif",
  26.       "17": "17.gif",
  27.       "18": "18.gif",
  28.       "19": "19.gif",
  29.     });
  30. 多数据格式

二次开发
  • 基础数据格式
  1. parsedata:{
  2.     view:{},//样式存储
  3.     nodes:{},//展示需要的存储节点
  4.     images:[],//存放图片对象数组
  5.     imageUrls:[],//存放图片url数组
  6. }





免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。