小程序初学者分享第二弹：利用wxParse显示HTML/markdown富文本

1、微信小程序为我们提供了一个wxParse，通过它我们可以实现HTML以及markdown转wxml可视化
下载地址：https://github.com/icindy/wxParse（这是别人上传到github的，感谢）
2、我们先来看看效果，然后再说如何用这个wxParse以及其中需要注意的问题
 
效果还是很明显的，我的文章数据是在后台管理系统用markdown编写的，数据是存储在mysql上的，注意看小程序打印的日志，可以看到wxParse处理markdown的过程，如果有兴趣的可以深入研究下。

言归正传，下面介绍如何使用：

1、将下载下来的wxParse整个文件夹copy到你的项目下，如下图：
 
PS:一定要确保文件里的文件不缺少；
2、在使用的view引入wxParse.js
var WxParse = require('../../wxParse/wxParse.js');


3、在使用的Wxss中引入WxParse.css,可以在app.wxss
@import "/wxParse/wxParse.wxss";



4、数据绑定
getArticle: function (articleId) {
    var that = this;
    wx.request({
      url: getArticleDetailUrl,
      data: {
        openId: wx.getStorageSync('openid'),
        articleId: articleId
      },
      success: function (res) {
        if (res.data.code == 1) {
          var article = res.data.data;
          article.createTime = util.formatTime(new Date(article.createTime));
          that.setData({
            article: article
          });
          /**
          * WxParse.wxParse(bindName , type, data, target,imagePadding)
          * 1.bindName绑定的数据名(必填)
          * 2.type可以为html或者md(必填)
          * 3.data为传入的具体数据(必填)
          * 4.target为Page对象,一般为this(必填)
          * 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
          */
          WxParse.wxParse('content', 'html', article.html, that, 5);
        }
      }
    });
  }





4、模版引用
<view class="answer-content">
    <template is="wxParse" data="{{wxParseData:content.nodes}}" />
</view>


做到这里，基本上你的markdown文章就可以显示在小程序上了。
需要注意的一点是如果你的markdown文章里包含小表情emojis的时候，在将数据保存到数据库的时候，要注意将mysql的编码修改为utf8mb4，因为mysql的utf8编码的一个字符最多3个字节，但是一个emoji表情为4个字节，所以utf8不支持存储emoji表情。但是utf8的超集utf8mb4一个字符最多能有4字节，所以能支持emoji表情的存储。


具体的修改方式请查看这篇文章：mysql中支持emoji表情


今天的分享就这些了，最后请支持下我的公众号，请扫码关注，让我有动力继续写下去，谢谢

 

转载于:https://my.oschina.net/u/3705292/blog/1581338