微信小程式載入和解析html標籤
阿新 • • 發佈:2019-02-06
小程式的頁面可以是使用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'