微信小程序开发——使用插件实现html代码解析

2025-10-20 15:02:59

1、下载插件:

点击文末参考资料中的下载地址打开页面后,如图,点击绿色按钮

微信小程序开发——使用插件实现html代码解析

2、点击“ Download ZIP”,下载插件

微信小程序开发——使用插件实现html代码解析

3、解压下载的压缩文件,找到wxParse文件夹

微信小程序开发——使用插件实现html代码解析

4、把文件夹中的wxParse文件夹复制粘贴到小程序根目录下,就完成插件的安装了

微信小程序开发——使用插件实现html代码解析

1、 脚本引入:

//在要使用wxParse的页面的脚本中引入WxParse模块

var WxParse = require('../../wxParse/wxParse.js');

微信小程序开发——使用插件实现html代码解析

2、数据绑定:

var that = this

var article = '<div>我是HTML代码<img src="http://static.e-mallchina.com/pic/product/brand/detail/hgds.jpg"></img></div>';    

WxParse.wxParse('article', 'html', article, that, 0); // 实例化对象

微信小程序开发——使用插件实现html代码解析

3、样式引入:

/*在对应的Wxss中引入WxParse.css,如果使用较多i,也可以直接在app.wxss中全局引入*/

@import "/wxParse/wxParse.wxss";

微信小程序开发——使用插件实现html代码解析

4、模板使用:

<!-- 引入模板 -->

<import src="../../wxParse/wxParse.wxml" />

<!--这里data中article为bindName -->

<template is="wxParse" data="{{wxParseData:article.nodes}}" />

微信小程序开发——使用插件实现html代码解析

5、OK,我们已经完美的实现了对html代码的解析

微信小程序开发——使用插件实现html代码解析

1、这个插件还支持固定格式的emoji的表情的解析

微信小程序开发——使用插件实现html代码解析

2

微信小程序开发——使用插件实现html代码解析

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