前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序 rich-text富文本 技巧

微信小程序 rich-text富文本 技巧

原创
作者头像
谭广健
发布2023-09-07 16:53:20
4050
发布2023-09-07 16:53:20
举报
文章被收录于专栏:谭广健的专栏谭广健的专栏

微信于2017年1月9日推出的一种基于微信生态圈的小程序。它是基于微信平台的轻量级应用,用户无需下载安装即可直接使用。微信小程序能够触手可及、用完即走,为用户提供便捷的服务和体验。推出微信小程序是为了让更多的第三方开发者加入微信生态,为用户提供更多优质的应用和服务。再强大的推广和运营下不断成长,不知不觉已经迭代很多版本和完善了。

最近在开发一个小程序,用到了里面一个富文本的功能rich-text,至于什么是富文本这个自己查一下吧。简单的讲就是装HTML代码进行渲染显示,这个的确是个好东西。起码可以显示不同的式样和图片。但最近因为放照片出了点问题,主要是因为IMG的图片显示。不会自动大小,那怎么办呢,做个正则进行调整。

上代码,这个正则是将图片的宽度为100,这样就能满屏。而后面则是加入图片域。

代码语言:javascript
复制
function showMap(txt){
    if(txt.length === 0)
    return txt;
    var mycontent = txt.replace(getRegExp('<img','g'), '<img width="100%" height="auto"');
    return mycontent.replace(getRegExp('/file/local','g'),'http://mi.jm2buy.com/file/local');
}
module.exports = {  
  showMap:showMap 
}

函数写了,我们怎么用呢,首先在WXML进行引用

代码语言:javascript
复制
<wxs src="../../utils/string.wxs" module="util" /> 

引入成功后,我们就在WXML调用了。

代码语言:javascript
复制
{{util.showMap("内容")}}

ok,这样就能显示了。year

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档