小程序隨筆7:wxParse實現(xiàn)html解析

小程序在開發(fā)時,讀取到服務器的內(nèi)容可能是html格式的,因小程序不支持html格式的內(nèi)容顯示,所以要對html格式的內(nèi)容進行解析,因此wxParse就出現(xiàn)了。

wxParse github下載地址:https://github.com/icindy/wxParse。

實現(xiàn)方法:
1、將下載下來的wxParse文件夾復制到根目錄下。
2、在小程序頁面對應的wxml文件中引用wxParse.wxml

<import src="../../wxParse/wxParse.wxml"/> 
<view class="container">
  <view class="topcezter">
    <view class="title">{{title}}</view>
    <view class="dateauthor">{{dateauthor}}</view>
  </view>
  <view class="wxParse">
    <template is="wxParse" data="{{wxParseData:article.nodes}}"/>
  </view>
</view>

重點看class為wxParse的view的布局,上面class為topcenter的view是為了美觀,我自己寫的標題和時間顯示。
3、在小程序頁面對應的js文件中引用wxParse.js,并使用

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

然后是Page里面的邏輯如下所示:

Page({
  data:{
    title:"2021款福特探險者新增了國王牧場版",
    dateauthor:"2021-03-11 15:55 viven"
  },
  onLoad:function(options){
    var that = this;
    var article = 
    "<p><img data-ratio=\"0.5760709010339734\" src=\"http://7xqd2w.com2.z0.glb.qiniucdn.com/Fv79kC8T7OziaRshDTTtBBCBbU6O?imageView2/2/w/660/interlace/0/q/100\" data-type=\"png\" data-w=\"1354\"/>2021款福特探險者新增了國王牧場版,這個車型名稱出現(xiàn)在福特多款車型上,國王牧場(King ranch)這個名稱來自真實的德州一個大型農(nóng)場,但之前20年來,主要是F系列皮卡和全尺寸SUV征服者才銷售國王牧場版,作為一款車中的豪華配置車型。</p >"+
    "<p><br/></p >" +
    "<p style=\"text-align: center;\"><img class=\"rich_pages\" data-ratio=\"0.6218130311614731\" data-s=\"300,640\" src=\"http://7xqd2w.com2.z0.glb.qiniucdn.com/Fr-o2axGdPL0ssdhmqrOhCOAWcwR?imageView2/2/w/660/interlace/0/q/100\" data-type=\"png\" data-w=\"1412\" style=\"\"/></p>" +
    "<p>但在福特車型系列中,國王牧場車型都是排在配置第二豪華位置,頂配通常是稱為白金版(Platinum),但國王牧場版會有一些特殊的內(nèi)飾裝飾,例如帶有國王牧場印花的皮座椅,探險者的國王牧場版也是如此,配置和售價低于探險者的白金版,報價53,595美元,比入門版探險者的33,740美元起貴了約2萬美元。多付出2萬美元的國王牧場版,會有哪些配置呢?<br/></p >";

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

最終效果圖如下:


wxparse解析效果圖

標題和時間是小程序原生的,下面的圖片及文案是wxParse解的html的效果。

隨筆記錄,不喜勿噴。

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

友情鏈接更多精彩內(nèi)容