微信小程序中顯示html格式內(nèi)容的方法
更新時間：2017年04月25日 16:01:40 作者：隔壁陳叔叔
最近在工作中遇到一個需求，需要在不能顯示html格式的微信小程序中顯示html格式的內(nèi)容，通過查找相關的資料發(fā)現(xiàn)可以利用wxParse來實現(xiàn)，下面這篇文章就主要給大家介紹了微信小程序實現(xiàn)顯示html格式內(nèi)容的方法，需要的朋友可以參考借鑒，下面來一起看看吧。
前言
最近項目上遇到在微信小程序里需要顯示新聞內(nèi)容，新聞內(nèi)容是通過接口讀取的服務器中的富文本內(nèi)容，是html格式的，小程序默認是不支持html格式的內(nèi)容顯示的，那我們需要顯示html內(nèi)容的時候，就可以通過wxParse來實現(xiàn)。
準備工作：
首先我們下載wxParse
github地址：https://github.com/icindy/wxParse
本地下載：http://xiazai.jb51.net/201704/yuanma/wxParse-master(jb51.net).rar
wxParse
下載完之后我們需要用到目錄下的wxParse文件夾，把他拷貝到我們的項目目錄下
下面是具體的使用步驟
1、在app.wxss全局樣式文件中，需要引入wxParse的樣式表
@import "/page/wxParse/wxParse.wxss";
2、在需要加載html內(nèi)容的頁面對應的js文件里引入wxParse
var WxParse = require('../../wxParse/wxParse.js');
3、通過調用WxParse.wxParse方法來設置html內(nèi)容
/** * 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,可選) */
Page({
data: {
},
onLoad: function () {
var that = this;
wx.request({
url: '',
method: 'POST',
data: {
'id':13
},
header: {
'content-type': 'application/json'
},
success: function(res) {
var article = res.data[0].post;
WxParse.wxParse('article', 'html', article, that,5);
}
})
}
})
4、在頁面中引用模板
<import src="../../wxParse/wxParse.wxml"/>
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>
這樣就可以在微信小程序中嵌入html內(nèi)容了
總結
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關文章
這篇文章介紹了ES6中class類的用法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-05-05
JavaScript 基礎篇，想要學習js的朋友可以參考下2012-03-03
本文并沒有詳細的介紹js所有的操作符，只是就js在操作符上與其它常用語言不一樣的獨特之處列舉一二，了解了這些，至少不會讓我們在讀一些開源框架js代碼時一頭霧水，并且可以讓我們的js代碼更簡潔、更安全（少出bug）。2014-11-11
javascript學習筆記之獲得頁面中的元素代碼，需要的朋友可以參考下2012-06-06
utf8的編碼算法 轉載...2006-12-12
這篇文章主要介紹了JavaScript中的實例對象與原型對象,針對constructor屬性和prototype屬性展開來講,需要的朋友可以參考下2016-03-03
input按鈕的事件處理大全,收集的是網(wǎng)頁中常用的一些事件處理，需要的朋友可以收藏下。2010-12-12
這篇文章主要介紹了淺談一下JavaScript與C++的差異,本來兩門語言各有各的戰(zhàn)場，并沒什么交集，但自從?Node.js?框架出現(xiàn)之后，JavaScript?就擺脫了瀏覽器的樊籠，開始滲透進入系統(tǒng)應用的領域2023-04-04
在JavaScript中操作時間之getYear()方法的使用教程
這篇文章主要介紹了在JavaScript中操作時間之getYear()方法的使用教程,是JS入門學習中的基礎知識,需要的朋友可以參考下2015-06-06
javascript 基礎篇1 什么是js 建立第一個js程序
javascript是很多東西的基礎，比如jsp，ajax等，如果不會這么，那么學起這些來就比較麻煩，所以要先學好這個，為將來的學習打好經(jīng)濟基礎2012-03-03