前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >微信小程序插件wxParse的使用

微信小程序插件wxParse的使用

作者头像
越陌度阡
发布于 2020-11-26 07:03:32
发布于 2020-11-26 07:03:32
1.5K00
代码可运行
举报
运行总次数:0
代码可运行

由于微信小程序不支持后台富文本编辑器编辑的html,需要使用wxParse 这个插件来解析,下面介绍一下这个插件的使用方法。

1. 下载插件

在GigHub上面找到插件Demo,地址为 https://github.com/icindy/wxParse,把Demo里面的wxParse目录拷贝到项目里面.

2. 在当前页面的JS里引入wxParse.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var WxParse = require('../../wxParse/wxParse.js');
Page({
    data: {},
    onLoad: function() {
        var that = this;
        // 映射表情包
        WxParse.emojisInit('[]', "/wxParse/emojis/", {
            "00": "00.gif",
            "01": "01.gif",
            "02": "02.gif",
            "03": "03.gif",
            "04": "04.gif",
            "05": "05.gif",
            "06": "06.gif",
            "07": "07.gif",
            "08": "08.gif",
            "09": "09.gif",
            "09": "09.gif",
            "10": "10.gif",
            "11": "11.gif",
            "12": "12.gif",
            "13": "13.gif",
            "14": "14.gif",
            "15": "15.gif",
            "16": "16.gif",
            "17": "17.gif",
            "18": "18.gif",
            "19": "19.gif",
        });

        var article = `<div>从后端获取的HTML格式文件</div>`;

        WxParse.wxParse('article', 'html', article, that, 5);
        
        // WxParse.wxParse(bindName, type, data, target, imagePadding);
        // bindName绑定的数据名(必填)
        // type可以为html或者md(必填)
        // data为传入的具体数据(必填)
        // target为Page对象, 一般为this(必填)
        // imagePadding为当图片自适应是左右的单一padding(默认为0, 可选)

    }


})

3. 在全局app.wxss引入wxParse.wxss

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
@import "wxParse/wxParse.wxss";

4. 在当前页面wxml中引入wxParse.wxml

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<import src="../../wxParse/wxParse.wxml"/> 

<view class="wxParse">
    <!-- 这里data中article为bindName -->
    <template is="wxParse" data="{{wxParseData:article.nodes}}"/>
</view>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019/07/06 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验