【小程序】非常好用的富文本插件wxParse

最近在小程序的开发过程中遇到这样的需求,一个搜索联想关键词高亮,另一个是将后台传过来的富文本解析成html展示在页面中,这里我们引入非常牛X的 wxParse ,之所以牛,是因为可以解决很多种问题,正因为如此所以它对于小程序来说也非常大,虽然只有100多kb。

地址

https://github.com/icindy/wxParse

使用

  1. 单行文本解析

    wxml

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

    wxss

    @import '../../../utils/wxParse/wxParse.wxss';
    

    javascript

    let WxParse = require('../../../utils/wxParse/wxParse.js');
    
    Page({
      data: {
        wxParseData: ''
      },
      toHtml () {
        let article = '<div>123 <span>456</span></div>';
        WxParse.wxParse('article', 'html', article, this, 5);
      }
    })
    
  2. 数组文本解析

    wxml

    <import src="../../../utils/wxParse/wxParse.wxml"/>
    
    <view class='list_for list_item' wx:key="{{index}}" wx:for="{{replyTemArray}}">
      <view class="list-item" data-index="{{index}}" bindtap='clickListItem'>
        <template class='list_item' is="wxParse" data="{{wxParseData:item}}" />
      </view>
    </view>
    

    wxss

    @import '../../../utils/wxParse/wxParse.wxss';
    

    javascript

    let WxParse = require('../../../utils/wxParse/wxParse.js');
    
    Page({
      data: {
        replyTemArray: []
      },
      // 搜索联想,关键词高亮
      keywordAssociation(keyword) {
        let _this = this;
    
        getSearchList(keyword).then(res => {
          _this.setData({
            searchList: res
          })
          let dataArr = res;
          for (let i = 0; i < dataArr.length; i++) {
            WxParse.wxParse('reply' + i, 'html', _this.highLight(dataArr[i].name, keyword), _this);
            if (i === dataArr.length - 1) {
              WxParse.wxParseTemArray("replyTemArray", 'reply', dataArr.length, _this)
            }
          }
        })
      }
    })
    

个人博客:午后南杂

推荐阅读更多精彩内容