微信小程序html格式轉換詳解

前言

在畢設的過程中，把項目遷移到小程序中，遇到了html格式的博客內容，在小程序中直接以標籤的格式顯示出來了，並沒有進行標籤格式的轉換，因此記下該問題並解決。問題的截圖如下:

解決步驟

1. 首先要先下載wxParse：官網的github地址爲:[點擊此處進行下載] https://github.com/icindy/wxParse)。並把下載後的文件解壓到項目中，如下圖,爲我存放的位置。
   
2. 在app.wxss全局樣式文件中，需要引入wxParse的樣式表。

/app.wxss/
@import “/pages/wxParse/wxParse.wxss”;

3. 在需要加載html內容的頁面對應的js文件裏引入wxParse，比如我需要在單個博客詳情中把html標籤轉化成小程序能識別的標籤，我就在singleBlog.js中引。

var WxParse = require(’…/wxParse/wxParse.js’);

4. 通過調用WxParse.wxParse方法來設置html內容,以下爲singleBlog.js中部分代碼。請求地址，並且獲得單個博客的詳情信息。

var WxParse = require('../wxParse/wxParse.js');
/**
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName綁定的數據名(必填)
* 2.type可以爲html或者md(必填)
* 3.data爲傳入的具體數據(必填)
* 4.target爲Page對象,一般爲this(必填)
* 5.imagePadding爲當圖片自適應是左右的單一padding(默認爲0,可選)
*/
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    singleBlog:{}
  },

  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {
    console.log("options",options);
    wx.request({
      url: 'http://localhost:9200/blog/singleBlog/'+options.blogId,
      header: {
        'Content-Type': 'application/json'
      },
      success:res=>{
        console.log(res);
        this.setData({
          singleBlog:res.data.dataInfo
        })
        // 解析爲
        // console.log("s",this.data.singleBlog);
        WxParse.wxParse('htmlContent', 'html', this.data.singleBlog.htmlContent, this,0);
      }
    })

  },

5. 在對應的wxml中就可以使用了，下面第一個爲模板，第二個爲在singleBlog.wxml的部分代碼截圖。其中data中的htmlContent爲bindname，即第一個參數。

<import src="../../wxParse/wxParse.wxml"/>
<template is="wxParse" data="{{wxParseData:htmlContent.nodes}}"/>

效果如下圖所示:

注意事項

1. 如果使用傳統的方法，wx.request中的success的this指向並不是page，可以在前面把this用that存起來，或者把success改成箭頭指向的方法。
2. 在js中獲取data中數據的時候，用this.data.你定義的屬性，這點和vue不一樣，vue不用寫data。設置屬性的時候用this.setData({
   singleBlog:res.data.dataInfo
   })，這個和react挺像的。

---

沒有人能預測未來，但總有人後悔當初。