简介

微信小程序中比如活动说明,简介这样的图文介绍说明页面,后台通常配置成富文本编辑框,由后台直接输入内容,然后在小程序界面展现。

但是富文本编辑提取到内容是html格式的,写法与小程序的wxml并不一致,那么怎么样才能做到富文本能够在小程序页面中显示呢?

解决办法

有位大牛开发了一个模板叫作wxParse,可以直接引入小程序使用。下面把大牛的github地址贴上来:

https://github.com/icindy/wxParse

想要了解更多的同学可以直接去他的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>

我的页面结构,可以作为参考

下面是wxss页面代码,主要是引入wxParse.wxss,别的都是根据你自己页面需要另外写的。

@import "../../../components/wxParse/wxParse.wxss";
page{
width: 100%;
height: 100%;
background: #e4382e;
overflow: auto;
}

下面是js代码:

//获取应用实例
const app = getApp()
//引入wxParse
var WxParse = require('../../../components/wxParse/wxParse.js'); Page({ /**
* 页面的初始数据
*/
data: { }, /**
* 生命周期函数--监听页面加载
*/
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部分要注意两点:

第一点是在page函数之前引入wxParse

第二点是在获取到html后执行

WxParse.wxParse('article', 'html', that.data.article, that, 5)

其中的article就是获取到的html代码

小结

这类文章相信也有不少,我能学会使用既有同事帮忙,也自己查看了不少博客资料。这种组件的写法还是老式的小程序写法,小程序新版的组件写法已经跟现在不一样了,不知道这个插件的开发者以后会不会也转换为最新的方式。总之,现在小程序还是支持这种写法的。

如果有更好的实现方式,请一定要留下评论告知,谢谢。

微信小程序使用wxParse实现接入富文本编辑的更多相关文章

  1. 微信小程序 使用wxParse解析html

    微信小程序 加载 HTML 标签:https://blog.csdn.net/zclengendary/article/details/54312030 微信小程序 使用wxParse解析html:h ...

  2. 微信小程序使用wxParse解析html

    最近项目上遇到在微信小程序里需要显示新闻内容,新闻内容是通过接口读取的服务器中的富文本内容,是html格式的,小程序默认是不支持html格式的内容显示的,那我们需要显示html内容的时候,就可以通过w ...

  3. $微信小程序开发实践点滴——接入Bmob后端云

    Bmob后端云官网:http://www.bmob.cn/ 微信公众平台官网:https://mp.weixin.qq.com/ 微信小程序官方开发文档:https://mp.weixin.qq.co ...

  4. 微信小程序使用wxParse,解决图片显示路径问题

    我们经常用到发布文章,用的是UEditor百度富文本编辑器,方便排版,存储的也是html代码,这样小程序解析出来的也是排版的样式,但是使用wxParse解析html的时候,因为存储的是图片的相对路径, ...

  5. 小程序html转wxml,微信小程序用wxParse解析html

    1.首先下载 wxParse脚本,到https://github.com/icindy/wxParse下载,将wxParse文件夹放置到小程序根目录,即跟pages同级目录 2.在样式页面 wxss ...

  6. [辅助软件] 微信小程序开发资源汇总 接入指南

    https://github.com/justjavac/awesome-wechat-weapp https://github.com/justjavac/awesome-wechat-weapp ...

  7. 微信小程序学习指南

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  8. 微信小程序开发——模板中加载html代码

    最新方法可以使用微信小程序提供的 rich-text (富文本)组件直接写解析html,详见 rich-text: <rich-text class='f13 c_9' nodes=" ...

  9. 小程序开发运营必看:微信小程序平台运营规范

    一.原则及相关说明 ​ 微信最核心的价值,就是连接——提供一对一.一对多和多对多的连接方式,从而实现人与人.人与智能终端.人与社交化娱乐.人与硬件设备的连接,同时连接服务.资讯.商业. ​ 微信团队一 ...

随机推荐

  1. PP: Multi-Horizon Time Series Forecasting with Temporal Attention Learning

    Problem: multi-horizon probabilistic forecasting tasks; Propose an end-to-end framework for multi-ho ...

  2. 我的python笔记05

    Python 之路 Day5 - 常用模块学习 本节大纲: 模块介绍 time &datetime模块 random os sys shutil json & picle shelve ...

  3. createElement(九)

    Vue.js 利用 createElement 方法创建 VNode,它定义在 src/core/vdom/create-elemenet.js 中: // wrapper function for ...

  4. 利用redis,为Django项目储存session

    1.准备工作 pip install redis pip install django-redis-sessions==0.5.6 (推荐使用此版本) 创建一个django项目,新建一个booktes ...

  5. redis的linux安装

    1.下载安装包 [root@localhost opt]# yum install wget [root@localhost opt]# wget http://download.redis.io/r ...

  6. 使用在react hooks+antd ListView简单实现移动端长列表功能

    import React, { useState, useEffect } from "react" import { ListView } from "antd-mob ...

  7. 洛谷P1582 倒水 二进制的相关应用

    https://www.luogu.org/problem/P1582 #include<bits/stdc++.h> using namespace std; long long N,K ...

  8. linux交互执行命令,expect

    转载 http://donex.blog.51cto.com/2005970/834467 原文比较乱,只能参考 本地交互执行: 1. 修改shell#!/usr/bin/expectset USER ...

  9. 番外:如何克隆可刷新的PDB(Refreshable PDB)

    基于版本:19c (12.2.0.3) AskScuti 创建方法:克隆创建 对应路径:属于克隆.PDB类型为:Refreshable 相关系列请参考<Oracle创建PDB列表文章> 注 ...

  10. vue实现隔行换色,下拉菜单控制隔行换色的颜色

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...