微信小程序接入富文本编辑

微信小程序中比如活动说明，简介这样的图文介绍说明页面，后台通常配置成富文本编辑框，由后台直接输入内容，然后在小程序界面展现。但是富文本编辑提取到内容是html格式的，写法与小程序的wxml并不一致，那么怎么样才能做到富文本能够在小程序页面中显示呢？

有位大牛开发了一个模板叫作wxParse，可以直接引入小程序使用。

引入方式及使用方法

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代码

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代码

这类文章相信也有不少，这种组件的写法还是老式的小程序写法，小程序新版的组件写法已经跟现在不一样了，不知道这个插件的开发者以后会不会也转换为最新的方式。总之，现在小程序还是支持这种写法的。

该资讯来源于小程序资讯，更多开发教程请关注小程序开发教程

微信小程序接入富文本编辑相关推荐

微信支持环信_环信客户互动云v5.39已发布：支持微信小程序接入
环信客户互动云v5.39_产品更新说明发布日期:2018-11-06 客服模式质检中新增会话ID字段质检中新增会话ID字段,与历史会话中的会话ID对应,支持根据会话ID搜索质检会话,以及在质检详 ...
微信小程序接入第三方插件腾讯位置服务地图选点
微信小程序接入第三方插件腾讯位置服务地图选点 1.在小程序服务平台中添加"腾讯位置服务地图选点"插件 1.在小程序服务平台中添加"腾讯位置服务地图选点"插件微 ...
uni-app 微信小程序接入高德SDK
uni-app 微信小程序接入高德SDK 参考文档:https://lbs.amap.com/api/wx/gettingstarted 一.获取高德Key 配置高德key 二.获取高德key的操作步 ...
【物联网】微信小程序接入阿里云物联网平台
微信小程序接入阿里云物联网平台一阿里云平台端 1.登录阿里云阿里云物联网平台点击进入公共实例,之前没有的点进去申请 2.点击产品->创建产品 3.产品名称自定义,按项目选择类型,节点类型 ...
微信小程序接入关联微信公众号official-account方案总结
微信小程序接入关联微信公众号official-account方案总结需求描述: 最近在小程序项目中有这样的需求,在微信小程序里面显示出关联的微信公众号,让用户在小程序一步直达公众号. 解决方案: 第 ...
微信小程序接入emq
微信小程序接入emq 环境 emq v2.3.0 lnmp 微信开发工具 ubutun 16.04 1. 下载demo 微信小程序 MQTT 接入Demo下载地址下载完成后,打开工程,修改index ...
小程序（二十六）微信小程序解析富文本的几种方式
微信小程序解析富文本html大概有两种方式(我发现的). 两种方法,各有各的优缺点. 一:使用小程序内置标签rich-text 这个标签解析的富文本会保留你在pc端编辑的样式,也就是说,你在pc端编辑 ...
微信小程序接入微信支付（二）：后台调用统一下单接口
微信统一支付官方文档:https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=9_1 因该接口需要商户系统中自己的订单编号,笔者先 ...
微信小程序端富文本输入
有个需求是用户端也就是小程序端,需要可以富文本发布文章. 示例: 1. 下载组件-微信小程序editor富文本编辑器组件 2.放在小程序自定义组件文件夹下 3.需要用到的页面引入该组件 "u ...

微信小程序接入富文本编辑

微信小程序接入富文本编辑相关推荐

最新文章

热门文章