用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

微信小程序之富文本解析(附源码和效果图)

Rolan 2019-8-16 00:41

示例效果图: 一、简介及说明 在小程序项目开发中,会遇到富文本编辑的内容,后台返回到小程序端无法解析,这时就需要一个插件来处理。 微信小程序没有提供webview等html解析,原展示类文本没有办法图文并茂的原生 ...

示例效果图:

一、简介及说明

小程序项目开发中,会遇到富文本编辑的内容,后台返回到小程序端无法解析,这时就需要一个插件来处理。 微信小程序没有提供webview等html解析,原展示类文本没有办法图文并茂的原生展示,wxParse主要目的就是弥补富文本解析空缺的问题。

插件由联盟网站DEV开发,开发者:icindy,最新版本请查看github地址:wxParse

二、 使用方法

1、下载wxParese文件,拷贝wxParse文件夹到自己的小程序项目中。

2、在项目文件中使用 (1)在需要使用的wxml文件中引入WxParse.wxml 示例:

<!--index.wxml-->
<import src="../../wxParse/wxParse.wxml" />
复制代码

(2)在当前页对应的js中引入wxParse.js 示例:

//index.js 
const WxParse = require('../../wxParse/wxParse.js');
复制代码

(3)使用template组件 在刚刚引入的wxml中插入组件,具体插入的位置是需要转换的地方。 示例:

<!--index.wxml-->
<import src="../../wxParse/wxParse.wxml" />
<view class="container">
  <view class='uinn'>
    <template is="wxParse" data="{{wxParseData:article.nodes}}" />
  </view>
</view>
复制代码

(4)在当前页的js中使用WxParse中的方法

//index.js
const WxParse = require('../../wxParse/wxParse.js');
Page({
  data: {
    
  }, 
  onLoad: function () {
    let that = this;
    let ceshi = 
    `<div>
			<span>请说出你喜欢的水果?</span>
			<ul>
				<li>苹果</li>
				<li>香蕉</li>
				<li>橙子</li>
			</ul>
		</div>`;
    WxParse.wxParse('article', 'html', ceshi, that, 5); 
  }, 
})
复制代码

参数说明:

示例代码已上传到GitHub上,可直接拷贝示例代码的wxParse文件使用,地址:wx-wxParese,欢迎start。

其它文章请访问:

鲜花
鲜花 (1)
鸡蛋
鸡蛋

刚表态过的朋友 (1 人)

分享至 : QQ空间
收藏
原作者: LemonYan 来自: 掘金