Mini Program: The rich text content rendered by the Mini Program supports downloading files and jumping to another Mini Program

demand

To edit the rich text in the background and display it on the small terminal, you need to add a link to the rich text to download the file or jump to another small program.

step

npm i mp-html --save

Take the introduction of wepy as an example

<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>