Taro小程序开发随记

  • 处理taro小程序显示wangeditor内的a标签跳转
javascript 复制代码
Taro.options.html.transformElement = (el) => {
  if (el.props.class === 'h5-a') {
    el.__handlers.tap = [() => toWebView(el.props.href)]
  }
  return el
}
  • 处理wangeditor富文本内容中图片视频到小程序中展示问题
html 复制代码
<view class="rich-content" v-html="replaceImg(code)" />
javascript 复制代码
function replaceImg(code: string) {
  return code.replace(/poster="[^"]*"/i, '').replace(/width="[^"]*"/i, 'width="100%"').replace(/height="[^"]*"/i, '').replace(/><source/, '').replace(/type="video\/mp4\/>./, '').replace(/<img/gi, '<img mode="widthFix" ')
}
  • 如果富文本中图片与图片直接有白缝,需要把图片元素变成块元素或者给图片一个负的margin-top挤一下,即可解决
css 复制代码
img {
  display : block ; 
  width: 100%;
  margin-top: -11px;
}
相关推荐
橘子味的冰淇淋~13 分钟前
【解决】Vue + Vite + TS 配置路径别名成功仍爆红
前端·javascript·vue.js
利刃之灵19 分钟前
03-HTML常见元素
前端·html
kidding72325 分钟前
gitee新的仓库,Vscode创建新的分支详细步骤
前端·gitee·在仓库创建新的分支
听风吹等浪起28 分钟前
基于html实现的课题随机点名
前端·html
leluckys34 分钟前
flutter 专题 六十三 Flutter入门与实战作者:xiangzhihong8Fluter 应用调试
前端·javascript·flutter
kidding7231 小时前
微信小程序怎么分包步骤(包括怎么主包跳转到分包)
前端·微信小程序·前端开发·分包·wx.navigateto·subpackages
微学AI1 小时前
详细介绍:MCP(大模型上下文协议)的架构与组件,以及MCP的开发实践
前端·人工智能·深度学习·架构·llm·mcp
liangshanbo12152 小时前
CSS 包含块
前端·css
Mitchell_C2 小时前
语义化 HTML (Semantic HTML)
前端·html
倒霉男孩2 小时前
CSS文本属性
前端·css