微信小程序 解析html格式内容

需要引入html-view文件

1/js 代码

const HtmlParser=require('../../utils/html-view/index')

 data: {
         coupon_text:"",
}



let mobiledesc='<div><img src="../../1.png"></div>'
          if(mobiledesc){
                let coupon_text=new HtmlParser(mobiledesc).nodes;
                this.setData({
                    coupon_text
                })
            }else{
                this.setData({
                    coupon_text:''
                })
            }

2/  wxml代码

     <view wx:if="{{coupon_text}}" class="{{iPhoneXStyle?'wap-chooseticket-footer-diff-iponex':'wap-chooseticket-footer-diff'}}">
      <import src="../../utils/html-view/index.wxml" />
      <template is="html-view" data="{{data: coupon_text}}" />
    </view>

3/wxss

 
.wap-chooseticket-footer-diff {
    width: 100%;
    overflow-x: scroll;
  }
  
  .wap-chooseticket-footer-diff-iponex {
    width: 100%;
    overflow-x: scroll;
  }
  
  .wap-chooseticket-footer-diff view {
    width: 100% !important;
  }
  
  .wap-chooseticket-footer-diff-iponex view {
    width: 100% !important;
  }
  
  .wap-chooseticket-footer-diff .html-view image {
    width: 100% !important;
    display: block;
  }
  
  .wap-chooseticket-footer-diff-iponex .html-view image {
    width: 100% !important;
    display: block;
  }

 

4/最后一步，需要在项目中放入html-view整个文件夹，文件夹的可以在github上面下载(可以在github自行搜索html-view)