需求

在后台编辑富文本，小程序端展示，需要在富文本里面加上一个链接可以下载文件，或者跳转到另一个小程序。

步骤

npm i mp-html --save

以wepy的引入方式为例

<mp-html
  content="{
    
    {content}}"
  :copy-link="false"
  @linktap="linktap"
/>

// 这里只做了跳转链接和跳转小程序，下载文档之类的也是可以的
linktap(e) {
    
    
  if (e.$wx.detail['data-appid']) {
    
    
    wx.navigateToMiniProgram({
    
    
      appId: e.$wx.detail['data-appid'],
      envVersion: __BASE_URL__ === 'https://mcptest.cmvalue.com' ? 'trial' : 'release',
      fail: function (err) {
    
    
        console.log(err)
      }
    })
    return false
  }
  if (e.$wx.detail.href) {
    
    
    wx.navigateTo({
    
    
      url: `/pages/web-view/web-view?url=${
      
      encodeURIComponent(e.$wx.detail.href)}`
    })
  }
}

<config>
{
    
    
  "navigationBarBackgroundColor": "#fff",
  "usingComponents": {
    
    
    "mp-html": "module:mp-html/dist/mp-weixin"
  }
}
</config>