小程序渲染html

核心思路：
使用 rich-text

将示例文档更改下就行了；

参考
rich-text | 微信开放文档
微信小程序rich-text富文本图片不展示、宽度超出 - 简书

引入HTML本地文件，以js格式保存

#htmlSnip.js
var html = 
  `
<div class="div_class">
  <h1>Title</h1>
  <p class="p">
    Life is&nbsp;<i>like</i>&nbsp;a box of
    <b>&nbsp;chocolates</b>.
  </p>
</div>
`
module.exports={
  snip_html:html
}

js进行处理

## mini.js
// pages/irr_desc/irr_desc.js
var local_html = require('htmlSnip');

var htmlSnip =local_html.snip_html.replace(/\<img/gi, '<img style="max-width:100%;height:auto"')


Page({
  onShareAppMessage() {
    return {
      title: 'rich-text',
      path: 'page/component/pages/rich-text/rich-text'
    }
  },
  /**
   * 页面的初始数据
   */
  data: {
    htmlSnip,
    renderedByHtml: false,
    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: #1AAD19;'
      },
      children: [{
        type: 'text',
        text: 'You never know what you\'re gonna get.'
      }]
    }]
  },
  renderHtml() {
    this.setData({
      renderedByHtml: true
    })
  },
  enterCode(e) {
    console.log(e.detail.value)
    this.setData({
      htmlSnip: e.detail.value
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.renderHtml();
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

wxml 文件

##wxml

<view class="container">
  <view class="page-body">
    <view class="page-section">
      <!-- <view class="page-section-title">通过HTML String渲染</view> -->
      <view class="page-content">
        <!-- <scroll-view scroll-y>{{htmlSnip}}</scroll-view> -->
        <!-- <button style="margin: 30rpx 0" type="primary" bindtap="renderHtml">渲染HTML</button> -->
        <block wx:if="{{renderedByHtml}}">
          <rich-text nodes="{{htmlSnip}}"></rich-text>
        </block>
      </view>
    </view>

    <!-- <view class="page-section">
      <view class="page-section-title">通过节点渲染</view>
      <view class="page-content">
        <scroll-view scroll-y>{{nodeSnip}}</scroll-view>
        <button style="margin: 30rpx 0" type="primary" bindtap="renderNode">渲染Node</button>
        <block wx:if="{{renderedByNode}}">
          <rich-text nodes="{{nodes}}"></rich-text>
        </block>
      </view>
    </view> -->
  </view>

</view>