小程序开发记录

133 阅读1分钟

一、富文本解析

<RichText nodes={str.replace(new RegExp('{ziduan}', 'g'), `<span class='highlight'>sdfsadf</span>`).replace(/\\n/g,'\n') />

提取知识点:

1、taro实现富文本解析可以用标签实现

2、服务端返回的文案部分文案需要高亮展示可以用用正则替换

str.replace(new RegExp('', 'g'), <span class='highlight'>cccc</span>)

3、注意new RegExp在微信小程序上wxs没有这个方法,生成 regexp 对象需要使用 getRegExp函数。

str.replace(getRegExp(keyword, 'g'), '<span class="light">' + keyword + '</span>')

4、支付宝小程序rich-text标签不能识别上面的字符串

最终我用mini-html-parser2将标签解析成node节点对象

import Parse from 'mini-html-parser2'

Parse(str, (err, htmlData) => {
    if (err) return false
    nodeObj = htmlData
})

<rich-text nodes="{{nodeObj}}"/>

二、文本中间加空格

1、微信小程序直接在文本上加空格就可以

    <text>序直接在  文本 上加空格就可以</text>

2、支付宝小程序识别不出来空格和 

解决办法:在标签上加space='ensp'属性 但是这个方法只适用于文本中间,两边也不好用

    <text space='ensp'>序直接在  文本 上加空格就可以</text>