wxParse.vue 56 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211
  1. <template>
  2. <view>
  3. <template name="wxParseVideo">
  4. <view :class="item.classStr + ' wxParse-' + item.tag" :style="item.styleStr">
  5. <video :class="item.classStr + ' wxParse-' + item.tag + '-video'" :src="item.attr.src"></video>
  6. </view>
  7. </template>
  8. <template name="wxParseImg">
  9. <image
  10. :class="item.classStr + ' wxParse-' + item.tag"
  11. :data-from="item.from"
  12. :data-src="item.attr.src"
  13. :data-idx="item.imgIndex"
  14. :src="item.attr.src"
  15. mode="aspectFit"
  16. @load="wxParseImgLoad"
  17. @tap="wxParseImgTap"
  18. :style="'width:' + item.width + 'px;height:' + item.height + 'px;' + item.attr.style"
  19. />
  20. </template>
  21. <!-- template对应的原始代码,为保证正常显示,已对其进行隐藏。 -->
  22. <block name="WxEmojiView" v-if="false">
  23. <view class="WxEmojiView wxParse-inline" :style="item.styleStr">
  24. <block :wx:for="item.textArray" wx:key="key">
  25. <block :class="item.text == '\\n' ? 'wxParse-hide' : ''" :wx:if="item.node == 'text'">{{ item.text }}</block>
  26. <block :wx:elif="item.node == 'element'"><image class="wxEmoji" :src="item.baseSrc + item.text" /></block>
  27. </block>
  28. </view>
  29. </block>
  30. <template name="wxParse">
  31. <block :wx:for="wxParseData" wx:key="key">
  32. <!-- <template is="wxParse0" :data="item"/> -->
  33. <mp-html :content="item"></mp-html>
  34. </block>
  35. </template>
  36. <template name="wxParse0">
  37. <block :wx:if="item.node == 'element'">
  38. <block :wx:if="item.tag == 'button'">
  39. <button type="default" size="mini">
  40. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  41. <!-- <template is="wxParse1" :data="item"/> -->
  42. <mp-html :content="item"></mp-html>
  43. </block>
  44. </button>
  45. </block>
  46. <block :wx:elif="item.tag == 'li'">
  47. <view :class="item.classStr + ' wxParse-li'">
  48. <view :class="item.classStr + ' wxParse-li-inner'">
  49. <view :class="item.classStr + ' wxParse-li-text'"><view :class="item.classStr + ' wxParse-li-circle'"></view></view>
  50. <view :class="item.classStr + ' wxParse-li-text'">
  51. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  52. <!-- <template is="wxParse1" :data="item"/> -->
  53. <mp-html :content="item"></mp-html>
  54. </block>
  55. </view>
  56. </view>
  57. </view>
  58. </block>
  59. <block :wx:elif="item.tag == 'video'">
  60. <!-- <template is="wxParseVideo" :data="item"/> -->
  61. <mp-html :content="item"></mp-html>
  62. </block>
  63. <block :wx:elif="item.tag == 'img'">
  64. <!-- <template is="wxParseImg" :data="item"/> -->
  65. <mp-html :content="item"></mp-html>
  66. </block>
  67. <block :wx:elif="item.tag == 'a'">
  68. <view @tap="wxParseTagATap" :class="'wxParse-inline ' + item.classStr + ' wxParse-' + item.tag" :data-c="item.attr.href" :style="item.styleStr">
  69. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  70. <!-- <template is="wxParse1" :data="item"/> -->
  71. <mp-html :content="item"></mp-html>
  72. </block>
  73. </view>
  74. </block>
  75. <block :wx:elif="item.tag == 'table'">
  76. <view :class="item.classStr + ' wxParse-' + item.tag" :style="item.styleStr">
  77. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  78. <!-- <template is="wxParse1" :data="item"/> -->
  79. <mp-html :content="item"></mp-html>
  80. </block>
  81. </view>
  82. </block>
  83. <block :wx:elif="item.tagType == 'block'">
  84. <view :class="item.classStr + ' wxParse-' + item.tag" :style="item.styleStr">
  85. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  86. <!-- <template is="wxParse1" :data="item"/> -->
  87. <mp-html :content="item"></mp-html>
  88. </block>
  89. </view>
  90. </block>
  91. <view wx:else :class="item.classStr + ' wxParse-' + item.tag + ' wxParse-' + item.tagType" :style="item.styleStr">
  92. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  93. <!-- <template is="wxParse1" :data="item"/> -->
  94. <mp-html :content="item"></mp-html>
  95. </block>
  96. </view>
  97. </block>
  98. <block :wx:elif="item.node == 'text'">
  99. <!-- parse <template is="WxEmojiView" :data="item"/> -->
  100. <block name="WxEmojiView">
  101. <view class="WxEmojiView wxParse-inline" :style="item.styleStr">
  102. <block :wx:for="item.textArray" wx:key="key">
  103. <block :class="item.text == '\\n' ? 'wxParse-hide' : ''" :wx:if="item.node == 'text'">{{ item.text }}</block>
  104. <block :wx:elif="item.node == 'element'"><image class="wxEmoji" :src="item.baseSrc + item.text" /></block>
  105. </block>
  106. </view>
  107. </block>
  108. </block>
  109. </template>
  110. <template name="wxParse1">
  111. <block :wx:if="item.node == 'element'">
  112. <block :wx:if="item.tag == 'button'">
  113. <button type="default" size="mini">
  114. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  115. <!-- <template is="wxParse2" :data="item"/> -->
  116. <mp-html :content="item"></mp-html>
  117. </block>
  118. </button>
  119. </block>
  120. <block :wx:elif="item.tag == 'li'">
  121. <view :class="item.classStr + ' wxParse-li'">
  122. <view :class="item.classStr + ' wxParse-li-inner'">
  123. <view :class="item.classStr + ' wxParse-li-text'"><view :class="item.classStr + ' wxParse-li-circle'"></view></view>
  124. <view :class="item.classStr + ' wxParse-li-text'">
  125. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  126. <!-- <template is="wxParse2" :data="item"/> -->
  127. <mp-html :content="item"></mp-html>
  128. </block>
  129. </view>
  130. </view>
  131. </view>
  132. </block>
  133. <block :wx:elif="item.tag == 'video'">
  134. <!-- <template is="wxParseVideo" :data="item"/> -->
  135. <mp-html :content="item"></mp-html>
  136. </block>
  137. <block :wx:elif="item.tag == 'img'">
  138. <!-- <template is="wxParseImg" :data="item"/> -->
  139. <mp-html :content="item"></mp-html>
  140. </block>
  141. <block :wx:elif="item.tag == 'a'">
  142. <view @tap="wxParseTagATap" :class="'wxParse-inline ' + item.classStr + ' wxParse-' + item.tag" :data-src="item.attr.href" :style="item.styleStr">
  143. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  144. <!-- <template is="wxParse2" :data="item"/> -->
  145. <mp-html :content="item"></mp-html>
  146. </block>
  147. </view>
  148. </block>
  149. <block :wx:elif="item.tagType == 'block'">
  150. <view :class="item.classStr + ' wxParse-' + item.tag" :style="item.styleStr">
  151. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  152. <!-- <template is="wxParse2" :data="item"/> -->
  153. <mp-html :content="item"></mp-html>
  154. </block>
  155. </view>
  156. </block>
  157. <view wx:else :class="item.classStr + ' wxParse-' + item.tag + ' wxParse-' + item.tagType" :style="item.styleStr">
  158. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  159. <!-- <template is="wxParse2" :data="item"/> -->
  160. <mp-html :content="item"></mp-html>
  161. </block>
  162. </view>
  163. </block>
  164. <block :wx:elif="item.node == 'text'">
  165. <!-- parse <template is="WxEmojiView" :data="item"/> -->
  166. <block name="WxEmojiView" v-if="false">
  167. <view class="WxEmojiView wxParse-inline" :style="item.styleStr">
  168. <block :wx:for="item.textArray" wx:key="key">
  169. <block :class="item.text == '\\n' ? 'wxParse-hide' : ''" :wx:if="item.node == 'text'">{{ item.text }}</block>
  170. <block :wx:elif="item.node == 'element'"><image class="wxEmoji" :src="item.baseSrc + item.text" /></block>
  171. </block>
  172. </view>
  173. </block>
  174. </block>
  175. </template>
  176. <template name="wxParse2">
  177. <block :wx:if="item.node == 'element'">
  178. <block :wx:if="item.tag == 'button'">
  179. <button type="default" size="mini">
  180. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  181. <!-- <template is="wxParse3" :data="item"/> -->
  182. <mp-html :content="item"></mp-html>
  183. </block>
  184. </button>
  185. </block>
  186. <block :wx:elif="item.tag == 'li'">
  187. <view :class="item.classStr + ' wxParse-li'">
  188. <view :class="item.classStr + ' wxParse-li-inner'">
  189. <view :class="item.classStr + ' wxParse-li-text'"><view :class="item.classStr + ' wxParse-li-circle'"></view></view>
  190. <view :class="item.classStr + ' wxParse-li-text'">
  191. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  192. <!-- <template is="wxParse3" :data="item"/> -->
  193. <mp-html :content="item"></mp-html>
  194. </block>
  195. </view>
  196. </view>
  197. </view>
  198. </block>
  199. <block :wx:elif="item.tag == 'video'">
  200. <!-- <template is="wxParseVideo" :data="item"/> -->
  201. <mp-html :content="item"></mp-html>
  202. </block>
  203. <block :wx:elif="item.tag == 'img'">
  204. <!-- <template is="wxParseImg" :data="item"/> -->
  205. <mp-html :content="item"></mp-html>
  206. </block>
  207. <block :wx:elif="item.tag == 'a'">
  208. <view @tap="wxParseTagATap" :class="'wxParse-inline ' + item.classStr + ' wxParse-' + item.tag" :data-src="item.attr.href" :style="item.styleStr">
  209. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  210. <!-- <template is="wxParse3" :data="item"/> -->
  211. <mp-html :content="item"></mp-html>
  212. </block>
  213. </view>
  214. </block>
  215. <block :wx:elif="item.tagType == 'block'">
  216. <view :class="item.classStr + ' wxParse-' + item.tag" :style="item.styleStr">
  217. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  218. <!-- <template is="wxParse3" :data="item"/> -->
  219. <mp-html :content="item"></mp-html>
  220. </block>
  221. </view>
  222. </block>
  223. <view wx:else :class="item.classStr + ' wxParse-' + item.tag + ' wxParse-' + item.tagType" :style="item.styleStr">
  224. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  225. <!-- <template is="wxParse3" :data="item"/> -->
  226. <mp-html :content="item"></mp-html>
  227. </block>
  228. </view>
  229. </block>
  230. <block :wx:elif="item.node == 'text'">
  231. <!-- parse <template is="WxEmojiView" :data="item"/> -->
  232. <block name="WxEmojiView" v-if="false">
  233. <view class="WxEmojiView wxParse-inline" :style="item.styleStr">
  234. <block :wx:for="item.textArray" wx:key="key">
  235. <block :class="item.text == '\\n' ? 'wxParse-hide' : ''" :wx:if="item.node == 'text'">{{ item.text }}</block>
  236. <block :wx:elif="item.node == 'element'"><image class="wxEmoji" :src="item.baseSrc + item.text" /></block>
  237. </block>
  238. </view>
  239. </block>
  240. </block>
  241. </template>
  242. <template name="wxParse3">
  243. <block :wx:if="item.node == 'element'">
  244. <block :wx:if="item.tag == 'button'">
  245. <button type="default" size="mini">
  246. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  247. <!-- <template is="wxParse4" :data="item"/> -->
  248. <mp-html :content="item"></mp-html>
  249. </block>
  250. </button>
  251. </block>
  252. <block :wx:elif="item.tag == 'li'">
  253. <view :class="item.classStr + ' wxParse-li'">
  254. <view :class="item.classStr + ' wxParse-li-inner'">
  255. <view :class="item.classStr + ' wxParse-li-text'"><view :class="item.classStr + ' wxParse-li-circle'"></view></view>
  256. <view :class="item.classStr + ' wxParse-li-text'">
  257. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  258. <!-- <template is="wxParse4" :data="item"/> -->
  259. <mp-html :content="item"></mp-html>
  260. </block>
  261. </view>
  262. </view>
  263. </view>
  264. </block>
  265. <block :wx:elif="item.tag == 'video'">
  266. <!-- <template is="wxParseVideo" :data="item"/> -->
  267. <mp-html :content="item"></mp-html>
  268. </block>
  269. <block :wx:elif="item.tag == 'img'">
  270. <!-- <template is="wxParseImg" :data="item"/> -->
  271. <mp-html :content="item"></mp-html>
  272. </block>
  273. <block :wx:elif="item.tag == 'a'">
  274. <view @tap="wxParseTagATap" :class="'wxParse-inline ' + item.classStr + ' wxParse-' + item.tag" :data-src="item.attr.href" :style="item.styleStr">
  275. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  276. <!-- <template is="wxParse4" :data="item"/> -->
  277. <mp-html :content="item"></mp-html>
  278. </block>
  279. </view>
  280. </block>
  281. <block :wx:elif="item.tagType == 'block'">
  282. <view :class="item.classStr + ' wxParse-' + item.tag" :style="item.styleStr">
  283. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  284. <!-- <template is="wxParse4" :data="item"/> -->
  285. <mp-html :content="item"></mp-html>
  286. </block>
  287. </view>
  288. </block>
  289. <view wx:else :class="item.classStr + ' wxParse-' + item.tag + ' wxParse-' + item.tagType" :style="item.styleStr">
  290. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  291. <!-- <template is="wxParse4" :data="item"/> -->
  292. <mp-html :content="item"></mp-html>
  293. </block>
  294. </view>
  295. </block>
  296. <block :wx:elif="item.node == 'text'">
  297. <!-- parse <template is="WxEmojiView" :data="item"/> -->
  298. <block name="WxEmojiView" v-if="false">
  299. <view class="WxEmojiView wxParse-inline" :style="item.styleStr">
  300. <block :wx:for="item.textArray" wx:key="key">
  301. <block :class="item.text == '\\n' ? 'wxParse-hide' : ''" :wx:if="item.node == 'text'">{{ item.text }}</block>
  302. <block :wx:elif="item.node == 'element'"><image class="wxEmoji" :src="item.baseSrc + item.text" /></block>
  303. </block>
  304. </view>
  305. </block>
  306. </block>
  307. </template>
  308. <template name="wxParse4">
  309. <block :wx:if="item.node == 'element'">
  310. <block :wx:if="item.tag == 'button'">
  311. <button type="default" size="mini">
  312. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  313. <!-- <template is="wxParse5" :data="item"/> -->
  314. <mp-html :content="item"></mp-html>
  315. </block>
  316. </button>
  317. </block>
  318. <block :wx:elif="item.tag == 'li'">
  319. <view :class="item.classStr + ' wxParse-li'">
  320. <view :class="item.classStr + ' wxParse-li-inner'">
  321. <view :class="item.classStr + ' wxParse-li-text'"><view :class="item.classStr + ' wxParse-li-circle'"></view></view>
  322. <view :class="item.classStr + ' wxParse-li-text'">
  323. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  324. <!-- <template is="wxParse5" :data="item"/> -->
  325. <mp-html :content="item"></mp-html>
  326. </block>
  327. </view>
  328. </view>
  329. </view>
  330. </block>
  331. <block :wx:elif="item.tag == 'video'">
  332. <!-- <template is="wxParseVideo" :data="item"/> -->
  333. <mp-html :content="item"></mp-html>
  334. </block>
  335. <block :wx:elif="item.tag == 'img'">
  336. <!-- <template is="wxParseImg" :data="item"/> -->
  337. <mp-html :content="item"></mp-html>
  338. </block>
  339. <block :wx:elif="item.tag == 'a'">
  340. <view @tap="wxParseTagATap" :class="'wxParse-inline ' + item.classStr + ' wxParse-' + item.tag" :data-src="item.attr.href" :style="item.styleStr">
  341. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  342. <!-- <template is="wxParse5" :data="item"/> -->
  343. <mp-html :content="item"></mp-html>
  344. </block>
  345. </view>
  346. </block>
  347. <block :wx:elif="item.tagType == 'block'">
  348. <view :class="item.classStr + ' wxParse-' + item.tag" :style="item.styleStr">
  349. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  350. <!-- <template is="wxParse5" :data="item"/> -->
  351. <mp-html :content="item"></mp-html>
  352. </block>
  353. </view>
  354. </block>
  355. <view wx:else :class="item.classStr + ' wxParse-' + item.tag + ' wxParse-' + item.tagType" :style="item.styleStr">
  356. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  357. <!-- <template is="wxParse5" :data="item"/> -->
  358. <mp-html :content="item"></mp-html>
  359. </block>
  360. </view>
  361. </block>
  362. <block :wx:elif="item.node == 'text'">
  363. <!-- parse <template is="WxEmojiView" :data="item"/> -->
  364. <block name="WxEmojiView" v-if="false">
  365. <view class="WxEmojiView wxParse-inline" :style="item.styleStr">
  366. <block :wx:for="item.textArray" wx:key="key">
  367. <block :class="item.text == '\\n' ? 'wxParse-hide' : ''" :wx:if="item.node == 'text'">{{ item.text }}</block>
  368. <block :wx:elif="item.node == 'element'"><image class="wxEmoji" :src="item.baseSrc + item.text" /></block>
  369. </block>
  370. </view>
  371. </block>
  372. </block>
  373. </template>
  374. <template name="wxParse5">
  375. <block :wx:if="item.node == 'element'">
  376. <block :wx:if="item.tag == 'button'">
  377. <button type="default" size="mini">
  378. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  379. <!-- <template is="wxParse6" :data="item"/> -->
  380. <mp-html :content="item"></mp-html>
  381. </block>
  382. </button>
  383. </block>
  384. <block :wx:elif="item.tag == 'li'">
  385. <view :class="item.classStr + ' wxParse-li'">
  386. <view :class="item.classStr + ' wxParse-li-inner'">
  387. <view :class="item.classStr + ' wxParse-li-text'"><view :class="item.classStr + ' wxParse-li-circle'"></view></view>
  388. <view :class="item.classStr + ' wxParse-li-text'">
  389. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  390. <!-- <template is="wxParse6" :data="item"/> -->
  391. <mp-html :content="item"></mp-html>
  392. </block>
  393. </view>
  394. </view>
  395. </view>
  396. </block>
  397. <block :wx:elif="item.tag == 'video'">
  398. <!-- <template is="wxParseVideo" :data="item"/> -->
  399. <mp-html :content="item"></mp-html>
  400. </block>
  401. <block :wx:elif="item.tag == 'img'">
  402. <!-- <template is="wxParseImg" :data="item"/> -->
  403. <mp-html :content="item"></mp-html>
  404. </block>
  405. <block :wx:elif="item.tag == 'a'">
  406. <view @tap="wxParseTagATap" :class="'wxParse-inline ' + item.classStr + ' wxParse-' + item.tag" :data-src="item.attr.href" :style="item.styleStr">
  407. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  408. <!-- <template is="wxParse6" :data="item"/> -->
  409. <mp-html :content="item"></mp-html>
  410. </block>
  411. </view>
  412. </block>
  413. <block :wx:elif="item.tagType == 'block'">
  414. <view :class="item.classStr + ' wxParse-' + item.tag" :style="item.styleStr">
  415. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  416. <!-- <template is="wxParse6" :data="item"/> -->
  417. <mp-html :content="item"></mp-html>
  418. </block>
  419. </view>
  420. </block>
  421. <view wx:else :class="item.classStr + ' wxParse-' + item.tag + ' wxParse-' + item.tagType" :style="item.styleStr">
  422. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  423. <!-- <template is="wxParse6" :data="item"/> -->
  424. <mp-html :content="item"></mp-html>
  425. </block>
  426. </view>
  427. </block>
  428. <block :wx:elif="item.node == 'text'">
  429. <!-- parse <template is="WxEmojiView" :data="item"/> -->
  430. <block name="WxEmojiView" v-if="false">
  431. <view class="WxEmojiView wxParse-inline" :style="item.styleStr">
  432. <block :wx:for="item.textArray" wx:key="key">
  433. <block :class="item.text == '\\n' ? 'wxParse-hide' : ''" :wx:if="item.node == 'text'">{{ item.text }}</block>
  434. <block :wx:elif="item.node == 'element'"><image class="wxEmoji" :src="item.baseSrc + item.text" /></block>
  435. </block>
  436. </view>
  437. </block>
  438. </block>
  439. </template>
  440. <template name="wxParse6">
  441. <block :wx:if="item.node == 'element'">
  442. <block :wx:if="item.tag == 'button'">
  443. <button type="default" size="mini">
  444. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  445. <!-- <template is="wxParse7" :data="item"/> -->
  446. <mp-html :content="item"></mp-html>
  447. </block>
  448. </button>
  449. </block>
  450. <block :wx:elif="item.tag == 'li'">
  451. <view :class="item.classStr + ' wxParse-li'">
  452. <view :class="item.classStr + ' wxParse-li-inner'">
  453. <view :class="item.classStr + ' wxParse-li-text'"><view :class="item.classStr + ' wxParse-li-circle'"></view></view>
  454. <view :class="item.classStr + ' wxParse-li-text'">
  455. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  456. <!-- <template is="wxParse7" :data="item"/> -->
  457. <mp-html :content="item"></mp-html>
  458. </block>
  459. </view>
  460. </view>
  461. </view>
  462. </block>
  463. <block :wx:elif="item.tag == 'video'">
  464. <!-- <template is="wxParseVideo" :data="item"/> -->
  465. <mp-html :content="item"></mp-html>
  466. </block>
  467. <block :wx:elif="item.tag == 'img'">
  468. <!-- <template is="wxParseImg" :data="item"/> -->
  469. <mp-html :content="item"></mp-html>
  470. </block>
  471. <block :wx:elif="item.tag == 'a'">
  472. <view @tap="wxParseTagATap" :class="'wxParse-inline ' + item.classStr + ' wxParse-' + item.tag" :data-src="item.attr.href" :style="item.styleStr">
  473. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  474. <!-- <template is="wxParse7" :data="item"/> -->
  475. <mp-html :content="item"></mp-html>
  476. </block>
  477. </view>
  478. </block>
  479. <block :wx:elif="item.tagType == 'block'">
  480. <view :class="item.classStr + ' wxParse-' + item.tag" :style="item.styleStr">
  481. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  482. <!-- <template is="wxParse7" :data="item"/> -->
  483. <mp-html :content="item"></mp-html>
  484. </block>
  485. </view>
  486. </block>
  487. <view wx:else :class="item.classStr + ' wxParse-' + item.tag + ' wxParse-' + item.tagType" :style="item.styleStr">
  488. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  489. <!-- <template is="wxParse7" :data="item"/> -->
  490. <mp-html :content="item"></mp-html>
  491. </block>
  492. </view>
  493. </block>
  494. <block :wx:elif="item.node == 'text'">
  495. <!-- parse <template is="WxEmojiView" :data="item"/> -->
  496. <block name="WxEmojiView" v-if="false">
  497. <view class="WxEmojiView wxParse-inline" :style="item.styleStr">
  498. <block :wx:for="item.textArray" wx:key="key">
  499. <block :class="item.text == '\\n' ? 'wxParse-hide' : ''" :wx:if="item.node == 'text'">{{ item.text }}</block>
  500. <block :wx:elif="item.node == 'element'"><image class="wxEmoji" :src="item.baseSrc + item.text" /></block>
  501. </block>
  502. </view>
  503. </block>
  504. </block>
  505. </template>
  506. <template name="wxParse7">
  507. <block :wx:if="item.node == 'element'">
  508. <block :wx:if="item.tag == 'button'">
  509. <button type="default" size="mini">
  510. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  511. <!-- <template is="wxParse8" :data="item"/> -->
  512. <mp-html :content="item"></mp-html>
  513. </block>
  514. </button>
  515. </block>
  516. <block :wx:elif="item.tag == 'li'">
  517. <view :class="item.classStr + ' wxParse-li'">
  518. <view :class="item.classStr + ' wxParse-li-inner'">
  519. <view :class="item.classStr + ' wxParse-li-text'"><view :class="item.classStr + ' wxParse-li-circle'"></view></view>
  520. <view :class="item.classStr + ' wxParse-li-text'">
  521. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  522. <!-- <template is="wxParse8" :data="item"/> -->
  523. <mp-html :content="item"></mp-html>
  524. </block>
  525. </view>
  526. </view>
  527. </view>
  528. </block>
  529. <block :wx:elif="item.tag == 'video'">
  530. <!-- <template is="wxParseVideo" :data="item"/> -->
  531. <mp-html :content="item"></mp-html>
  532. </block>
  533. <block :wx:elif="item.tag == 'img'">
  534. <!-- <template is="wxParseImg" :data="item"/> -->
  535. <mp-html :content="item"></mp-html>
  536. </block>
  537. <block :wx:elif="item.tag == 'a'">
  538. <view @tap="wxParseTagATap" :class="'wxParse-inline ' + item.classStr + ' wxParse-' + item.tag" :data-src="item.attr.href" :style="item.styleStr">
  539. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  540. <!-- <template is="wxParse8" :data="item"/> -->
  541. <mp-html :content="item"></mp-html>
  542. </block>
  543. </view>
  544. </block>
  545. <block :wx:elif="item.tagType == 'block'">
  546. <view :class="item.classStr + ' wxParse-' + item.tag" :style="item.styleStr">
  547. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  548. <!-- <template is="wxParse8" :data="item"/> -->
  549. <mp-html :content="item"></mp-html>
  550. </block>
  551. </view>
  552. </block>
  553. <view wx:else :class="item.classStr + ' wxParse-' + item.tag + ' wxParse-' + item.tagType" :style="item.styleStr">
  554. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  555. <!-- <template is="wxParse8" :data="item"/> -->
  556. <mp-html :content="item"></mp-html>
  557. </block>
  558. </view>
  559. </block>
  560. <block :wx:elif="item.node == 'text'">
  561. <!-- parse <template is="WxEmojiView" :data="item"/> -->
  562. <block name="WxEmojiView" v-if="false">
  563. <view class="WxEmojiView wxParse-inline" :style="item.styleStr">
  564. <block :wx:for="item.textArray" wx:key="key">
  565. <block :class="item.text == '\\n' ? 'wxParse-hide' : ''" :wx:if="item.node == 'text'">{{ item.text }}</block>
  566. <block :wx:elif="item.node == 'element'"><image class="wxEmoji" :src="item.baseSrc + item.text" /></block>
  567. </block>
  568. </view>
  569. </block>
  570. </block>
  571. </template>
  572. <template name="wxParse8">
  573. <block :wx:if="item.node == 'element'">
  574. <block :wx:if="item.tag == 'button'">
  575. <button type="default" size="mini">
  576. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  577. <!-- <template is="wxParse9" :data="item"/> -->
  578. <mp-html :content="item"></mp-html>
  579. </block>
  580. </button>
  581. </block>
  582. <block :wx:elif="item.tag == 'li'">
  583. <view :class="item.classStr + ' wxParse-li'">
  584. <view :class="item.classStr + ' wxParse-li-inner'">
  585. <view :class="item.classStr + ' wxParse-li-text'"><view :class="item.classStr + ' wxParse-li-circle'"></view></view>
  586. <view :class="item.classStr + ' wxParse-li-text'">
  587. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  588. <!-- <template is="wxParse9" :data="item"/> -->
  589. <mp-html :content="item"></mp-html>
  590. </block>
  591. </view>
  592. </view>
  593. </view>
  594. </block>
  595. <block :wx:elif="item.tag == 'video'">
  596. <!-- <template is="wxParseVideo" :data="item"/> -->
  597. <mp-html :content="item"></mp-html>
  598. </block>
  599. <block :wx:elif="item.tag == 'img'">
  600. <!-- <template is="wxParseImg" :data="item"/> -->
  601. <mp-html :content="item"></mp-html>
  602. </block>
  603. <block :wx:elif="item.tag == 'a'">
  604. <view @tap="wxParseTagATap" :class="'wxParse-inline ' + item.classStr + ' wxParse-' + item.tag" :data-src="item.attr.href" :style="item.styleStr">
  605. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  606. <!-- <template is="wxParse9" :data="item"/> -->
  607. <mp-html :content="item"></mp-html>
  608. </block>
  609. </view>
  610. </block>
  611. <block :wx:elif="item.tagType == 'block'">
  612. <view :class="item.classStr + ' wxParse-' + item.tag" :style="item.styleStr">
  613. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  614. <!-- <template is="wxParse9" :data="item"/> -->
  615. <mp-html :content="item"></mp-html>
  616. </block>
  617. </view>
  618. </block>
  619. <view wx:else :class="item.classStr + ' wxParse-' + item.tag + ' wxParse-' + item.tagType" :style="item.styleStr">
  620. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  621. <!-- <template is="wxParse9" :data="item"/> -->
  622. <mp-html :content="item"></mp-html>
  623. </block>
  624. </view>
  625. </block>
  626. <block :wx:elif="item.node == 'text'">
  627. <!-- parse <template is="WxEmojiView" :data="item"/> -->
  628. <block name="WxEmojiView" v-if="false">
  629. <view class="WxEmojiView wxParse-inline" :style="item.styleStr">
  630. <block :wx:for="item.textArray" wx:key="key">
  631. <block :class="item.text == '\\n' ? 'wxParse-hide' : ''" :wx:if="item.node == 'text'">{{ item.text }}</block>
  632. <block :wx:elif="item.node == 'element'"><image class="wxEmoji" :src="item.baseSrc + item.text" /></block>
  633. </block>
  634. </view>
  635. </block>
  636. </block>
  637. </template>
  638. <template name="wxParse9">
  639. <block :wx:if="item.node == 'element'">
  640. <block :wx:if="item.tag == 'button'">
  641. <button type="default" size="mini">
  642. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  643. <!-- <template is="wxParse10" :data="item"/> -->
  644. <mp-html :content="item"></mp-html>
  645. </block>
  646. </button>
  647. </block>
  648. <block :wx:elif="item.tag == 'li'">
  649. <view :class="item.classStr + ' wxParse-li'">
  650. <view :class="item.classStr + ' wxParse-li-inner'">
  651. <view :class="item.classStr + ' wxParse-li-text'"><view :class="item.classStr + ' wxParse-li-circle'"></view></view>
  652. <view :class="item.classStr + ' wxParse-li-text'">
  653. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  654. <!-- <template is="wxParse10" :data="item"/> -->
  655. <mp-html :content="item"></mp-html>
  656. </block>
  657. </view>
  658. </view>
  659. </view>
  660. </block>
  661. <block :wx:elif="item.tag == 'video'">
  662. <!-- <template is="wxParseVideo" :data="item"/> -->
  663. <mp-html :content="item"></mp-html>
  664. </block>
  665. <block :wx:elif="item.tag == 'img'">
  666. <!-- <template is="wxParseImg" :data="item"/> -->
  667. <mp-html :content="item"></mp-html>
  668. </block>
  669. <block :wx:elif="item.tag == 'a'">
  670. <view @tap="wxParseTagATap" :class="'wxParse-inline ' + item.classStr + ' wxParse-' + item.tag" :data-src="item.attr.href" :style="item.styleStr">
  671. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  672. <!-- <template is="wxParse10" :data="item"/> -->
  673. <mp-html :content="item"></mp-html>
  674. </block>
  675. </view>
  676. </block>
  677. <block :wx:elif="item.tagType == 'block'">
  678. <view :class="item.classStr + ' wxParse-' + item.tag" :style="item.styleStr">
  679. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  680. <!-- <template is="wxParse10" :data="item"/> -->
  681. <mp-html :content="item"></mp-html>
  682. </block>
  683. </view>
  684. </block>
  685. <view wx:else :class="item.classStr + ' wxParse-' + item.tag + ' wxParse-' + item.tagType" :style="item.styleStr">
  686. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  687. <!-- <template is="wxParse10" :data="item"/> -->
  688. <mp-html :content="item"></mp-html>
  689. </block>
  690. </view>
  691. </block>
  692. <block :wx:elif="item.node == 'text'">
  693. <!-- parse <template is="WxEmojiView" :data="item"/> -->
  694. <block name="WxEmojiView" v-if="false">
  695. <view class="WxEmojiView wxParse-inline" :style="item.styleStr">
  696. <block :wx:for="item.textArray" wx:key="key">
  697. <block :class="item.text == '\\n' ? 'wxParse-hide' : ''" :wx:if="item.node == 'text'">{{ item.text }}</block>
  698. <block :wx:elif="item.node == 'element'"><image class="wxEmoji" :src="item.baseSrc + item.text" /></block>
  699. </block>
  700. </view>
  701. </block>
  702. </block>
  703. </template>
  704. <template name="wxParse10">
  705. <block :wx:if="item.node == 'element'">
  706. <block :wx:if="item.tag == 'button'">
  707. <button type="default" size="mini">
  708. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  709. <!-- <template is="wxParse11" :data="item"/> -->
  710. <mp-html :content="item"></mp-html>
  711. </block>
  712. </button>
  713. </block>
  714. <block :wx:elif="item.tag == 'li'">
  715. <view :class="item.classStr + ' wxParse-li'">
  716. <view :class="item.classStr + ' wxParse-li-inner'">
  717. <view :class="item.classStr + ' wxParse-li-text'"><view :class="item.classStr + ' wxParse-li-circle'"></view></view>
  718. <view :class="item.classStr + ' wxParse-li-text'">
  719. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  720. <!-- <template is="wxParse11" :data="item"/> -->
  721. <mp-html :content="item"></mp-html>
  722. </block>
  723. </view>
  724. </view>
  725. </view>
  726. </block>
  727. <block :wx:elif="item.tag == 'video'">
  728. <!-- <template is="wxParseVideo" :data="item"/> -->
  729. <mp-html :content="item"></mp-html>
  730. </block>
  731. <block :wx:elif="item.tag == 'img'">
  732. <!-- <template is="wxParseImg" :data="item"/> -->
  733. <mp-html :content="item"></mp-html>
  734. </block>
  735. <block :wx:elif="item.tag == 'a'">
  736. <view @tap="wxParseTagATap" :class="'wxParse-inline ' + item.classStr + ' wxParse-' + item.tag" :data-src="item.attr.href" :style="item.styleStr">
  737. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  738. <!-- <template is="wxParse11" :data="item"/> -->
  739. <mp-html :content="item"></mp-html>
  740. </block>
  741. </view>
  742. </block>
  743. <block :wx:elif="item.tagType == 'block'">
  744. <view :class="item.classStr + ' wxParse-' + item.tag" :style="item.styleStr">
  745. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  746. <!-- <template is="wxParse11" :data="item"/> -->
  747. <mp-html :content="item"></mp-html>
  748. </block>
  749. </view>
  750. </block>
  751. <view wx:else :class="item.classStr + ' wxParse-' + item.tag + ' wxParse-' + item.tagType" :style="item.styleStr">
  752. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  753. <!-- <template is="wxParse11" :data="item"/> -->
  754. <mp-html :content="item"></mp-html>
  755. </block>
  756. </view>
  757. </block>
  758. <block :wx:elif="item.node == 'text'">
  759. <!-- parse <template is="WxEmojiView" :data="item"/> -->
  760. <block name="WxEmojiView" v-if="false">
  761. <view class="WxEmojiView wxParse-inline" :style="item.styleStr">
  762. <block :wx:for="item.textArray" wx:key="key">
  763. <block :class="item.text == '\\n' ? 'wxParse-hide' : ''" :wx:if="item.node == 'text'">{{ item.text }}</block>
  764. <block :wx:elif="item.node == 'element'"><image class="wxEmoji" :src="item.baseSrc + item.text" /></block>
  765. </block>
  766. </view>
  767. </block>
  768. </block>
  769. </template>
  770. <template name="wxParse11">
  771. <block :wx:if="item.node == 'element'">
  772. <block :wx:if="item.tag == 'button'">
  773. <button type="default" size="mini">
  774. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  775. <!-- <template is="wxParse12" :data="item"/> -->
  776. <mp-html :content="item"></mp-html>
  777. </block>
  778. </button>
  779. </block>
  780. <block :wx:elif="item.tag == 'li'">
  781. <view :class="item.classStr + ' wxParse-li'">
  782. <view :class="item.classStr + ' wxParse-li-inner'">
  783. <view :class="item.classStr + ' wxParse-li-text'"><view :class="item.classStr + ' wxParse-li-circle'"></view></view>
  784. <view :class="item.classStr + ' wxParse-li-text'">
  785. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  786. <!-- <template is="wxParse12" :data="item"/> -->
  787. <mp-html :content="item"></mp-html>
  788. </block>
  789. </view>
  790. </view>
  791. </view>
  792. </block>
  793. <block :wx:elif="item.tag == 'video'">
  794. <!-- <template is="wxParseVideo" :data="item"/> -->
  795. <mp-html :content="item"></mp-html>
  796. </block>
  797. <block :wx:elif="item.tag == 'img'">
  798. <!-- <template is="wxParseImg" :data="item"/> -->
  799. <mp-html :content="item"></mp-html>
  800. </block>
  801. <block :wx:elif="item.tag == 'a'">
  802. <view @tap="wxParseTagATap" :class="'wxParse-inline ' + item.classStr + ' wxParse-' + item.tag" :data-src="item.attr.href" :style="item.styleStr">
  803. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  804. <!-- <template is="wxParse12" :data="item"/> -->
  805. <mp-html :content="item"></mp-html>
  806. </block>
  807. </view>
  808. </block>
  809. <block :wx:elif="item.tagType == 'block'">
  810. <view :class="item.classStr + ' wxParse-' + item.tag" :style="item.styleStr">
  811. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  812. <!-- <template is="wxParse12" :data="item"/> -->
  813. <mp-html :content="item"></mp-html>
  814. </block>
  815. </view>
  816. </block>
  817. <view wx:else :class="item.classStr + ' wxParse-' + item.tag + ' wxParse-' + item.tagType" :style="item.styleStr">
  818. <block :wx:for="item.nodes" wx:for-item="item" wx:key="key">
  819. <!-- <template is="wxParse12" :data="item"/> -->
  820. <mp-html :content="item"></mp-html>
  821. </block>
  822. </view>
  823. </block>
  824. <block :wx:elif="item.node == 'text'">
  825. <!-- parse <template is="WxEmojiView" :data="item"/> -->
  826. <block name="WxEmojiView" v-if="false">
  827. <view class="WxEmojiView wxParse-inline" :style="item.styleStr">
  828. <block :wx:for="item.textArray" wx:key="key">
  829. <block :class="item.text == '\\n' ? 'wxParse-hide' : ''" :wx:if="item.node == 'text'">{{ item.text }}</block>
  830. <block :wx:elif="item.node == 'element'"><image class="wxEmoji" :src="item.baseSrc + item.text" /></block>
  831. </block>
  832. </view>
  833. </block>
  834. </block>
  835. </template>
  836. </view>
  837. </template>
  838. <script>
  839. /**
  840. * author: Di (微信小程序开发工程师)
  841. * organization: WeAppDev(微信小程序开发论坛)(http://weappdev.com)
  842. * 垂直微信小程序开发交流社区
  843. *
  844. * github地址: https://github.com/icindy/wxParse
  845. *
  846. * for: 微信小程序富文本解析
  847. * detail : http://weappdev.com/t/wxparse-alpha0-1-html-markdown/184
  848. */
  849. /**
  850. * utils函数引入
  851. **/
  852. import showdown from './showdown.js';
  853. import HtmlToJson from './html2json.js';
  854. /**
  855. * 配置及公有属性
  856. **/
  857. /**
  858. * 主函数入口区
  859. **/
  860. function wxParse(bindName = 'wxParseData', type = 'html', data = '<div class="color:red;">数据不能为空</div>', target, imagePadding) {
  861. var that = target;
  862. var transData = {}; //存放转化后的数据
  863. if (type == 'html') {
  864. transData = HtmlToJson.html2json(data, bindName);
  865. // console.log(JSON.stringify(transData, ' ', ' '));
  866. } else if (type == 'md' || type == 'markdown') {
  867. var converter = new showdown.Converter();
  868. var html = converter.makeHtml(data);
  869. transData = HtmlToJson.html2json(html, bindName);
  870. // console.log(JSON.stringify(transData, ' ', ' '));
  871. }
  872. transData.view = {};
  873. transData.view.imagePadding = 0;
  874. if (typeof imagePadding != 'undefined') {
  875. transData.view.imagePadding = imagePadding;
  876. }
  877. var bindData = {};
  878. bindData[bindName] = transData;
  879. that.setData(bindData);
  880. that.wxParseImgLoad = wxParseImgLoad;
  881. that.wxParseImgTap = wxParseImgTap;
  882. }
  883. // 图片点击事件
  884. function wxParseImgTap(e) {
  885. var that = this;
  886. var nowImgUrl = e.target.dataset.src;
  887. var tagFrom = e.target.dataset.from;
  888. if (typeof tagFrom != 'undefined' && tagFrom.length > 0) {
  889. wx.previewImage({
  890. current: nowImgUrl,
  891. // 当前显示图片的http链接
  892. urls: that[tagFrom].imageUrls // 需要预览的图片http链接列表
  893. });
  894. }
  895. }
  896. /**
  897. * 图片视觉宽高计算函数区
  898. **/
  899. function wxParseImgLoad(e) {
  900. var that = this;
  901. var tagFrom = e.target.dataset.from;
  902. var idx = e.target.dataset.idx;
  903. if (typeof tagFrom != 'undefined' && tagFrom.length > 0) {
  904. calMoreImageInfo(e, idx, that, tagFrom);
  905. }
  906. }
  907. // 假循环获取计算图片视觉最佳宽高
  908. function calMoreImageInfo(e, idx, that, bindName) {
  909. var temData = that.data[bindName];
  910. if (temData.images.length == 0) {
  911. return;
  912. }
  913. var temImages = temData.images;
  914. //因为无法获取view宽度 需要自定义padding进行计算,稍后处理
  915. var recal = wxAutoImageCal(e.detail.width, e.detail.height, that, bindName);
  916. temImages[idx].width = recal.imageWidth;
  917. temImages[idx].height = recal.imageheight;
  918. temData.images = temImages;
  919. var bindData = {};
  920. bindData[bindName] = temData;
  921. that.setData(bindData);
  922. }
  923. // 计算视觉优先的图片宽高
  924. function wxAutoImageCal(originalWidth, originalHeight, that, bindName) {
  925. //获取图片的原始长宽
  926. var windowWidth = 0;
  927. var windowHeight = 0;
  928. var autoWidth = 0;
  929. var autoHeight = 0;
  930. var results = {};
  931. wx.getSystemInfo({
  932. success: function (res) {
  933. var padding = that.data[bindName].view.imagePadding;
  934. windowWidth = res.windowWidth - 2 * padding;
  935. windowHeight = res.windowHeight;
  936. //判断按照那种方式进行缩放
  937. // console.log("windowWidth" + windowWidth);
  938. if (originalWidth > windowWidth) {
  939. //在图片width大于手机屏幕width时候
  940. autoWidth = windowWidth;
  941. // console.log("autoWidth" + autoWidth);
  942. autoHeight = (autoWidth * originalHeight) / originalWidth;
  943. // console.log("autoHeight" + autoHeight);
  944. results.imageWidth = autoWidth;
  945. results.imageheight = autoHeight;
  946. } else {
  947. //否则展示原来的数据
  948. results.imageWidth = originalWidth;
  949. results.imageheight = originalHeight;
  950. }
  951. }
  952. });
  953. return results;
  954. }
  955. function wxParseTemArray(temArrayName, bindNameReg, total, that) {
  956. var array = [];
  957. var temData = that.data;
  958. var obj = null;
  959. for (var i = 0; i < total; i++) {
  960. var simArr = temData[bindNameReg + i].nodes;
  961. array.push(simArr);
  962. }
  963. temArrayName = temArrayName || 'wxParseTemArray';
  964. obj = JSON.parse('{"' + temArrayName + '":""}');
  965. obj[temArrayName] = array;
  966. that.setData(obj);
  967. }
  968. /**
  969. * 配置emojis
  970. *
  971. */
  972. function emojisInit(reg = '', baseSrc = '/wxParse/emojis/', emojis) {
  973. HtmlToJson.emojisInit(reg, baseSrc, emojis);
  974. }
  975. module.exports = {
  976. wxParse: wxParse,
  977. wxParseTemArray: wxParseTemArray,
  978. emojisInit: emojisInit
  979. };
  980. </script>
  981. <style>
  982. .wxParse {
  983. margin: 0 5px;
  984. font-family: Helvetica, sans-serif;
  985. font-size: 28rpx;
  986. color: #666;
  987. line-height: 1.8;
  988. }
  989. view {
  990. word-break: break-all;
  991. overflow: auto;
  992. }
  993. .wxParse-inline {
  994. display: inline;
  995. margin: 0;
  996. padding: 0;
  997. }
  998. .wxParse-div {
  999. margin: 0;
  1000. padding: 0;
  1001. }
  1002. .wxParse-h1 {
  1003. font-size: 2em;
  1004. margin: 0.67em 0;
  1005. }
  1006. .wxParse-h2 {
  1007. font-size: 1.5em;
  1008. margin: 0.75em 0;
  1009. }
  1010. .wxParse-h3 {
  1011. font-size: 1.17em;
  1012. margin: 0.83em 0;
  1013. }
  1014. .wxParse-h4 {
  1015. margin: 1.12em 0;
  1016. }
  1017. .wxParse-h5 {
  1018. font-size: 0.83em;
  1019. margin: 1.5em 0;
  1020. }
  1021. .wxParse-h6 {
  1022. font-size: 0.75em;
  1023. margin: 1.67em 0;
  1024. }
  1025. .wxParse-h1 {
  1026. font-size: 18px;
  1027. font-weight: 400;
  1028. margin-bottom: 0.9em;
  1029. }
  1030. .wxParse-h2 {
  1031. font-size: 16px;
  1032. font-weight: 400;
  1033. margin-bottom: 0.34em;
  1034. }
  1035. .wxParse-h3 {
  1036. font-weight: 400;
  1037. font-size: 15px;
  1038. margin-bottom: 0.34em;
  1039. }
  1040. .wxParse-h4 {
  1041. font-weight: 400;
  1042. font-size: 14px;
  1043. margin-bottom: 0.24em;
  1044. }
  1045. .wxParse-h5 {
  1046. font-weight: 400;
  1047. font-size: 13px;
  1048. margin-bottom: 0.14em;
  1049. }
  1050. .wxParse-h6 {
  1051. font-weight: 400;
  1052. font-size: 12px;
  1053. margin-bottom: 0.04em;
  1054. }
  1055. .wxParse-h1,
  1056. .wxParse-h2,
  1057. .wxParse-h3,
  1058. .wxParse-h4,
  1059. .wxParse-h5,
  1060. .wxParse-h6,
  1061. .wxParse-b,
  1062. .wxParse-strong {
  1063. font-weight: bolder;
  1064. }
  1065. .wxParse-i,
  1066. .wxParse-cite,
  1067. .wxParse-em,
  1068. .wxParse-var,
  1069. .wxParse-address {
  1070. font-style: italic;
  1071. }
  1072. .wxParse-pre,
  1073. .wxParse-tt,
  1074. .wxParse-code,
  1075. .wxParse-kbd,
  1076. .wxParse-samp {
  1077. font-family: monospace;
  1078. }
  1079. .wxParse-pre {
  1080. white-space: pre;
  1081. }
  1082. .wxParse-big {
  1083. font-size: 1.17em;
  1084. }
  1085. .wxParse-small,
  1086. .wxParse-sub,
  1087. .wxParse-sup {
  1088. font-size: 0.83em;
  1089. }
  1090. .wxParse-sub {
  1091. vertical-align: sub;
  1092. }
  1093. .wxParse-sup {
  1094. vertical-align: super;
  1095. }
  1096. .wxParse-s,
  1097. .wxParse-strike,
  1098. .wxParse-del {
  1099. text-decoration: line-through;
  1100. }
  1101. .wxParse-strong,
  1102. wxParse-s {
  1103. display: inline;
  1104. }
  1105. .wxParse-a {
  1106. color: deepskyblue;
  1107. word-break: break-all;
  1108. overflow: auto;
  1109. }
  1110. .wxParse-video {
  1111. text-align: center;
  1112. margin: 10px 0;
  1113. }
  1114. .wxParse-video-video {
  1115. width: 100%;
  1116. }
  1117. .wxParse-img {
  1118. background-color: #efefef;
  1119. overflow: hidden;
  1120. width: 40px;
  1121. height: 40px;
  1122. }
  1123. .wxParse-blockquote {
  1124. margin: 0;
  1125. padding: 10px 0 10px 5px;
  1126. font-family: Courier, Calibri, '宋体';
  1127. background: #f5f5f5;
  1128. border-left: 3px solid #dbdbdb;
  1129. }
  1130. .wxParse-code,
  1131. .wxParse-wxxxcode-style {
  1132. display: inline;
  1133. background: #f5f5f5;
  1134. }
  1135. .wxParse-ul {
  1136. margin: 20rpx 10rpx;
  1137. }
  1138. .wxParse-li,
  1139. .wxParse-li-inner {
  1140. display: flex;
  1141. align-items: baseline;
  1142. margin: 10rpx 0;
  1143. }
  1144. .wxParse-li-text {
  1145. align-items: center;
  1146. line-height: 20px;
  1147. }
  1148. .wxParse-li-circle {
  1149. display: inline-flex;
  1150. width: 5px;
  1151. height: 5px;
  1152. background-color: #333;
  1153. margin-right: 5px;
  1154. }
  1155. .wxParse-li-square {
  1156. display: inline-flex;
  1157. width: 10rpx;
  1158. height: 10rpx;
  1159. background-color: #333;
  1160. margin-right: 5px;
  1161. }
  1162. .wxParse-li-ring {
  1163. display: inline-flex;
  1164. width: 10rpx;
  1165. height: 10rpx;
  1166. border: 2rpx solid #333;
  1167. border-radius: 50%;
  1168. background-color: #fff;
  1169. margin-right: 5px;
  1170. }
  1171. .wxParse-u {
  1172. text-decoration: underline;
  1173. }
  1174. .wxParse-hide {
  1175. display: none;
  1176. }
  1177. .WxEmojiView {
  1178. align-items: center;
  1179. }
  1180. .wxEmoji {
  1181. width: 16px;
  1182. height: 16px;
  1183. }
  1184. .wxParse-tr {
  1185. display: flex;
  1186. border-right: 1px solid #e0e0e0;
  1187. border-bottom: 1px solid #e0e0e0;
  1188. }
  1189. .wxParse-th,
  1190. .wxParse-td {
  1191. flex: 1;
  1192. padding: 5px;
  1193. font-size: 28rpx;
  1194. border-left: 1px solid #e0e0e0;
  1195. word-break: break-all;
  1196. }
  1197. .wxParse-td:last {
  1198. border-top: 1px solid #e0e0e0;
  1199. }
  1200. .wxParse-th {
  1201. background: #f0f0f0;
  1202. border-top: 1px solid #e0e0e0;
  1203. }
  1204. @import '@/lib/wxParse/wxParse.ttss';
  1205. </style>