導(dǎo)讀微信小程序，簡稱小程序，英文名Mini Program，是一種不需要下載安裝即可使用的應(yīng)用，它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢想，用戶掃一掃或搜一下即可打開應(yīng)用。小程序是一種不用下載就能使用的應(yīng)用，也是一...

微信小程序，簡稱小程序，英文名Mini Program，是一種不需要下載安裝即可使用的應(yīng)用，它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢想，用戶掃一掃或搜一下即可打開應(yīng)用。小程序是一種不用下載就能使用的應(yīng)用，也是一項(xiàng)門檻非常高的創(chuàng)新，經(jīng)過將近兩年的發(fā)展，已經(jīng)構(gòu)造了新的小程序開發(fā)環(huán)境和開發(fā)者生態(tài)。

wxParse

微信小程序富文本解析自定義組件，支持HTML及markdown解析,可能是第一個微信小程序富文本解析組件

wxParse.gif

代碼庫

github地址: github.com/icindy/wxParse

示例

cnode版wxParse使用
github地址:github.com/icindy/wechat-webapp-cnode

現(xiàn)狀

版本號: Alpha0.1-目前還不太適合直接使用

目前項(xiàng)目不屬于完整版，只是大概完成了基礎(chǔ)的構(gòu)思項(xiàng)目，能夠解析基本的html，基礎(chǔ)的markdown。
希望大家能夠發(fā)現(xiàn)問題，提交問題，也可以foke提交您的修改代碼

項(xiàng)目目前在只是測試版，需要進(jìn)一步完善
需要完善樣式wxParse,wxss
需要加強(qiáng)markdown解析html
其他

組成

-wxParse
--wxParse.js(工具類入口輸出口)
--wxParse.wxml(模版文件)
--wxParse.wxss(定義css)

使用方法

復(fù)制整個文件夾wxParse/到根目錄
把樣式文件wxParse.wxss引入到您調(diào)用本插件的作用域喜愛
```
@import "你的路徑/wxParse/wxParse.wxss";
```

在需要使用的模版的x.wxml中引入模版文件wxParse.wxml

<import src="你的路徑/wxParse/wxParse.wxml"/>
<view class="wxParse">
<template is="wxParse" data="{{wxParseData}}"/>
</view>

在對應(yīng)的js中引入wxParse.js文件

var WxParse = require('你的路徑/wxParse/wxParse.js');

設(shè)置對應(yīng)data值數(shù)組wxParseData(必須使用wxParseData),并設(shè)置

// html解析

onLoad: function () {
    console.log('onLoad')
    var html = '<p class="content mousetrap"><h1 id="wxparse">wxParse-微信小程序富文本解析自定義組件，支持HTML及markdown解析</h1> <blockquote><p>微信小程序富文本解析自定義組件，支持HTML及markdown解析</p></blockquote> <h2 id="-">功能列表</h2> <ul> <li>動態(tài)加載代碼</li> <li>html轉(zhuǎn)json</li> <li>markdown轉(zhuǎn)html轉(zhuǎn)json</li> <li>富文本markdown解析</li> <li>自定義層級解析</li> <li>自定義樣式表</li> </ul> <h2 id="-">文件作用</h2> <pre class="hljs scala"><code class="scala"><span class="hljs-comment">// wxParse.wxml</span> <span class="hljs-comment">//用于解析使用的模版</span> .css{ text-align:center; } <p>test p</p></code></pre> <h2 id="-">開發(fā)信息</h2> <p><a href="http://weappdev.com" target="_blank">微信小程序開發(fā)論壇</a></p> <p class="image-package">![](http://img.php.cnhttp://img.ymlfwin7.cn/upload/softtech_3/article/000/001/505/115945f096a6bba61f58be0b164de67b-1.png)<br><p class="image-caption">微信小程序logo</p></p> </p>';

    var that = this
    //更新數(shù)據(jù)
    that.setData({
      wxParseData:WxParse('html',html)
    })
  }

// markdown解析

onLoad: function () {
    console.log('onLoad')
    var text = '# wxParse-微信小程序富文本解析自定義組件，支持HTML及markdown解析 \n'
    +' > 微信小程序富文本解析自定義組件，支持HTML及markdown解析 \n\n' 
    +'## 功能列表 \n * 動態(tài)加載代碼  \n * html轉(zhuǎn)json \n * markdown轉(zhuǎn)html轉(zhuǎn)json \n * 富文本markdown解析 \n * 自定義層級解析 \n * 自定義樣式表 \n'
    +'## 文件作用 \n'
    +' " // wxParse.wxml //用于解析使用的模版 " \n'
    +'## 開發(fā)信息 \n '
    +' [微信小程序開發(fā)論壇](http://weappdev.com) \n'
    +' ![微信小程序logo](http://img.php.cnhttp://img.ymlfwin7.cn/upload/softtech_3/article/000/001/505/115945f096a6bba61f58be0b164de67b-1.png)';

    var that = this
    //更新數(shù)據(jù)
    that.setData({
      wxParseData:WxParse('md',text)
    })
  }

功能列表

動態(tài)加載代碼
html轉(zhuǎn)json
markdown轉(zhuǎn)html轉(zhuǎn)json
富文本markdown解析
自定義層級解析
自定義樣式表

TODO

添加更多標(biāo)簽的解析
去重與定制樣式
解決組件中的問題

第三方引用

html->json html2json
目前沒有找到更好的，感覺解析還是有問題，歡迎提供更好的代替品
markdown->html showdown

以上就是微信小程序富文本支持HTML及markdown解析wxParse Alpha0.1的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！

小程序是一種不需要下載安裝即可使用的應(yīng)用，它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢想，用戶掃一掃或者搜一下即可打開應(yīng)用。

溫馨提示：喜歡本站的話，請收藏一下本站！

當(dāng)前位置:雨林木風(fēng)下載站 > 應(yīng)用軟件教程 > 詳細(xì)頁面

微信小程序富文本支持HTML及markdown解析wxParse Alpha0.1