wechat-微信小程序Asp .Net Core开发实战记录（7）-HTML及markdown解析 by wxParse

step 1：下载wxParse

github地址：https://github.com/icindy/wxParse

step 2：将wxParse拷贝到我们的项目的根目录下

step 3：在app.wxss全局样式文件中，需要引入wxParse的样式表

/*app.wxss 是小程序全局的css文件*/
/*在app.wxss全局样式文件中，引入wxParse的样式表*/
@import "/wxParse/wxParse.wxss";

page {
  font-family: 'microsoft yahei';
  height: 100%;
}

/*common list*/
.list-item {
  position: relative;
  overflow: hidden
}

step 4:在详情页miniprogram/pages/detail/detail.js里引入wxParse.js

// miniprogram/pages/detail/detail.js
//获取应用实例
const app = getApp()

//在需要加载html内容的页面对应的js文件里引入wxParse.js
var WxParse = require('../../wxParse/wxParse.js');

Page({

  /**
   * 页面的初始数据
   */
  data: {
    
      id: '',
      Title: '',
      Body: '',
  },

step 5:用WxParse.wxParse方法来解析含html字段，并将解析后的结果存入到一个新的变量。

/**
   * 获取文章详情
   */
  getBlogDetail() {
    // 初始化db
    const db = wx.cloud.database({});
    var id = this.data.id;
    db.collection('BlogPost').doc(id).get().then(res => {
        console.log('db读取成功', res.data);

        let data = res.data;

        //-----开始解析详情页-------
        //传入的原始数据数据
        var sourceHtmlData = res.data.Body;
        //传入数据的格式
        var contentType = 'html';

        //this target为Page对象,一般为this
        var targetPage = this;

        //解析后的目标内容
        //"targetAfterWxParse"

        console.log('db读取成功1', sourceHtmlData);
        WxParse.wxParse('targetAfterWxParse', contentType, sourceHtmlData, targetPage);

        //-----结束解析详情页-------

        this.setData({

          Title: data.Title,
          Body: data.Body
        });
      })
      .catch(e => {
        wx.showToast({
          title: 'db读取失败',
          icon: 'none'
        });
        console.error('[数据库] [查询记录] 失败：', e)
      });


  }

step 6:用WxParse的模板来显示变量targetAfterWxParse的内容。

<!--miniprogram/pages/detail/detail.wxml-->
<import src="../../wxParse/wxParse.wxml" />

<view>

 
  <view class="book-intro">
    <view class="intro-header">
      <text>{{Title}}</text>
    </view>

    

    <view class="wxParse">
      <text class="intro-content">
          <!--{{Body}}-->  
          
        </text>
      <template is="wxParse" data="{{wxParseData:targetAfterWxParse.nodes}}" />

    </view>

  </view>