Giter Site home page Giter Site logo

icindy / wxparse Goto Github PK

View Code? Open in Web Editor NEW
7.7K 264.0 1.8K 4.62 MB

wxParse-微信小程序富文本解析自定义组件，支持HTML及markdown解析

Home Page: http://weappdev.com/

License: MIT License

JavaScript 100.00%
html weixin wxparse-html-markdown markdown weapp

wxparse's Issues

行内样式的字符实体解析导致解析html失败

行内样式出现" 在解析后 会变成 行内样式双层 双引号导致解析失败。比如
原html： <html>... <p style="font-family: &quot;宋体&quot;; font-size: 14px;"> ...</html>
解析后html：<html>... <p style="font-family: "宋体"; font-size: 14px;"> ...</html>

双层双引号导致解析失败，
建议正则匹配行内样式的" 替换成 与行内样式外层不同的引号

markdown解析貌似有问题 

    var content = `* **类型**、**属性**、**事件**、**方法**、**方法参数**，根据需要添加注释。
  * 如果类型、属性、事件、方法、方法参数的名称已经是自解释（从命名就可以看出明确的意思）了，则不需要加注释；否则必须添加注释。
  * 整个项目的有效注释率必须在20%以上。
  * 注释的优先级为：工具类>业务逻辑类>实体类&查询条件类>Provider>SqlProvider。
  * 注释语言必须准确、易懂、简洁。如果有能力，可使用中英双语进行注释\n注释示例如下：

/// <summary>
/// 分页数据封装
/// </summary>
/// <typeparam name=\"TEntity\">分页数据的实体类型</typeparam>

  [Serializable]
       public class PagingList<TEntity> : IPagingList<TEntity>
       {
/// <summary>
///     构造函数
/// </summary>
/// <param name=\"items\">分页的数据</param>
/// <param name=\"totalCount\">总记录数</param>
/// <param name=\"pageIndex\">当前页码</param>
/// <param name=\"pageSize\">每页显示记录数</param>
         public PagingList(IReadOnlyList<TEntity> items, int totalCount, int pageIndex, int pageSize)
       {
         Items = items;
         TotalCount = totalCount;
         PageIndex = pageIndex;
         PageSize = pageSize;
       }
       /// <summary>
       ///     当前页码
       /// </summary>
       public int PageIndex { get; set; }

       /// <summary>
       ///     每页显示记录数
       /// </summary>
       public int PageSize { get; set; }
       /// <summary>
       ///     总记录数
       /// </summary>
       public int TotalCount { get; set; }
       public IReadOnlyList<TEntity> Items { get; set; }

       /// <summary>
       ///     总页数
       /// </summary>
       public int TotalPages
       {            get
         {
           var result = TotalCount/PageSize;
           if (TotalCount%PageSize > 0)
             result++;
           return result;
         }
       }
     }
       ~~~`;

       /**
        * 内容解析
        */
       //parse.wxParse('md', _data.content, that);
       parse.wxParse('article', 'md', content, that,5);

代码区会横向滚动，高度太小不方便阅读，建议不要横向滚动。

我在努力的帮你找到关于模板的递归和互相嵌套的问题。

我对你的项目重新进行了整改，精简掉了很多不必要的文件。
微信小程序现在属于公测阶段，模板的作用域是独立的，他对于模板递归和互相嵌套的问题估计是故意屏蔽，不让开发者去无意间制造死循环，但是忽略掉了非递归和循环的问题。
我也在努力帮你解决这个问题，解决后我会给你发个方案。

不能做深层次的显示

var html=<div>1<div>2<div>3</div><div>4<div>5<div>6<div>7<div>8<div>9<div>10</div></div></div></div></div></div></div></div></div>;
var data=WxParse.wxparse('html',html,this);
运行后不能显示10
我看来下代码你的wxparse.wxml模版写的太繁琐了！层次深度一旦超过10就不会计算了！

style属性内存在空格引起的BUG

问题

html2json.js第89行：

if (value.match(/ /)) {
   value = value.split(' ');
}

会将存在空格的属性分隔为数组，如果元素存在style属性且包含空格，那么属性会被解析为数组。而在wxParse.wxml中style属性是通过：

style="{{item.attr.style}}"

直接引用，因为html2json中被切割为数组，在调用时会被以逗号作为分隔符连接，导致style属性解析出错。

解决

暂时将style硬编码写入html2json.js中避免被解析：

if (name != "style" && value.match(/ /)) {
   value = value.split(' ');
}

期待更完美的解决方案。

多图片渲染问题

当有多张图片时，无法正确计算图片尺寸

除了第一张图片的宽高被保存了，后面的图片都没有宽高，导致了图片无法显示

image

html未识别<br>换行标签

如有以下内容：

