微信小程序使用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=" ...
- 小程序开发运营必看:微信小程序平台运营规范
一.原则及相关说明 微信最核心的价值,就是连接——提供一对一.一对多和多对多的连接方式,从而实现人与人.人与智能终端.人与社交化娱乐.人与硬件设备的连接,同时连接服务.资讯.商业. 微信团队一 ...
随机推荐
- 利用MongoDB进行地理坐标查询
BS的应用在生活中已经非常常见,我们打车,叫外卖,查个地图之类的都会查询附近的相关坐标位置,mongodb提供了原生的二维地图查询,极大地方便了大家的开发. 假定我们有一个定义了位置信息的集合loca ...
- Wannafly Camp 2020 Day 2J 邦邦的2-SAT模板
#include <bits/stdc++.h> using namespace std; int main() { int n; cin>>n; cout<<n& ...
- vue学习指南:第十五篇(详细) - Vuex
Vuex 一.基础 1. Vuex 相当于 vue的数据仓库 2. Vuex 是 vue 的状态管理工具 3. Vuex中的 state 只能通过mutations 改变 4. Vuex很适合做购物车 ...
- OpenGL 编程指南 (3.2)
1.帧缓冲对象 帧缓冲对象对于离屏渲染.纹理贴图更新.缓存乒乓技术(buffer ping-pongqing,GPGPU的一种数据传输方式)的实现意义非凡,它减少了大量的数据拷贝工作. 建立帧缓冲需要 ...
- 页面回显与URL模板映射
一.页面回显 对于需要返回界面的数据,可以将后台封装好的数据回显至原始jsp界面中. 举个例子: User.java package com.zk.data; public class User { ...
- 【Python】数值运算操作符
- Tomcat解压版-环境配置
[问题]Tomcat解压版在本地后,双击双击startup.bat,闪退 [解决办法] 1.在已解压的tomcat的bin文件夹下找到startup.bat,右击->编辑.在文件头加入下面 ...
- springboot11(springboot-redis)
一.Redis集群简介 1.RedisCluster概念 Redis的分布式解决方案,在3.0版本后推出的方案,有效地解决了Redis分布式的需求,当一个服务宕机可以快速的切换到另外一个服务.redi ...
- JS高级---函数作为返回值使用拓展,排序
函数作为返回值使用拓展,排序 排序, 每个文件都有名字,大小,时间,都可以按照某个属性的值进行排序 函数作为返回值 函数作为参数 //排序,每个文件都有名字,大小,时间,都可以按照某个属性的值进行排序 ...
- python面试的100题(8)
企业面试题 15.python新式类和经典类的区别? (在Python 2及以前的版本中,由任意内置类型派生出的类(只要一个内置类型位于类树的某个位置),都属于“新式类”,都会获得所有“新式类”的特性 ...