小程序 rich-text 富文本

做项目过程中，经常遇到接口里传过来的内容是包含html标签的，但是样式又不全面，导致在小程序显示的时候，整个界面都是乱的。

这时候就要用到 rich-text

使用：

有时候展现的也是没有样式的，导致会按照原始大小显示，超出界面框架。我们需要用正则将内容转义一下：

新建一个js文件 replaceImgjs ：

在对应的界面调用：

可以在小程序内尝试打印看看获取到的最后的内容；

这时候的img标签已经被加上的style。

想尝试做一个查询的功能 可以根据id查到text 或者根据text查到id

resultset: [{id:1,text:"aaa"},{id:2,text:"bbb"}, {id: 3,text: 'ccc'}, {id: 4,text: 'f' }]

附上数组如下，尝试了一些方法 就像在传统语言那样遍历数组然后寻找相等的值

var resultSet =thisdataresultset    const length = resultSetlength    var val = thisdatainputValue        if(val){

         consolelog(val)         for(let i =0;i<=length;i++){           //consolelog(resultSet[i])

            if(val == resultSet[i]id){

              consolelo("找到了")              var result = thisdataresultSet[i]id

             consolelog("结果是"+result)

            }             else{

              consolelog("没找到结果")

            } 

              

      }

 

   }    else{

     consolelog("没输入啊")

   }

 }

后台传来的富文本有些并不能被 rich-text 识别以及良好的展现，比如大小问题，我们后台传来的含有很多<u>标签，尽管官方文档显示小程序支持，但实践中并不可以，只好通过方法将其删除，还有<被转义成&lt这些。我们需要将其换成普通字符供 rich-text 识别：

wxml中：

用thissetData({ shuju1 : shuju2  })，

shuju1：你自己命名的名字，

shuju2：调用接口后返回的数据，

然后你页面就可以用{{shuju1}}，这样来获取了。

微信（wechat）是腾讯公司于2011年1月21日推出的一个为智能终端提供即时通讯服务的免费应用程序，微信支持跨通信运营商、跨 *** 作系统平台通过网络快速发送免费（需消耗少量网络流量）语音短信、视频、和文字，同时，也可以使用通过共享流媒体内容的资料和基于位置的社交插件“摇一摇”、“漂流瓶”、“朋友圈”、”公众平台“、”语音记事本“等服务插件。

微信提供公众平台、朋友圈、消息推送等功能，用户可以通过“摇一摇”、“搜索号码”、“附近的人”、扫二维码方式添加好友和关注公众平台，同时微信将内容分享给好友以及将用户看到的精彩内容分享到微信朋友圈。

截至2013年11月注册用户量已经突破6亿，是亚洲地区最大用户群体的移动即时通讯软件。截止2016年12月微信的月活跃用户数已达889亿。

微信由深圳腾讯控股有限公司 (Tencent Holdings Limited)于2010年10月筹划启动，由腾讯广州研发中心产品团队打造 。该团队经理张小龙所带领的团队曾成功开发过Foxmail、QQ邮箱等互联网项目。腾讯公司总裁马化腾在产品策划的邮件中确定了这款产品的名称叫做“微信”。

2011年1月21日，微信发布针对iPhone用户的10测试版。该版本支持通过QQ号来导入现有的联系人资料，但仅有即时通讯、分享照片和更换头像等简单功能。

在随后11、12和13三个测试版中，微信逐渐增加了对手机通讯录的读取、与腾讯微博私信的互通以及多人会话功能的支持，截至2011年4月底，腾讯微信获得了四五百万注册用户。

1、文本超过n行显示省略号

2、省略时，显示 展开/收起 按钮

3、文本不超过n行时，不显示省略号和展开/收起按钮

文本是否显示省略号，通过css可以实现；

判断是否显示展开/收起按钮；

通过SelectorQuery选择器，获取text及其父元素的高度，判断text高度是否超过其父元素高度，决定是否显示展开/收起按钮即可；

wxcreateSelectorQuery() ：返回一个 SelectorQuery 对象实例。

SelectorQueryexec(function callback) ：执行所有的请求。请求结果按请求次序构成数组，在callback的第一个参数中返回。

NodesRefboundingClientRect(function callback) ：添加节点的布局位置的查询请求。相对于显示区域，以像素为单位。

js

wxss

获取page数据,看代码：var text=thisdataname ，这样就获取到初始化的值\x0d\page({\x0d\data:{name:"test"},\x0d\showData:function(){\x0d\var text=thisdataname\x0d\\x0d\}\x0d\})

做一个查询的功能 可以根据id查到text 或者根据text查到id

附上数组如下

resultset: [{id:1,text:"aaa"},{id:2,text:"bbb"}, {id: 3,text: 'ccc'}, {id: 4,text: 'f'}]

之前尝试了一些方法 就像在传统语言那样遍历数组然后寻找相等的值 但是发现好像并不是特别好使

var resultSet =thisdataresultset

const length = resultSetlength var val = thisdatainputValue if(val){

consolelog(val) for(let i =0;i<=length;i++){ //consolelog(resultSet[i])

if(val == resultSet[i]id){

consolelo("找到了") var result = thisdataresultSet[i]id

consolelog("结果是"+result)

} else{

consolelog("没找到结果")

}

}

} else{

consolelog("没输入啊")

}

}

以上就是关于小程序 rich-text 富文本全部的内容，包括:小程序 rich-text 富文本、微信小程序 数组查找、小程序rich-text接收富文本不起作用等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！