PHP工程师：PHP作为非常优秀的、简便的Web开发语言，和Linux，Apache，MySQL紧密结合，形成LAMP的开源黄金组合，不仅降低使用成本，还提升了开发速度，满足最新的互动式网络开发的应用，这使得php软件工程师成为一个发展迅速的职业。


进阶路径：

\"Image\"

任职要求：

1、熟悉PHP语言。

2、理解OOP**，有设计模式开发经验。

3、熟练使用至少一种PHP开发框架。

4、熟悉HTML、CSS和JavaScript等Web开发技术。

5、熟悉MySQL数据库的开发。


任职标准：

1、协助PHP经理处理公司运营的网站开发工作；

2、学习所开发工作的设计，编码，测试，文档记录；

3、与页面设计师协调沟通，编写部分Javascript和HTML；

4、参与底层MVC框架的编写与维护；

5、与开发组成员共同讨论制定交互流程；

6、学习并与产品经理配合，将设计开发实现。


进阶路径：

\"Image\"

任职要求:

1、对PHP语言有较深入的了解，具备OOP编程**。

2、编写代码清晰可阅读，扩展性高，具有良好的代码编写规范。

3、熟悉Linux常用管理命令，熟悉Apache、Nginx、Redis、Memcached等配置管理。

4、熟练掌握Javascript，能书写性能优良，代码优美的JS代码。

5、熟悉MySQL及性能优化，熟悉分布式数据库部署。

6、熟练掌握MongonDB，Memcache等技术。

7、具备较强的沟通理解能力。


任职标准：

1、使用 PHP 和 MySQL 开发和维护 Web 服务；

2、参与产品技术架构的设计与模块的开发；

3、网站或平台程序的开发与设计，与前台设计沟通、协作完成开发工作；

4、编写项目的技术方案，并能按项目的技术要求实现完成项目的开发工作；

5、相关技术文档的编写及整理工作；

6、独立分析查找原因后修正现有程序bug；

7、对现有功能提出性能优化改进解决方案；

8、负责产品功能的持续升级和更新，并进行相关测试；

9、负责应用程序质量管控。


进阶路径：

\"Image\"

任职要求:

1、精通PHP语言开发，精通HTML、Javascript和DIV+CSS，具备架构能力和良好编码规范。

2、精通MySQL，有复杂数据库设计架构经验。

3、精通Linux/Unix系统开发环境。

4、责任心强，有较强逻辑思维能力和沟通能力。


任职标准：

1、负责公司互联网平台核心模块的应用、设计、开发与测试；

2、针对业务的需求，落实具体的开发工作；

3、不断优化网站系统的设计和代码实现，提升系统效能和安全性；

4、持续优化前端体验和响应速度，并保持良好兼容性，提升友好和易用性；

5、配合各部门业务发展需要完成应用程序开发任务，进行业务系统的需求分析、架构设计及开发；

6、跟进业务线需求，为改善系统的功能积极提出建议。

7、负责系统的维护，确保系统安全稳定运行。


进阶路径：

\"Image\"

任职要求：

1、具有丰富的核心开发经验及团队管理经验；

2、熟悉LAMP环境和Linux命令及使用，熟悉服务器拓扑及网络拓扑设计；

3、编程方面的知识面广，了解多种技术及语言；

4、良好的沟通能力与团队协作能力，高度的工作责任心和敬业精神。

5、优秀的管理理念，有过较大型技术团队管理经验。


任职标准：

1、根据产品需求、系统需求，设计框架并组织参与代码编写；

2、维护各平台日常运行，确保各个程序稳定高效运转；

3、配合运维、配合产品测试人员提供修改方案和技术支持；

4、参与制定网站业务流程，交互式网站架构；

5、基于Linux/Apache/MySQL/PHP进行Web方向的设计和开发；

6、负责所属模块技术文档的编写及维护；

7、参与项目开发，开发设计软件、网站等产品的新功能，协同完成网站或产品的升级工作；

8、配合其他开发人员、UI、交互等完成基于网站或产品的各项工作；

9、配合其他研发人员完成模块研发、调试、安全检测及上线。

以上所有的
没有识别出来 ，导致没有换行

wxParse如何使用wx:for进行循环

目前只支持：
<template is="wxParse" data="{{ wxParseData: moreData1.tagArray }}" /> <template is="wxParse" data="{{ wxParseData: moreData2.tagArray }}" />
但上面方式明显不行，我希望能弄wx:for进行循环，给出以下思路：
<block wx:for="{{ wxParseData }}"> <template is="wxParse" data="{{ wxParseData: ['moreData'+index].tagArray }}" /> </block>
但是 ['moreData'+index]有点问题，求解

html注释会导致解析失败

小程序开发，数据获取从wordpress输出文章内容，因为使用了投稿插件，会自动在文章末尾添加注释
<!--ap-custom-wrapper-->

然后小程序里面解析就变成空白，提示nodes未定义（解析失败）。

目前解决办法是解析前去掉上述注释。

UEditor插件编辑出来的富文本解析bug

之前写的博客的内容数据是html富文本，用这个插件，有些文章转换正常，有几篇数据异常，加载时出错
2017-01-11 14 47 06
数据接口 https://zuo11.com/wechat, 对js不怎么熟，你们可以找找看是什么问题。
js:
wx.request({ url: "https://zuo11.com/wechat", data: { mark: 'home' }, method:'POST', header: { 'content-type': 'application/json' }, success: function(res) { console.log(res.data.notes[0].noteTime), that.setData({ notes_title : res.data.notes[8].noteTitle, notes: res.data.notes, note_time:res.data.notes[8].noteTime, }) WxParse.wxParse('notes_content','html',res.data.notes[5].noteContent,that,10) } })
xml:
<view class="detail"> <template is="wxParse" data="{{wxParseData:notes_content.nodes}}"/> </view>

wxParseImgLoad不触发, 图片大小异常问题

在使用下拉刷新时("enablePullDownRefresh": true), 图片加载完成wxParseImgLoad这个事件就再也不会触发了. 这样会导致图片的大小不对.

onPullDownRefresh: function () {
        
    wx.request({
        url: 'https://api.xxxx.com',
        method: 'GET',
        success: function (res) {
            wx.stopPullDownRefresh()
            that.setData({
                content : res.data.Content
            })
            //--------不知道这样写是否有问题-------
            var htmlContent = res.data.Content.Description
            WxParse.wxParse('htmlContent', 'html', htmlContent, that, 5)
            //----------------------------------
        },
        fail: function () {
            wx.stopPullDownRefresh()
            wx.showModal({
                title: '错误',
                content: '数据请求失败。'
            })
        }
    })
}

多次调用之后会导致加载速度越来越慢

使用0.3的包，多次加载会导致页面渲染越来越慢。
手机测试效果延时明显，在不断返回、加载、返回、加载的过程中，会导致页面加载越来越慢，进入页面白屏时间越来越久。

markdown 解析貌似有点问题 

        var content = `* **类型**、**属性**、**事件**、**方法**、**方法参数**，根据需要添加注释。
          * 如果类型、属性、事件、方法、方法参数的名称已经是自解释（从命名就可以看出明确的意思）了，则不需要加注释；否则必须添加注释。
      * 整个项目的有效注释率必须在20%以上。
      * 注释的优先级为：工具类>业务逻辑类>实体类&查询条件类>Provider>SqlProvider。
      * 注释语言必须准确、易懂、简洁。如果有能力，可使用中英双语进行注释
        注释示例如下：
~~~
  /// 
  /// 分页数据封装
  /// 
  /// 分页数据的实体类型
  [Serializable]
        public class PagingList : IPagingList
        {
          /// 
          ///     构造函数
          /// 
          /// 分页的数据
          /// 总记录数
          /// 当前页码
          /// 每页显示记录数
          public PagingList(IReadOnlyList items, int totalCount, int pageIndex, int pageSize)
        {
          Items = items;
          TotalCount = totalCount;
          PageIndex = pageIndex;
          PageSize = pageSize;
        }

        /// 
        ///     当前页码
        /// 
        public int PageIndex { get; set; }

        /// 
        ///     每页显示记录数
        /// 
        public int PageSize { get; set; }

        /// 
        ///     总记录数
        /// 
        public int TotalCount { get; set; }

        public IReadOnlyList Items { get; set; }

        /// 
        ///     总页数
        /// 
        public int TotalPages
        {
          get
          {
            var result = TotalCount/PageSize;
            if (TotalCount%PageSize > 0)
              result++;
            return result;
          }
        }
      }
        ~~~`;

        /**
         * 内容解析
         */
        //parse.wxParse('md', _data.content, that);
        parse.wxParse('article', 'md', content, that,5);

包含代码是会出错！

HTML页面内容如下：

微信小程序如何实现分享功能？最近在做微信小程序项目，正好需要做页面分享功能！不过很幸运的是，微信小程序已经提供了专用的API功能，让我们轻轻松松实现小程序分享功能。分享函数onShareAppMessage在 Page 中定义 onShareAppMessage 函数，设置该页面的分享信息。只有定义了此事件处理函数，右上角菜单才会显示“分享”按钮 用户点击分享按钮的时候会调用 此事件需要 return 一个 Object，用于自定义分享内容 自定义分享字段字段  说明  默认值\r\ntitle   分享标题    当前小程序名称\r\ndesc    分享描述    当前小程序名称\r\npath    分享路径    当前页面 path ，必须是以 / 开头的完整路径调用方式onShareAppMessage: function () {\r\n    return {\r\n    title: '运营小帮手',\r\n    desc: '运营小帮手百科创建、修改、删除和优化，新闻发稿服务、软件开发和网站SEO优化，运营小帮手，您的好助手！',\r\n    path: '/pages/index/index'\r\n    }\r\n}这样就实现了我们的功能

