e">
+ </view>
+ <view class="{{item.classStr}} wxParse-li-text">
+ <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">
+ <template is="wxParse12" data="{{item}}" />
+ </block>
+ </view>
+ </view>
+ </view>
+ </block>
+
+ <!--video类型-->
+ <block wx:elif="{{item.tag == 'video'}}">
+ <template is="wxParseVideo" data="{{item}}" />
+ </block>
+
+ <!--img类型-->
+ <block wx:elif="{{item.tag == 'img'}}">
+ <template is="wxParseImg" data="{{item}}" />
+ </block>
+
+ <!--a类型-->
+ <block wx:elif="{{item.tag == 'a'}}">
+ <view bindtap="wxParseTagATap" class="wxParse-inline {{item.classStr}} wxParse-{{item.tag}}" data-src="{{item.attr.href}}" style="{{item.styleStr}}" hover-class="wxParse-a-hover">
+ <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">
+ <template is="wxParse12" data="{{item}}" />
+ </block>
+ </view>
+ </block>
+
+ <block wx:elif="{{item.tag == 'br'}}">
+ <template is="WxParseBr"></template>
+ </block>
+ <!--其他块级标签-->
+ <block wx:elif="{{item.tagType == 'block'}}">
+ <view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.styleStr}}">
+ <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">
+ <template is="wxParse12" data="{{item}}" />
+ </block>
+ </view>
+ </block>
+
+ <!--内联标签-->
+ <view wx:else class="{{item.classStr}} wxParse-{{item.tag}} wxParse-{{item.tagType}}" style="{{item.styleStr}}">
+ <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">
+ <template is="wxParse12" data="{{item}}" />
+ </block>
+ </view>
+
+ </block>
+
+ <!--判断是否是文本节点-->
+ <block wx:elif="{{item.node == 'text'}}">
+ <!--如果是,直接进行-->
+ <template is="WxEmojiView" data="{{item}}" />
+ </block>
+
+</template>
@@ -0,0 +1,270 @@ |
||
| 1 |
+/** |
|
| 2 |
+ * author: Di (微信小程序开发工程师) |
|
| 3 |
+ * organization: WeAppDev(微信小程序开发论坛)(http://weappdev.com) |
|
| 4 |
+ * 垂直微信小程序开发交流社区 |
|
| 5 |
+ * |
|
| 6 |
+ * github地址: https://github.com/icindy/wxParse |
|
| 7 |
+ * |
|
| 8 |
+ * for: 微信小程序富文本解析 |
|
| 9 |
+ * detail : http://weappdev.com/t/wxparse-alpha0-1-html-markdown/184 |
|
| 10 |
+ */ |
|
| 11 |
+ |
|
| 12 |
+.wxParse {
|
|
| 13 |
+ margin: 0 5px; |
|
| 14 |
+ font-family: Helvetica, sans-serif; |
|
| 15 |
+ font-size: 28rpx; |
|
| 16 |
+ color: #666; |
|
| 17 |
+ line-height: 1.8; |
|
| 18 |
+} |
|
| 19 |
+view {
|
|
| 20 |
+ word-break: break-all; |
|
| 21 |
+} |
|
| 22 |
+.wxParse-inline {
|
|
| 23 |
+ display: inline; |
|
| 24 |
+ margin: 0; |
|
| 25 |
+ padding: 0; |
|
| 26 |
+} |
|
| 27 |
+/*//标题 */ |
|
| 28 |
+.wxParse-div {
|
|
| 29 |
+ margin: 0; |
|
| 30 |
+ padding: 0; |
|
| 31 |
+} |
|
| 32 |
+.wxParse-h1 {
|
|
| 33 |
+ font-size: 2em; |
|
| 34 |
+ margin: 0.67em 0; |
|
| 35 |
+} |
|
| 36 |
+.wxParse-h2 {
|
|
| 37 |
+ font-size: 1.5em; |
|
| 38 |
+ margin: 0.75em 0; |
|
| 39 |
+} |
|
| 40 |
+.wxParse-h3 {
|
|
| 41 |
+ font-size: 1.17em; |
|
| 42 |
+ margin: 0.83em 0; |
|
| 43 |
+} |
|
| 44 |
+.wxParse-h4 {
|
|
| 45 |
+ margin: 1.12em 0; |
|
| 46 |
+} |
|
| 47 |
+.wxParse-h5 {
|
|
| 48 |
+ font-size: 0.83em; |
|
| 49 |
+ margin: 1.5em 0; |
|
| 50 |
+} |
|
| 51 |
+.wxParse-h6 {
|
|
| 52 |
+ font-size: 0.75em; |
|
| 53 |
+ margin: 1.67em 0; |
|
| 54 |
+} |
|
| 55 |
+ |
|
| 56 |
+.wxParse-h1 {
|
|
| 57 |
+ font-size: 18px; |
|
| 58 |
+ font-weight: 400; |
|
| 59 |
+ margin-bottom: 0.9em; |
|
| 60 |
+} |
|
| 61 |
+.wxParse-h2 {
|
|
| 62 |
+ font-size: 16px; |
|
| 63 |
+ font-weight: 400; |
|
| 64 |
+ margin-bottom: 0.34em; |
|
| 65 |
+} |
|
| 66 |
+.wxParse-h3 {
|
|
| 67 |
+ font-weight: 400; |
|
| 68 |
+ font-size: 15px; |
|
| 69 |
+ margin-bottom: 0.34em; |
|
| 70 |
+} |
|
| 71 |
+.wxParse-h4 {
|
|
| 72 |
+ font-weight: 400; |
|
| 73 |
+ font-size: 14px; |
|
| 74 |
+ margin-bottom: 0.24em; |
|
| 75 |
+} |
|
| 76 |
+.wxParse-h5 {
|
|
| 77 |
+ font-weight: 400; |
|
| 78 |
+ font-size: 13px; |
|
| 79 |
+ margin-bottom: 0.14em; |
|
| 80 |
+} |
|
| 81 |
+.wxParse-h6 {
|
|
| 82 |
+ font-weight: 400; |
|
| 83 |
+ font-size: 12px; |
|
| 84 |
+ margin-bottom: 0.04em; |
|
| 85 |
+} |
|
| 86 |
+ |
|
| 87 |
+.wxParse-h1, |
|
| 88 |
+.wxParse-h2, |
|
| 89 |
+.wxParse-h3, |
|
| 90 |
+.wxParse-h4, |
|
| 91 |
+.wxParse-h5, |
|
| 92 |
+.wxParse-h6, |
|
| 93 |
+.wxParse-b, |
|
| 94 |
+.wxParse-strong {
|
|
| 95 |
+ font-weight: bolder; |
|
| 96 |
+} |
|
| 97 |
+ |
|
| 98 |
+.wxParse-i, |
|
| 99 |
+.wxParse-cite, |
|
| 100 |
+.wxParse-em, |
|
| 101 |
+.wxParse-var, |
|
| 102 |
+.wxParse-address {
|
|
| 103 |
+ font-style: italic; |
|
| 104 |
+} |
|
| 105 |
+.wxParse-pre, |
|
| 106 |
+.wxParse-tt, |
|
| 107 |
+.wxParse-code, |
|
| 108 |
+.wxParse-kbd, |
|
| 109 |
+.wxParse-samp {
|
|
| 110 |
+ font-family: monospace; |
|
| 111 |
+} |
|
| 112 |
+.wxParse-pre {
|
|
| 113 |
+ white-space: pre; |
|
| 114 |
+} |
|
| 115 |
+.wxParse-big {
|
|
| 116 |
+ font-size: 1.17em; |
|
| 117 |
+} |
|
| 118 |
+.wxParse-small, |
|
| 119 |
+.wxParse-sub, |
|
| 120 |
+.wxParse-sup {
|
|
| 121 |
+ font-size: 0.83em; |
|
| 122 |
+} |
|
| 123 |
+.wxParse-sub {
|
|
| 124 |
+ vertical-align: sub; |
|
| 125 |
+} |
|
| 126 |
+.wxParse-sup {
|
|
| 127 |
+ vertical-align: super; |
|
| 128 |
+} |
|
| 129 |
+.wxParse-s, |
|
| 130 |
+.wxParse-strike, |
|
| 131 |
+.wxParse-del {
|
|
| 132 |
+ text-decoration: line-through; |
|
| 133 |
+} |
|
| 134 |
+/*wxparse-自定义个性化的css样式*/ |
|
| 135 |
+/*增加video的css样式*/ |
|
| 136 |
+.wxParse-strong, |
|
| 137 |
+.wxParse-s {
|
|
| 138 |
+ display: inline; |
|
| 139 |
+} |
|
| 140 |
+.wxParse-a {
|
|
| 141 |
+ color: #576b95; |
|
| 142 |
+ text-decoration: underline; |
|
| 143 |
+ word-break: break-all; |
|
| 144 |
+ overflow: auto; |
|
| 145 |
+} |
|
| 146 |
+ |
|
| 147 |
+.wxParse-a-hover {
|
|
| 148 |
+ opacity: 0.8; |
|
| 149 |
+} |
|
| 150 |
+ |
|
| 151 |
+.wxParse-video {
|
|
| 152 |
+ text-align: center; |
|
| 153 |
+ margin: 10px 0; |
|
| 154 |
+} |
|
| 155 |
+ |
|
| 156 |
+.wxParse-video-video {
|
|
| 157 |
+ width: 100%; |
|
| 158 |
+} |
|
| 159 |
+ |
|
| 160 |
+.wxParse-img {
|
|
| 161 |
+ /*background-color: #efefef;*/ |
|
| 162 |
+ overflow: hidden; |
|
| 163 |
+} |
|
| 164 |
+ |
|
| 165 |
+.wxParse-blockquote {
|
|
| 166 |
+ margin: 0; |
|
| 167 |
+ padding: 10px 0 10px 5px; |
|
| 168 |
+ font-family: Courier, Calibri, '宋体'; |
|
| 169 |
+ background: #f5f5f5; |
|
| 170 |
+ border-left: 3px solid #dbdbdb; |
|
| 171 |
+} |
|
| 172 |
+ |
|
| 173 |
+.wxParse-code, |
|
| 174 |
+.wxParse-wxxxcode-style {
|
|
| 175 |
+ display: inline; |
|
| 176 |
+ background: #f5f5f5; |
|
| 177 |
+} |
|
| 178 |
+.wxParse-ul {
|
|
| 179 |
+ margin: 20rpx 10rpx; |
|
| 180 |
+} |
|
| 181 |
+ |
|
| 182 |
+.wxParse-li, |
|
| 183 |
+.wxParse-li-inner {
|
|
| 184 |
+ display: flex; |
|
| 185 |
+ align-items: baseline; |
|
| 186 |
+} |
|
| 187 |
+.wxParse-li-text {
|
|
| 188 |
+ align-items: center; |
|
| 189 |
+} |
|
| 190 |
+ |
|
| 191 |
+.wxParse-li-circle {
|
|
| 192 |
+ display: inline-flex; |
|
| 193 |
+ width: 6px; |
|
| 194 |
+ height: 6px; |
|
| 195 |
+ border-radius: 3px; |
|
| 196 |
+ background-color: #333; |
|
| 197 |
+ margin-right: 5px; |
|
| 198 |
+} |
|
| 199 |
+ |
|
| 200 |
+.wxParse-li-square {
|
|
| 201 |
+ display: inline-flex; |
|
| 202 |
+ width: 10rpx; |
|
| 203 |
+ height: 10rpx; |
|
| 204 |
+ background-color: #333; |
|
| 205 |
+ margin-right: 5px; |
|
| 206 |
+} |
|
| 207 |
+.wxParse-li-ring {
|
|
| 208 |
+ display: inline-flex; |
|
| 209 |
+ width: 10rpx; |
|
| 210 |
+ height: 10rpx; |
|
| 211 |
+ border: 2rpx solid #333; |
|
| 212 |
+ border-radius: 50%; |
|
| 213 |
+ background-color: #fff; |
|
| 214 |
+ margin-right: 5px; |
|
| 215 |
+} |
|
| 216 |
+ |
|
| 217 |
+/*.wxParse-table{
|
|
| 218 |
+ width: 100%; |
|
| 219 |
+ height: 400px; |
|
| 220 |
+} |
|
| 221 |
+.wxParse-thead,.wxParse-tfoot,.wxParse-tr{
|
|
| 222 |
+ display: flex; |
|
| 223 |
+ flex-direction: row; |
|
| 224 |
+} |
|
| 225 |
+.wxParse-th,.wxParse-td{
|
|
| 226 |
+ display: flex; |
|
| 227 |
+ width: 580px; |
|
| 228 |
+ overflow: auto; |
|
| 229 |
+}*/ |
|
| 230 |
+ |
|
| 231 |
+.wxParse-u {
|
|
| 232 |
+ text-decoration: underline; |
|
| 233 |
+} |
|
| 234 |
+.wxParse-hide {
|
|
| 235 |
+ display: none; |
|
| 236 |
+} |
|
| 237 |
+.WxEmojiView {
|
|
| 238 |
+ align-items: center; |
|
| 239 |
+} |
|
| 240 |
+.wxEmoji {
|
|
| 241 |
+ width: 16px; |
|
| 242 |
+ height: 16px; |
|
| 243 |
+} |
|
| 244 |
+.wxParse-tr {
|
|
| 245 |
+ display: flex; |
|
| 246 |
+ border-right: 1px solid #e0e0e0; |
|
| 247 |
+ border-bottom: 1px solid #e0e0e0; |
|
| 248 |
+ border-top: 1px solid #e0e0e0; |
|
| 249 |
+} |
|
| 250 |
+.wxParse-th, |
|
| 251 |
+.wxParse-td {
|
|
| 252 |
+ flex: 1; |
|
| 253 |
+ padding: 5px; |
|
| 254 |
+ font-size: 28rpx; |
|
| 255 |
+ border-left: 1px solid #e0e0e0; |
|
| 256 |
+ word-break: break-all; |
|
| 257 |
+} |
|
| 258 |
+.wxParse-td:last {
|
|
| 259 |
+ border-top: 1px solid #e0e0e0; |
|
| 260 |
+} |
|
| 261 |
+.wxParse-th {
|
|
| 262 |
+ background: #f0f0f0; |
|
| 263 |
+ border-top: 1px solid #e0e0e0; |
|
| 264 |
+} |
|
| 265 |
+.wxParse-del {
|
|
| 266 |
+ display: inline; |
|
| 267 |
+} |
|
| 268 |
+.wxParse-figure {
|
|
| 269 |
+ overflow: hidden; |
|
| 270 |
+} |
@@ -0,0 +1,10 @@ |
||
| 1 |
+var filter = function (text) {
|
|
| 2 |
+ if (text) {
|
|
| 3 |
+ var pattern = '\\\\n'; |
|
| 4 |
+ var target = '\n'; |
|
| 5 |
+ var reg = getRegExp(pattern, 'g'); |
|
| 6 |
+ return text.replace(reg, target); |
|
| 7 |
+ } |
|
| 8 |
+}; |
|
| 9 |
+ |
|
| 10 |
+module.exports.filter = filter; |