微信小程序使用wxParse實(shí)現(xiàn)接入富文本編輯
|
簡介 微信小程序中比如活動(dòng)說明，簡介這樣的圖文介紹說明頁面，后臺(tái)通常配置成富文本編輯框，由后臺(tái)直接輸入內(nèi)容，然后在小程序界面展現(xiàn)。
但是富文本編輯提取到內(nèi)容是html格式的，寫法與小程序的wxml并不一致，那么怎么樣才能做到富文本能夠在小程序頁面中顯示呢？
解決辦法 有位大牛開發(fā)了一個(gè)模板叫作wxParse，可以直接引入小程序使用。下面把大牛的github地址貼上來： https://github.com/icindy/wxParse
想要了解更多的同學(xué)可以直接去他的github下查看說明文檔。
引入方式及使用方法 wxml文件代碼： 
<view class="container">
<scroll-view class="intro-box" scroll-y="true">
<view class="intro-live">
<!-- 引入模板 -->
<import src="../../../components/wxParse/wxParse.wxml"/>
<!-- 這里data中article為bindName -->
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>
</view>
</scroll-view>
</view>
我的頁面結(jié)構(gòu)，可以作為參考
下面是wxss頁面代碼，主要是引入wxParse.wxss,別的都是根據(jù)你自己頁面需要另外寫的。
@import "../../../components/wxParse/wxParse.wxss";
page{
width: 100%;
height: 100%;
background: #e4382e;
overflow: auto;
}
下面是js代碼：
//獲取應(yīng)用實(shí)例
const app = getApp()
//引入wxParse
var WxParse = require('../../../components/wxParse/wxParse.js');
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options) {
wx.showLoading({
title: '加載中',
mask: true
})
var that = this;
console.log(options)
that.setData({
activityId: options.activityId
})
wx.request({
url: app.globalData.subDomain + '/GetActivityInfo',
data: {
token: app.globalData.token,
activity: that.data.activityId
},
method: 'POST',
success: function(res){
//獲取html代碼
that.setData({
article: unescape(res.data.activity.aintroduct)
})
WxParse.wxParse('article', 'html', that.data.article, that, 5);
wx.hideLoading();
}
})
}
js部分要注意兩點(diǎn): 第一點(diǎn)是在page函數(shù)之前引入wxParse 第二點(diǎn)是在獲取到html后執(zhí)行 WxParse.wxParse('article', 'html', that.data.article, that, 5) 其中的article就是獲取到的html代碼
小結(jié) 這類文章相信也有不少，我能學(xué)會(huì)使用既有同事幫忙，也自己查看了不少博客資料。這種組件的寫法還是老式的小程序?qū)懛ǎ〕绦蛐掳娴慕M件寫法已經(jīng)跟現(xiàn)在不一樣了，不知道這個(gè)插件的開發(fā)者以后會(huì)不會(huì)也轉(zhuǎn)換為最新的方式?？傊F(xiàn)在小程序還是支持這種寫法的。 如果有更好的實(shí)現(xiàn)方式，請(qǐng)一定要留下評(píng)論告知，謝謝。 |
