後臺傳來的資料有

content: "<p><img src="http://file.rzkeji.com/web/zhaowoa/upload/2018/11/29/95fb21bb1eab0266665b1c56969c74ea.png" title="1543822480394864.png" alt="招聘banner00.png"/><span style="font-size: 24px;"><strong>歡迎線上面對面交流，把握機會。</strong></span></p>"

這是後臺編輯的內容。
在vue中很簡單

小程式提供了一個元件

<!-- rich-text.wxml -->
<rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>

mpvue改成
 <rich-text :nodes="nodes" @tap="tap" ></rich-text>
 即可。
 

雖然小程式官方也提供了為rich-text內的富文字更改樣式的方法

// rich-text.js
Page({
  data: {
    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: red;'
      },
      children: [{
        type: 'text',
        text: 'Hello World!'
      }]
    }]
  },
  tap() {
    console.log('tap')
  }
})
 

就是在rich-text.js為相應標籤名新增相應樣式。雖然解決了樣式可控的問題。但對於圖片的處理就麻煩了。並且這樣設樣式，相對於直接寫css樣式，這樣寫樣式麻煩太多了。

用第三方外掛
mpvue-wxparse：適用於 Mpvue 的微信小程式富文字解析自定義元件，支援 HTML 及 markdown 解析。

安裝npm i mpvue-wxparse --save

官方文件 https://github.com/F-loat/mpvue-wxParse

示例

<template>
  <div>
    <wxParse :content="article" @preview="preview" @navigate="navigate" />
  </div>
</template>

<script>
import wxParse from 'mpvue-wxparse'

export default {
  components: {
    wxParse
  },
  data () {
    return {
      article: '<div>我是HTML程式碼</div>'
    }
  },
  methods: {
    preview(src, e) {
      // do something
    },
    navigate(href, e) {
      // do something
    }
  }
}
</script>

<style>
@import url("~mpvue-wxparse/src/wxParse.css");
//這裡我是直接 @import '~mpvue-wxparse/src/wxParse.css'
</style>

此處wxParse是類似元件的方式引入，記住在components中註冊才行。
利用外掛的好處是能直接在style標籤中改變相應的樣式。