微信小程序使用wxParse实现接入富文本编辑
简介
微信小程序中比如活动说明,简介这样的图文介绍说明页面,后台通常配置成富文本编辑框,由后台直接输入内容,然后在小程序界面展现。
但是富文本编辑提取到内容是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实现接入富文本编辑的更多相关文章
- 微信小程序 使用wxParse解析html
微信小程序 加载 HTML 标签:https://blog.csdn.net/zclengendary/article/details/54312030 微信小程序 使用wxParse解析html:h ...
- 微信小程序使用wxParse解析html
最近项目上遇到在微信小程序里需要显示新闻内容,新闻内容是通过接口读取的服务器中的富文本内容,是html格式的,小程序默认是不支持html格式的内容显示的,那我们需要显示html内容的时候,就可以通过w ...
- $微信小程序开发实践点滴——接入Bmob后端云
Bmob后端云官网:http://www.bmob.cn/ 微信公众平台官网:https://mp.weixin.qq.com/ 微信小程序官方开发文档:https://mp.weixin.qq.co ...
- 微信小程序使用wxParse,解决图片显示路径问题
我们经常用到发布文章,用的是UEditor百度富文本编辑器,方便排版,存储的也是html代码,这样小程序解析出来的也是排版的样式,但是使用wxParse解析html的时候,因为存储的是图片的相对路径, ...
- 小程序html转wxml,微信小程序用wxParse解析html
1.首先下载 wxParse脚本,到https://github.com/icindy/wxParse下载,将wxParse文件夹放置到小程序根目录,即跟pages同级目录 2.在样式页面 wxss ...
- [辅助软件] 微信小程序开发资源汇总 接入指南
https://github.com/justjavac/awesome-wechat-weapp https://github.com/justjavac/awesome-wechat-weapp ...
- 微信小程序学习指南
作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
- 微信小程序开发——模板中加载html代码
最新方法可以使用微信小程序提供的 rich-text (富文本)组件直接写解析html,详见 rich-text: <rich-text class='f13 c_9' nodes=" ...
- 小程序开发运营必看:微信小程序平台运营规范
一.原则及相关说明 微信最核心的价值,就是连接——提供一对一.一对多和多对多的连接方式,从而实现人与人.人与智能终端.人与社交化娱乐.人与硬件设备的连接,同时连接服务.资讯.商业. 微信团队一 ...
随机推荐
- python面试的100题(18)
函数 52.python常见的列表推导式? 列表推导式书写形式: [表达式 for 变量 in 列表] 或者 [表达式 for 变量 in 列表 if 条件] 参考地址:https://www.cnb ...
- 马走日的解法(dfs)
马在中国象棋以日字形规则移动. 请编写一段程序,给定n*m大小的棋盘,以及马的初始位置(x,y),要求不能重复经过棋盘上的同一个点,计算马可以有多少途径遍历棋盘上的所有点. Input 第一行为整数T ...
- jdk8-》joining、groupingBy、summarizingInt函数
拼接函数 Collectors.joining // 3种重载方法 Collectors.joining() Collectors.joining("拼接符") Collector ...
- HTML的学习结构
HTML的学习结构 HTML的背景 HTML的创建 HTML的网页基本结构 HTML的基本标签 HTML的图像标签 HTML的链接标签 HTML的列表标签和表格标签 HTML的媒体元素(视频+音频) ...
- winform常用控件介绍
1.窗体 12.Label 控件 33.TextBox 控件 44.RichTextBox控件 55.NumericUpDown 控件 76.Button 控件 77.GroupBox 控件 78.R ...
- 获取 Android APP 版本信息工具类(转载)
获取 Android APP 版本信息工具类 获取手机APP版本信息工具类 1.获取版本名称 2.获取版本号 3.获取App的名称 package com.mingyue.nanshuibeidiao ...
- Pytest学习6-跳过或xfail失败的用例
Skip跳过用例 跳过(Skip)指,你希望如果某些条件得到满足你的测试用例才执行,否则Pytest应该完全跳过运行该用例 1. 跳过测试用例的最简单方法是使用skip装饰器标记它,可以传递一个可选的 ...
- VS2017连接MySQL数据库
vs默认无法直接连接mysql,需要我们自己配置环境. 1.下载mysql-installer-community-8.0.18.0.msi 下载地址:https://dev.mysql.com/do ...
- Hibernate项目的基本步骤和一些错误提示
以数据库中有一张user表为例: 1.编写POJO持久化类User.javaPOJO(Plain Old Java Objects),简单的Java对象.一个POJO类不用继承任何类,也无须实现任何接 ...
- 01-Java基本语法【前言、入门程序、常量、变量】
重点知识记录: 1.java语言是美国Sun公司在1995年推出的高级编程语言. 2.java语言主要应用在互联网程序的开发领域. 3.二进制转换 1)十进制数据转换成二进制数据:使用除以2获取余数的 ...