提个嵌套模板的建议

我实现的方式是，在标签模板动态指定名字
随意写个例子：
<template name="wxparse_span"> <for> <template is="wxparse_{{type}}" data="{{...children}}"> </for> <template>

这样的话，不用在模板里写那么多的wxif，方便扩展，构建生成也简单
缺点是，解析html的时候要把当前节点嵌了几层做个计数

去除文档声明的方法无效

html2json.js里的

function removeDOCTYPE(html) {
    return html
        .replace(/<\?xml.*\?>\n/, '')
        .replace(/<!doctype.*\>\n/, '')
        .replace(/<!DOCTYPE.*\>\n/, '');
}

这个方法，在遇到 <!DOCTYPE HTML><html>......</html> 这样的情况时渲染不出来页面并且阻塞了整个js。

video标签无效

test.js代码
let a='<video src="../../o_1auk4573ods41vgm1416jakb3e1e.mp4" ></video>' let b = WxParse('html',a)

页面返回的代码
<view class="wxParse-video"></view>

video标签没有单独做处理

图片外层多一个标签会导致图片不显示 

        var html='\
<p><b><img src="https://www.baidu.com/img/bd_logo1.png"></b></p>\
<p><strong><img src="https://www.baidu.com/img/bd_logo1.png"></strong></p>\
<p><span><img src="https://www.baidu.com/img/bd_logo1.png"></span></p>';
        WxParse.wxParse('html',html,that)

有一种场景好像实现不了

如题，比如论坛贴子回复，贴子的内容可以处理好，但是回复列表好像没有办法再处理了，这个应该怎么实现呢？能否给点思路，谢谢！！！

关于图片尺寸

听说作者大大在开发下一个版本，我就不提PR了，提个小建议吧。

图片自适应是以屏幕宽度为标准的，但是如果页面存在边距，会容纳不下图片导致图片显示不全。暂时我自己的解决方案是wxParseImgLoad方法新增一个padding参数，WxParse.js的wxAutoImageCal方法中利用padding和windowWidth计算出图片宽度的上限

github 网页不能显示 

wx.request({
          url: "https://github.com/icindy/wxParse",
          success: function (res) {
            console.log(res.data)
            WxParse.wxParse('html',res.data.data,that)
            // 去掉注视开启多实现方式
            // WxParse.wxMoreParse('wxParseInfoData','md',res.data.data.content,self)
          }
        });
  }

WAService.js:1 TypeError: Cannot read property 'replace' of undefined
    at strNumDiscode (http://312461707.appservice.open.weixin.qq.com/wxParse/wxDiscode.js:5:14)
    at Object.strDiscode (http://312461707.appservice.open.weixin.qq.com/wxParse/wxDiscode.js:188:11)
    at Object.wxParse (http://312461707.appservice.open.weixin.qq.com/wxParse/wxParse.js:45:22)
    at Object.success (http://312461707.appservice.open.weixin.qq.com/pages/home/post/post.js:30:17)
    at Object.function.t.(anonymous function).i.(anonymous function) [as success] (http://312461707.appservice.open.weixin.qq.com/WAService.js:1:26406)
    at http://312461707.appservice.open.weixin.qq.com/WAService.js:1:26849
    at n.u (http://312461707.appservice.open.weixin.qq.com/asdebug.js:1:15610)
    at n (http://312461707.appservice.open.weixin.qq.com/asdebug.js:1:9011)
    at n.emit (http://312461707.appservice.open.weixin.qq.com/asdebug.js:1:7864)
    at window.setSecurityDetails (http://312461707.appservice.open.weixin.qq.com/asdebug.js:1:18209)

几个我发现的 bug.

发现几个 bug:
1.HTML中没有图片时,会报错.
2.有 < > 时,会报错.
var html = '&lt; kkk &gt;';
3.测试模式可用,到手机上插件插入的部分 wxml 都不显示了
用微信 web 开发工具, 预览,手机扫描二维码后,在手机上不显示此插件插入的内容.不知道项目上传后会不会显示

markdown解析的问题

我想用测试一下，因此写了下面这句

WxParse.wxParse('md', '## this is h2.',self)

但是解析结果2个井号还在，并没有解析
image

后两个选项卡无法加载内容

你好，我download了下来什么都没改动，前两个选项卡有内容，后两个都是空白哦，不知道为什么？

谢谢你如此优质的资源！

4
2
1
3

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.