[微信小程序] 微信小程序富文本-wxParse的使用

最近小程序蠻火的，公司要做於是學了一點點小程序

不知道你們有沒有遇到過這種問題：

從公司服務器獲取的文章內容是有HTML標簽格式的一段內容，但是微信是不支持這些標簽的，怎么辦呢？

 

　　1.一般網站后台的文章是這樣的，帶有很多的html標簽（這里是截取的今日頭條某文章內容），但是小程序並不支持，它會以文本直接顯示

 

　　怎么辦呢？

 

 

　　2.在這個時候可以考慮 wxParse

　　wxParse信息

• 版本號0.1
• 歷史版本號0.2 具體代碼請查看倉庫分支V1
• github地址: https://github.com/icindy/wxParse
• 解決問題:微信小程序富文本html、md解析組件 （圖片格式標簽也可以轉換）
• wxParse主要目的就是彌補富文本解析空缺的組件，歡迎使用反饋
• （以上信息來自網絡）

　3.實現步驟

　　1.首先我們肯定先去下載  點擊鏈接進入github 然后電擊綠色的下載按鈕，然后本地解壓

　

　　2.解壓后的文件如下，請不要刪除文件，直接文件夾移動到你的微信小程序目錄

 

　　

　　3.這是我的測試目錄，放置的位置自己定，記得路徑

　　

　　4.使用方式，引入模版

　　首先在 app.wxss中引入 wxParse.wxss ，路徑由你防止的文件路徑而定

//app.wxss  文件中

/*調用wxParse*/

@import "wxParse/wxParse.wxss";

　　在你的 wxml 文件中引用 “wxParse.wxml”

//在你的wxml文件中

<import src="../../wxParse/wxParse.wxml" />

　　當然還有最重要的 js 文件中調用

//在你要添加數據的頁面的js中

var WxParse = require('../../wxParse/wxParse.js');

　　調用完畢后就是添加了，首先在你要添加的wxml頁面添加如下代碼

//包裹的view，固定大小以及文字大小顏色等，html的字體和小程序的字體標准有些不同，調整一下會好看一些
 
<view class="m1_content">

//模版處理 之前后需要綁定數據指向   article是您的數據名稱 可修改

    <template is="wxParse" data="{{wxParseData:article.nodes}}" />

  </view>

　　最后就是js的部分了

//文件的調用
var WxParse = require('../../wxParse/wxParse.js');
var app = getApp()
Page({
  data: {
  },

//防止的地方隨意，因為我要加載就出現所以寫在了 onLoad: function ()方法中

  onLoad: function () {

//存放html內容代碼的數據變量 和之前的article一致

    var article = '<div class="article-box"><h1 class="article-title">你的房間就是你的生命狀態</h1> <div class="article-sub"><!----> <span>正能量勵志</span> <span>2017-09-11 10:22</span></div> <div class="article-content"><div><p>1</p><p>你的房間就像你自己</p><p>哈佛商學院經過多年的研究，發現一個現象：幸福感強的成功人士，往往居家環境十分干凈整潔；而不幸的人們，通常生活在凌亂骯臟中。由小家及大家，一個成功的企業，往往窗明幾凈；反之一個瀕臨破產的企業，一定有骯臟的角落。</p><p>於是摸索出這樣一個結論：“你所居住的房間正是你自身的折射，你的人生其實就像你的房間。”</p><p>此語一出，舉世嘩然，有不置可否的，有跌足頓悟的。</p>';
    /**
    * WxParse.wxParse(bindName , type, data, target,imagePadding)
    * 1.bindName綁定的數據名(必填)
    * 2.type可以為html或者md(必填)
    * 3.data為傳入的具體數據(必填)
    * 4.target為Page對象,一般為this(必填)
    * 5.imagePadding為當圖片自適應是左右的單一padding(默認為0,可選)
    */
    var that = this;

//執行轉換方法  然后就應該成功了

    WxParse.wxParse('article', 'html', article, that, 5);
  }

})

　　

　　網上其實很多教程，可能有點凌亂，以上我親測目前是可以用的，注意細節應該沒問題了

　　最后我們看看效果　　

　　這是開始的效果沒用插件

　　

　　使用了之后的顯示結果

　　當然，文字大小需要調節一下，但是整體的格式都在的 

　　不僅僅是文字，圖片格式也可以轉換

　　圖片格式也可以轉換

　　圖片格式也可以轉換

　　圖片格式也可以轉換

　　重要的事情說三遍