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

神葳

发布于 2021-01-22 16:04:09

1.3K0

发布于 2021-01-22 16:04:09

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

# 地址

https://github.com/icindy/wxParse

# 使用

# 单行文本解析

# wxml

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

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

1 2 3

复制

# wxss

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

1

复制

# 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);
  }
})

1 2 3 4 5 6 7 8 9 10 11

复制

# 数组文本解析

# 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>

1 2 3 4 5 6 7

复制

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

1

复制

# 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)
        }
      }
    })
  }
})

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

复制

作者个人博客：午后南杂

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2020-7-21 2，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript