最近在小程序的开发过程中遇到这样的需求，一个搜索联想关键词高亮，另一个是将后台传过来的富文本解析成html展示在页面中，这里我们引入非常牛X的
wxParse，之所以牛，是因为可以解决很多种问题，正因为如此所以它对于小程序来说也非常大，虽然只有100多kb。
地址
https://github.com/icindy/wxParse
使用
-
单行文本解析
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); } }) -
数组文本解析
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) } } }) } })
个人博客：午后南杂
