1. 程式人生 > >微信小程式載入和解析html標籤

微信小程式載入和解析html標籤

    小程式的頁面可以是使用wx的語法編寫的頁面,也可以是第三方html頁面,還可以是wx的頁面然後使用wxParse解析html的標籤最終構成小程式可以載入的wx頁面。今天用到了第三種。

    首先需要下載wxParse外掛,我生成了雲盤連結

    下載之後解壓並放置在小程式專案的根目錄下。如下圖。


    內部檔案無須作任何改動即可使用。所使用頁面需要做一下引用。

    wxml檔案,需要引入wxParse的模板。

<!--news.wxml-->
<import src="../../../wxParse/wxParse.wxml"/> 

<view class="container boxsizing">
  <view class="content-title">{{title}}</view>//這裡是我自己的內容,所以這個頁面也可以進行一些修飾
<view class="content-time">{{time}}</view>//這裡是我自己的內容,所以這個頁面也可以進行一些修飾 <template is="wxParse" data="{{wxParseData:article.nodes}}"/>//這裡是模板解析出來的內容 </view>

    路徑需要依你的專案路徑來改變。圖中紅框所圈的地方是必須要寫的。

    js檔案需要引入wxParse.js

const app = getApp()
const WxParse = require('../../../wxParse/wxParse.js')//注意路徑

    同時在你的頁面js檔案中需要呼叫wxParse的渲染方法,寫在你想要渲染頁面的地方

    /** * WxParse.wxParse(bindName , type, data, target,imagePadding) * 1.bindName繫結的資料名(必填) * 2.type可以為html或者md(必填) * 3.data為傳入的具體資料(必填) * 4.target為Page物件,一般為this(必填) * 5.imagePadding為當圖片自適應是左右的單一padding(預設為0,可選) */        WxParse.wxParse('article'
, 'html', this.data.content, this, 5); 第一個引數可以參照wxml中template中wxParseData所繫結的值,名字可以換但必須要一致。裡邊的this.data.content就是你請求到的html編碼。可以在頁面的wxss中對模板的標籤進行修飾,其實他們最後都被解析成了wx的標籤。