微信小程序 使用towxml解析html流程及踩坑记录

        towxml相对于wxParse还是有一定优势改核慎的，首先一些废弃或者过新的标签wxParse是不能解析的，会导致整个页面不能显示，其次 towxml对于界面的氏册排版优化是比较美观的，对于开发者还算比较友好，个人是建议在wxParse没有完善之前使用towxml这个库来解析html以及markdown格式。

我这里核敬使用的是绝对路径，各位同学根据自己的存放路径修改

这里模板名称固定，data固定写法为{{...解析后的变量名}}

原理（个人理解）：

- 利用了微信小程序中的<template"/>标签

- 在模板wxml中已经按照正常html文档的孝基格式，将wxml中的<template"/>扩展，达到解析html的效果

- 都是小程序不能插巧誉谨入dom的锅

基本使用方法：

1. Copy文件夹wxParse

- wxParse/

-wxParse.js(必须存在)

-html2json.js(必须存在)

-htmlparser.js(必须存在)

-showdown.js(必须虚键存在)

-wxDiscode.js(必须存在)

-wxParse.wxml(必须存在)

-wxParse.wxss(必须存在)

-emojis(可选)

2. 引入必要文件

//在使用的View中引入WxParse模块

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

//在使用的Wxss中引入WxParse.css,可以在app.wxss

@import "/wxParse/wxParse.wxss"

3. 数据绑定

var article = '<div>我是HTML代码</div>'

/**

* WxParse.wxParse(bindName , type, data, target,imagePadding)

* 1.bindName绑定的数据名(必填)

* 2.type可以为html或者md(必填)

* 3.data为传入的具体数据(必填)

* 4.target为Page对象,一般为this(必填)

* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)

*/

var that = this

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

4. 模版引用

//这里data中article为bindName

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

微信小程序的文本，要具有长按复制功能，必须满足两个条件：

1.小程键亏序文本要在 标签内；

2.小程序 标签要有 selectable 属性。

例如：

<text selectable='true'>文本</text>

1

1

下面一个例子是，解决小程序富文本组件 WxParse 不能长按选择的问题。在 wxParse.wxml 中修改:

意思是在wxParse源码文件下 的wxParse文件下的wxParse.wxml

-为要修改的代码行

+为修改后的代码行

<template name="WxEmojiView">

<view class="WxEmojiView wxParse-inline" style="{{item.styleStr}}">

<block wx:for="{{item.textArray}}" wx:key="">

- <block class="{{item.text == '\\n' ? 'wxParse-hide':''}}" wx:if="{{item.node == 'text'}}">{{item.text}}</block>竖搜

+ <block class="{{item.text == '\\n' ? 'wxParse-hide':''}}" wx:if="{{item.node == 'text'}}">

+<text selectable="true">{{item.text}}</text>

+ </block>

<block wx:elif="{{item.node == 'element'}}">稿纤神

<image class="wxEmoji" src="{{item.baseSrc}}{{item.text}}" />

</block>

</view>

</template>

1

2

3

4

5

6

7

8

9

10

11

12

13

1

2

3

4

5

6

7

8

9

10

11

12

13

微信小程序selectable='true'无复制效果解决

<text selectable></text>或<text selectable='{{true}}'>

---