version 0.2

fixed #3
fixed #5
fixed #8

README.md

@@ -1,139 +1,71 @@
-# wxParse-微信小程序富文本解析自定义组件，支持HTML及markdown解析
+## wxParse信息
 
-> 本项目由[微信小程序开发论坛-WeAppDev](http://weappdev.com/) [http://weappdev.com/](http://weappdev.com/) 会员开发
+* 版本号`0.1`
+* 历史版本号`0.2` 具体代码请查看仓库分支`V1`
+* github地址: [https://github.com/icindy/wxParse](https://github.com/icindy/wxParse)
+* 解决问题:微信小程序富文本html、md解析组件
+* 详述:因为微信小程序没有提供webview等html解析，原展示类文本没有办法图文并茂的原生展示，wxParse主要目的就是弥补富文本解析空缺的组件，欢迎使用反馈
 
-> 垂直微信小程序开发交流社区
+## 本次更新主要内容
 
-`版本号: version0.1`
+* 特性增加
+ + 增加内联样式
+ + 增加Class植入
+ + 增加图片视觉适应
+ + 增加图片预览及相册功能
+ + 增加标签分类(行内和块级标签分类)
 
-## 目录
+* 使用优化
+ + 减少引入使用代码
+ + 优化使用方式
+ + 释放更多接口
+
+## 各个功能预览
 
-- [现状](#现状)
-- [组成](#组成)
-- [使用方法](#使用方法)
-- [功能列表](#功能列表)
-- [示例](#示例)
-- [流程图](#流程图)
-- [相关讲解文章](#相关讲解文章)
-- [第三方引用](#第三方引用)
-- [开发信息](#开发信息)
-- [Time](#Time)
+* 多标签解析
 
-## 效果GIF(加载较慢，请稍候)
+![多标签解析](screenshoot/tag.png)
 
-![wxParse.gif](screenshoot/wxParse.gif)
+* 图片预览和相册功能GIF
 
-## 代码库
+![图片预览和相册功能](screenshoot/pre.gif)
 
-> github地址: [https://github.com/icindy/wxParse](https://github.com/icindy/wxParse)
+* 图片视觉自适应
 
-## 现状
+![图片视觉自适应](screenshoot/auto.png)
 
-`版本号: version0.1`
+## 使用方式
 
-**希望大家能够发现问题，提交问题，也可以foke提交您的修改代码**
+> `wxParse 0.2`相比`wxParse 0.1` 优化了使用方式减少使用代码
 
-* 支持大部分标签解析
-* 支持code代码
-* 支持video渲染
-* 支持自定义样式
-* 支持无限嵌套标签
+* 1.复制插件文件`wxParse`文件夹
 
-## 组成
-
-```
--wxParse
---wxParse.js(工具类入口输出口)
---wxParse.wxml(模版文件)
---wxParse.wxss(定义css)
-
-```
-
-## 使用方法
-
-* 复制整个文件夹`wxParse/`到根目录
-* 把样式文件`wxParse.wxss`引入到您调用本插件的作用域喜爱
-```
-@import "你的路径/wxParse/wxParse.wxss";
-```
-
-* 在需要使用的模版的`x.wxml`中引入模版文件`wxParse.wxml`
+* 2.引入模版代码
 ```
-<import src="你的路径/wxParse/wxParse.wxml"/>
-<view class="wxParse">
+<import src="../../wxParse/wxParse.wxml"/> 
 <template is="wxParse" data="{{wxParseData}}"/>
-</view>
 ```
-* 在对应的js中引入`wxParse.js`文件
+* 3.引入执行文件
 ```
-var WxParse = require('你的路径/wxParse/wxParse.js');
+var WxParse = require('../../wxParse/wxParse.js')
+/*** 传值* 1. 类型type->'md/html'* 2. 介些内容data* 3. 指向对象-> page*/
+var that = this
+WxParse.wxParse('html',html,that)
 ```
-* 设置对应data值数组`wxParseData`(必须使用wxParseData),并设置
 
+* 4.可选: image的tap事件,影响图片预览和相册功能
 ```
-
-// html解析
-
-onLoad: function () {
-    console.log('onLoad')
-    var html = '<div class="content mousetrap"><h1 id="wxparse">wxParse-微信小程序富文本解析自定义组件，支持HTML及markdown解析</h1> <blockquote><p>微信小程序富文本解析自定义组件，支持HTML及markdown解析</p></blockquote> <h2 id="-">功能列表</h2> <ul> <li>动态加载代码</li> <li>html转json</li> <li>markdown转html转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; } &lt;div&gt;test div&lt;/div&gt;</code></pre> <h2 id="-">开发信息</h2> <p><a href="http://weappdev.com" target="_blank">微信小程序开发论坛</a></p> <div class="image-package"><img src="http://weappdev.com/uploads/default/original/1X/9156b32bd04323f35d0957796f126b8a54595c97.png" data-original-src="http://weappdev.com/uploads/default/original/1X/9156b32bd04323f35d0957796f126b8a54595c97.png"><br><div class="image-caption">微信小程序logo</div></div> </div>';
-
+wxParseImgTap: function(e){
     var that = this
-    //更新数据
-    that.setData({
-      wxParseData:WxParse('html',html)
-    })
+    WxParse.wxParseImgTap(e,that)
   }
-
 ```
 
-```
-
-// markdown解析
-
-onLoad: function () {
-    console.log('onLoad')
-    var text = '# wxParse-微信小程序富文本解析自定义组件，支持HTML及markdown解析 \n'
-    +' > 微信小程序富文本解析自定义组件，支持HTML及markdown解析 \n\n' 
-    +'## 功能列表 \n * 动态加载代码  \n * html转json \n * markdown转html转json \n * 富文本markdown解析 \n * 自定义层级解析 \n * 自定义样式表 \n'
-    +'## 文件作用 \n'
-    +' ``` // wxParse.wxml //用于解析使用的模版 ``` \n'
-    +'## 开发信息 \n '
-    +' [微信小程序开发论坛](http://weappdev.com) \n'
-    +' ![微信小程序logo](http://weappdev.com/uploads/default/original/1X/9156b32bd04323f35d0957796f126b8a54595c97.png)';
-
-    var that = this
-    //更新数据
-    that.setData({
-      wxParseData:WxParse('md',text)
-    })
-  }
-
-```
-
-## 功能列表
-
-* 动态加载代码
-* html转json
-* markdown转html转json
-* 富文本markdown解析
-* 自定义层级解析
-* 自定义样式表
-
-## 示例
-
-* cnode版wxParse使用
->github地址:[https://github.com/icindy/wechat-webapp-cnode](https://github.com/icindy/wechat-webapp-cnode)
-
-
-## 流程图
-
-![wxParse流程图](screenshoot/wxParse.png)
-
 ## 相关讲解文章
 
 * [wxDiscode－微信小程序特殊字符转义符转化工具类](http://weappdev.com/t/wxdiscode/203)
 * [微信小程序组件wxParse中的模版template使用 既然不能循环那就使用笨办法](http://weappdev.com/t/wxparse-template/192)
+* [微信小程序单图片的自适应计算](https://weappdev.com/t/topic/301)
 
 ## 第三方引用
 
@@ -142,18 +74,18 @@ onLoad: function () {
 
 * [markdown->html showdown](https://github.com/showdownjs/showdown)
 
+## 流程图
+
+![wxParse流程图](screenshoot/wxParse.png)
+
 ##  开发信息
 
 [微信小程序开发论坛](http://weappdev.com)
 垂直微信小程序开发交流社区
 
-![微信小程序logo](http://weappdev.com/uploads/default/original/1X/9156b32bd04323f35d0957796f126b8a54595c97.png)
+## 历史版本信息
 
-## Time
+* 历史版本`version 0.1`
+* 相关文章
+  + [[wxParse version0.1正式发布-全面支持微信小程序富文本html及markdown动态解析](https://weappdev.com/t/wxparse-version0-1-html-markdown/208)](https://weappdev.com/t/wxparse-version0-1-html-markdown/208)
 
- * 2016.10.24 Alpha0.1 发布
- * 2016.10.25 video 支持
- * 2016.10.26 li 支持
- * 2016.10.26 a 支持
- * 2016.10.26 code 支持
- * 2016.10.26 version0.1发布

pages/index/index.js

@@ -19,7 +19,7 @@ Page({
   onLoad: function () {
     console.log('onLoad')
     //添加测试html；增加一个video标签
-    var html = '<code>元素code</code><h1>块级函数</h1> <h1>元素H1</h1> <h2>元素H2</h2> <h3>元素H3</h3> <h4>元素H4</h4> <h5>元素H5</h5> <h6>元素H6</h6> <blockquote>元素blockquote</blockquote><img src="//dn-cnode.qbox.me/FjfPMJYFAbyV1-OM-CcCC5Wk2tmY" alt="江湖网页版01.jpg"> <h1>内联函数</h1> <strong>元素strong</strong> <s>元素s</s><em>元素em</em> <font>元素font</font><i>元素i</i> <label>元素label</label> <small>元素small</small> <span>元素span</span> <strike>元素strike</strike> <sub>元素sub</sub> <sub>元素sup</sub> <tt>元素tt</tt> <u>元素u</u> <abbr title="">元素abbr</abbr> <acronym title="">元素acronym</acronym> <b>元素b</b> <bdo dir="">元素bdo</bdo> <big>元素big</big> <br/> <cite>元素cite</cite> <code>元素code</code> <dfn>元素dfn</dfn> <kbd>元素kbd</kbd> <q>元素q</q> <samp>元素samp</samp> <var>元素var</var> <del>元素del</del> ';
+    var html = '<table border="1"> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tfoot> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> </table><code>元素code</code><h1 class="cus-h1 sus-h2">块级函数</h1> <h1>元素H1</h1> <h2>元素H2</h2> <h3>元素H3</h3> <h4>元素H4</h4> <h5>元素H5</h5> <h6>元素H6</h6> <blockquote>元素blockquote</blockquote><img src="//dn-cnode.qbox.me/FjfPMJYFAbyV1-OM-CcCC5Wk2tmY" alt="江湖网页版01.jpg"> <h1>内联函数</h1> <strong>元素strong</strong> <s>元素s</s><em>元素em</em> <font>元素font</font><i>元素i</i> <label>元素label</label> <small>元素small</small> <span>元素span</span> <strike>元素strike</strike> <sub>元素sub</sub> <sub>元素sup</sub> <tt>元素tt</tt> <u>元素u</u> <abbr title="">元素abbr</abbr> <acronym title="">元素acronym</acronym> <b>元素b</b> <bdo dir="">元素bdo</bdo> <big>元素big</big> <br/> <cite>元素cite</cite> <code>元素code</code> <dfn>元素dfn</dfn> <kbd>元素kbd</kbd> <q>元素q</q> <samp>元素samp</samp> <var>元素var</var> <del>元素del</del> ';
 
     var that = this
     console.log(that.__route__);

pages/index/index.wxss

@@ -0,0 +1,3 @@
+.sus-h2{
+    color: red;
+}

wxParse/html2json.js

@@ -76,7 +76,11 @@
           node.attr = attrs.reduce(function(pre, attr) {
             var name = attr.name;
             var value = attr.value;
-
+            if(name == 'class'){
+              console.dir(value);
+              //  value = value.join("")
+              node.classStr = value;
+            }
             // has multi attibutes
             // make it array of attribute
             if (value.match(/ /)) {
@@ -102,6 +106,7 @@
           }, {});
         }
 
+
         if(node.tag == 'img'){
           node.imgIndex = __wxImageArray.length;
           __wxImageArray.push(node);