富文本在h5和小程序中的显示

后台传来的数据有

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中很简单

; 注意v-html就算是动态写入的，也不是写成 :v-html='****'的 在小程序中没有html这个概念 在mpvue中明确写道： **小程序里所有的 BOM／DOM 都不能用，也就是说 v-html 指令不能用。**

小程序提供了一个组件

<!-- 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标签中改变相应的样式。

2019.3.7补充
最近开发一个阅读的h5，文章也用到了富文本。有一个需求是，用户能调节字体的大小。
方案 ：用localstorage来进行存贮字体大小。
在操作过程中，遇到的问题是，因为字体大小的数值是localstorage中获取来的，vue的动态绑定样式中，用：css只能预先动态选择已经固定好的样式。遂用：style

data(){
 rerturn {
	font:'' 
 }
},
computed: {
    fontStyle(){
      if(this.font){
        return {fontSize: this.font+'px'}
      }
    }
  },
  mounted(){
     try {
       if(window.localStorage.getItem('font_size')){
         this.font=window.localStorage.getItem('font_size')
       }
     } catch (error) {
       console.log(error)
     }

  }


<div v-html='content' :style='fontStyle'>

不要高兴的太早- -，发现富文本的样式并不能给我设置的fontStyle所覆盖。因为里面的优先级较高。又因为style的样式不能添加!important，所以用操作dom元素的方法。

注意:
1.content是异步获取回来的文本，setTimeout是为了能获取得了渲染后的dom元素

watch: {
     content(n){
       setTimeout(()=>{
        let spanAll= this.$refs.content.querySelectorAll('span')
        let divAll= this.$refs.content.querySelectorAll('div')
         let pAll= this.$refs.content.querySelectorAll('p')
         this.mapAll(spanAll);
         this.mapAll(divAll);
        this.mapAll(pAll)
       },0)
     }
  },
  methods:{
   mapAll(value){
       for(var i = 0; i<value.length; i++){
          value[i].setAttribute('style', `font-size: ${this.font}px !important`)
       }
     },
  }

虽然实现了字体能自定义大小，但是文本的原先的 样式都给覆盖了。（我晕，忘了style会覆盖原来的）
最后只能用大小中的字体大小来调节，就是写死class，然后根据大小中来分别对应3种字体大小