知识 分享 互助 懒人建站

    懒人建站专注于网页素材下载,提供网站模板、网页设计、ps素材、图片素材等,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。

    懒人建站提供网页素材下载、网站模板
    知识 分享 互助!

    微信小程序输出html内容数据插件wxParse

    作者:速博娱乐是什么 来源:wxParse 2016-12-09 人气:
    微信小程序输出html内容数据插件wxParse,可以把带html标签的数据输出为微信小程序正常显示的格式,wxParse插件带有演示,也有使用文档说明。
    微信小程序输出html内容数据插件wxParse,可以把带html标签的数据输出为微信小程序正常显示的格式,测试可用,不过外观样式,可能需要根据你的需求再调整一下,wxParse插件带有演示,也有使用文档说明。
    下载地址:https://github.com/icindy/wxParse

    wxParse文档基本使用方法

    1. Copy文件夹wxParse

    - wxParse/
      -wxParse.js(必须存在)
      -html2json.js(必须存在)
      -htmlparser.js(必须存在)
      -showdown.js(必须存在)
      -wxDiscode.js(必须存在)
      -wxParse.wxml(必须存在)
      -wxParse.wxss(必须存在)
      -emojis(可选)
    

    2. 引入必要文件

    //在使用的View中引入WxParse模块
    var WxParse = require('../../wxParse/wxParse.js');
    
    //在使用的Wxss中引入WxParse.css,可以在app.wxss
    @import "/wxParse/wxParse.wxss";
    

    3. 数据绑定

    var article = '<div>我是HTML代码</div>';
    /**
    * 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);
    

    4. 模版引用

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

    高级用法

    配置小表情emojis

    /**
    * WxParse.emojisInit(reg,baseSrc,emojis)
    * 1.reg,如格式为[00]=>赋值 reg='[]'
    * 2.baseSrc,为存储emojis的图片文件夹
    * 3.emojis,定义表情键值对
    */
    WxParse.emojisInit('[]', "/wxParse/emojis/", {
          "00": "00.gif",
          "01": "01.gif",
          "02": "02.gif",
          "03": "03.gif",
          "04": "04.gif",
          "05": "05.gif",
          "06": "06.gif",
          "07": "07.gif",
          "08": "08.gif",
          "09": "09.gif",
          "09": "09.gif",
          "10": "10.gif",
          "11": "11.gif",
          "12": "12.gif",
          "13": "13.gif",
          "14": "14.gif",
          "15": "15.gif",
          "16": "16.gif",
          "17": "17.gif",
          "18": "18.gif",
          "19": "19.gif",
        });
    

    wxParse多数据循环使用方法

    介绍如何使用wxParse在回复等多条HTML共同渲染的方法

    方法介绍

    	/**
    
    	* WxParse.wxParseTemArray(temArrayName,bindNameReg,total,that)
    
    	* 1.temArrayName: 为你调用时的数组名称
    
    	* 3.bindNameReg为循环的共同体 如绑定为reply1,reply2...则bindNameReg = 'reply'
    
    	* 3.total为reply的个数
    	* 懒人建站http://sbylssm.985sunbet.com/
            *  var that = this; WxParse.wxParseTemArray("replyTemArray",'reply', replyArr.length, that)
    	*/
    

    使用方式

    循环绑定数据

    var replyHtml0 = `<div style="margin-top:10px;height:50px;">
            <p class="reply">
                wxParse回复0:不错,喜欢[03][04]
            </p>    
        </div>`;
        var replyHtml1 = `<div style="margin-top:10px;height:50px;">
            <p class="reply">
                wxParse回复1:不错,喜欢[03][04]
            </p>    
        </div>`;
        var replyHtml2 = `<div style="margin-top:10px;height:50px;">
            <p class="reply">
                wxParse回复2:不错,喜欢[05][07]
            </p>    
        </div>`;
        var replyHtml3 = `<div style="margin-top:10px;height:50px;">
            <p class="reply">
                wxParse回复3:不错,喜欢[06][08]
            </p>    
        </div>`;
        var replyHtml4 = `<div style="margin-top:10px; height:50px;">
            <p class="reply">
                wxParse回复4:不错,喜欢[09][08]
            </p>    
        </div>`;
        var replyHtml5 = `<div style="margin-top:10px;height:50px;">
            <p class="reply">
                wxParse回复5:不错,喜欢[07][08]
            </p>    
        </div>`;
        var replyArr = [];
        replyArr.push(replyHtml0);
        replyArr.push(replyHtml1);
        replyArr.push(replyHtml2);
        replyArr.push(replyHtml3);
        replyArr.push(replyHtml4);
        replyArr.push(replyHtml5);
    
    
        for (let i = 0; i < replyArr.length; i++) {
          WxParse.wxParse('reply' + i, 'html', replyArr[i], that);
          if (i === replyArr.length - 1) {
            WxParse.wxParseTemArray("replyTemArray",'reply', replyArr.length, that)
          }
        }
    

    模版使用

       <block wx:for="{{replyTemArray}}" wx:key="">
            回复{{index}}:<template is="wxParse" data="{{wxParseData:item}}"/>
        </block>
    下载地址:https://github.com/icindy/wxParse
    ↓ 查看全文

    微信小程序输出html内容数据插件wxParse由懒人建站收集整理,您可以自由传播,请主动带上本文链接

    懒人建站就是免费分享,觉得有用就多来支持一下,没有能帮到您,懒人也只能表示遗憾,希望有一天能帮到您。

    微信小程序输出html内容数据插件wxParse-最新评论

    网站地图 英皇国际真人娱乐 伟博娱乐bc2013 百乐坊娱乐骗局
    太阳城网上娱乐官网 太阳城申博娱乐网站 网上娱乐 申博亚洲667878
    彩宝网上海快3 tt彩票加拿大28 加州优惠代理最占成 OG东方馆正网代理开户
    申博会员官网 大佬娱乐官方网站 金赞备用网址 姚记娱乐bc2013
    威尼斯人真人娱乐场 澳门威尼斯人官方网 菲律宾环球娱乐 环球娱乐信用额网址
    4888tyc.com 817XTD.COM 1112126.COM 136PT.COM XSB558.COM
    191sj.com 414sun.com 414sun.com 193SUN.COM 777sbsb.com
    7777XSB.COM 518XTD.COM 1188DZ.COM 968tt.com XSB887.COM
    508XTD.COM 666xsb.com 317SUN.COM 787sunbet.com XSB567.COM