小程序的四次元口袋：wxParse富文本解析组件的使用、wxs的引入等

 

wxParse富文本组件的使用

 在我们使用小程序时，不可避免的需要使用富文本解析，而原生小程序的功能有限，这时候我们就可以借助于开源的wxParse富文本解析组件。富文本编辑提取到内容是html格式的，写法与小程序的wxml并不一致，那么怎么样才能做到富文本能够在小程序页面中显示呢？

 解决办法

有位大牛开发了一个模板叫作wxParse，可以直接引入小程序使用。下面把大牛的github地址贴上来：https://github.com/icindy/wxParse

 引入方式及使用方法

先到Github下载wxParse组件库文件，将其放在微信小程序项目的根目录下。

然后进行引用：

index.wxml文件

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

index.wxss文件

@import "../../../components/wxParse/wxParse.wxss";
page{
  width: 100%;
  height: 100%;
  background: #e4382e;
  overflow: auto;
}

index.js文件

//获取应用实例
const app = getApp()
//引入wxParse
var WxParse = require('../../../components/wxParse/wxParse.js');

Page({

  /**
   * 页面的初始数据
   */
  data: {
    
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.request({
      url: app.globalData.subDomain + '/GetActivityInfo',     
      data: {
        token: app.globalData.token,
        activity: that.data.activityId
      },
      method: 'POST',
      success: function(res){ 
        //获取html代码      
        that.setData({
          article: unescape(res.data.activity.aintroduct)
        })
        WxParse.wxParse('article', 'html', that.data.article, that, 5);
    
      }
    })
    
    
  }

注意:

   第一点是在page函数之前引入wxParse

   第二点是在获取到html后执行

   第三点是当富文本对html进行解析时，可能出现空格、换行无法解析时。记得处理：

将
str = str.replace(/ /g, ' ');
更改为：
str = str.replace(/ /g, '\xa0');

 

 WxParse.wxParse('article', 'html', that.data.article, that, 5)

    其中的article就是获取到的html代码

至此wxParse引用介绍完毕。

 

wxs文件的引用

wxml文件中不能引用js文件但是可以引用wxs文件。WXS 代码可以编写在 wxml 文件中的 <wxs> 标签内，或以 .wxs 为后缀名的文件内。

模块

每一个 .wxs 文件和 <wxs> 标签都是一个单独的模块。

每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见。

一个模块要想对外暴露其内部的私有变量与函数，只能通过 module.exports 实现。

.wxs 文件

在微信开发者工具里面，右键可以直接创建 .wxs 文件，在其中直接编写 WXS 脚本。

comm.wxs

// /pages/comm.wxs
 
var bar = function(d) {
  return d;
}
module.exports = {
  bar: bar
};

comm.wxml

<!-- page/index/index.wxml -->
 
<wxs src="./../tools.wxs" module="tools" />
<view> {{tools.msg}} </view>
<view> {{tools.bar}} </view>