微信小程序开发——使用wxParse插件实现html代码的支持

前言：

大家都知道，无论是微信小程序还是支付宝小程序都不支持html代码的展示的，甚至说你想贴个纯html代码做demo都不方便，更不用说解析html了。那么怎么解决这个问题呢？

解决方案：

使用WxParse插件（微信小程序富文本解析组件）就能解决这个问题。本来这个插件是专为微信小程序设计的，但是了解过支付宝小程序开发的同学们应该能猜到，这个插件应该也支持支付宝小程序的（原因就不说了，大家懂的）。事实证明，这个插件只需要做适当修改，就能给支付宝小程序使用。

插件安装：

https://github.com/icindy/wxParse

1. 下载文件后，解压压缩文件：

2. 把文件夹中的wxParse文件夹复制粘贴到小程序根目录下：

插件使用：

1. 脚本引入：

//在要使用wxParse的页面的脚本中引入WxParse模块
var WxParse = require('../../wxParse/wxParse.js');

2. 数据绑定：

    var that = this
    /**
     * WxParse.wxParse(bindName , type, data, target,imagePadding)
     * 1.bindName绑定的数据名(必填)
     * 2.type可以为html或者md(必填)
     * 3.data为传入的具体数据(必填)
     * 4.target为Page对象,一般为this(必填)
     * 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
     */
    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); // 实例化对象

3. 样式引入：

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

4. 模板使用：

<!-- 引入模板 -->
<import src="../../wxParse/wxParse.wxml" />
<!--这里data中article为bindName -->
<template is="wxParse" data="{{wxParseData:article.nodes}}" />

然后，重新编译就可以了：

注意事项：

这个插件其实也就是做了一些转换工作，把html代码转换成小程序自己的一些组件进行展示。经验证如果在html代码中直接写行内样式的话，可能会被插件的默认样式覆盖而不生效，这个时候就可以看下编译后的wxml代码，针对对应的标签进行样式设置就好了。

高级用法：

1. 支持emojis小表情：

示例代码：

    /**
     * WxParse.emojisInit(reg,baseSrc,emojis)
     * 1.reg，如格式为[00]=>赋值 reg='[]'
     * 2.baseSrc,为存储emojis的图片文件夹
     * 3.emojis,定义表情键值对
     */
    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 emojis = `
      <div>
        <h3>2. 支持emojis小表情</h3>
        <div style="margin-top:5px;">
            <p>这里可以解析出固定格式的emoji的表情</p>
            <p>[00][01][02][03][04][05][06][07][08][09]</p>
        </div>
      </div>
    `
    WxParse.wxParse('emojis', 'html', emojis, that, 0); // 实例化对象

    <!-- 引入模板 -->
    <import src="../../wxParse/wxParse.wxml" />
    <template is="wxParse" data="{{wxParseData:article.nodes}}" />

微信小程序开发——使用wxParse插件实现html代码的支持

猜你喜欢