小程序中特殊数据取值

张开发
2026/5/17 18:34:49 15 分钟阅读
小程序中特殊数据取值
遍历字段名称键view wx:for{{classType}} wx:for-indexkey{{key}}/view场景遍历C1、C2{{[circle.tagList[item.project_tag]]}}\n换行数据1、新建filter.wxs放入lib-css文件夹下面我是这么放的大家根据自己的情况定。//filter.wxs var format function (text) { if (!text) { return } var reg getRegExp(\\\\n, g) return text.replace(reg,\n) } module.exports { format:format }2、在页面导入刚刚新建的wxs模块!--只能使用相对路径(绝对路径只需要/lib后面的路径),并需要定义module-- wxs src../../lib/css/filter.wxs moduleutil/wxs3、在页面中需要转化的地方转一下!--要用text标签因为text才支持\n-- text classgray{{util.format(item.description)}}/text场景:后台接口返回带\n的动态文案html img数据1、html处理rich-text nodes{{introduce}}/rich-text2、样式处理const regex new RegExp(img, gi) const temp_article_content interfaceData.replace(regex, img stylemax-width: 100%;); that.setData({ introduce:temp_article_content, })场景用户使用富文本编辑器添加的文案中存在img就需要对他的宽度做限制因为在这里要使用所以在页面就没法设置样式了只能通过js将返回的数据转化一下延申不限小程序、不限数据特殊符号// 空格 el-tooltip :contentname \u00A0\u00A0 cname // 主要是这里使用的\u00A0 div{{ name }}nbsp;nbsp;{{ cname }}/div /el-tooltip // 换行 p title第一行提示文本#10;第二行提示文本#10;第三行提示文本支持换行的提示/p这个是书写规范eslint报错了把符号改为lt;编码就好了为gt;≤为le;也可以通过 v-text 或 {{ }} 插值的方式渲染文本Vue 会自动帮你转义特殊字符

更多文章