zoukankan      html  css  js  c++  java
  • 微信小程序 不支持富文本 编辑器 直接显示 WxParse 有bug

     首先众所周知,微信小程序不支持后台富文本编辑器直接编辑的html,经查询得知有wxParse 这个东西做解析,用法大致列一下:

         首先 下载 引用,wxParse

    //在使用的View中引入WxParse模块
    var WxParse = require('../../wxParse/wxParse.js');
    //在使用的Wxss中引入WxParse.css,可以在app.wxss
    @import "/wxParse/wxParse.wxss";
    var article = '<div>我是HTML代码</div>';
    /**
    * WxParse.wxParse(bindName , type, data, target,imagePadding)
    * 1.bindName绑定的数据名(必填)
    * 2.type可以为html或者md(必填)
    * 3.data为传入的具体数据(必填)
    * 4.target为Page对象,一般为this(必填)
    * 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
    */
    var that = this;
    WxParse.wxParse('article', 'html', article, that, 5);
    // 引入模板
    <import src="你的路径/wxParse/wxParse.wxml"/>
    //这里data中article为bindName
    <template is="wxParse" data="{{wxParseData:article.nodes}}"/>


    二 引入完了发现,富文本编辑器里面的单位出来居然是 pt ,然而小程序对于pt的支持如下,可谓是惨不忍睹


    不忍直视,最明显的布局是不能看,然后就是 有些标签不能像浏览器一样忽略或者处理。

    针对于图中不能识别的<o:p>全局替换为空串。

    针对于布局,主要在于单位是pt,pt 与 小程序的rpx 基本是两倍的关系,
    所以,全局替换 pt 为 x2rpx

    如下图:

    效果如下:

     

    是不是看起来好多了,但是还有个问题是,一些不标准的标签,没有闭合的标签,是不识别的,暂时没有好的处理办法,看看哪位大神有了办法处理这个事情(如下图)

    ----------------------------------------------------------------------------更新,2019-01-19--------------------------------------------------------------------------------------------------------------

    这个wxParse编辑器,后续发现一个问题,就是只能解析十层代码,更多层的html代码无法解析,下面是wxParse.wxml:

     

    基于这个问题,不满足我司的需求,我司需要的是99.9%的展示率,我也不能做一个浏览器解析器吧,果断,换思路,发现有web-view可以内嵌h5页面,结果展示出来果然效果不错。

    但是我司还有个需求是需要在当前页面转发和分享当前编辑的页面,这个过程又出现了一些问题,有兴趣的同学看另一篇 小程序webview 转发 分享朋友圈

     
     
  • 相关阅读:
    BZOJ 1452 Count(二维树状数组)
    BZOJ 1407 Savage(拓展欧几里得)
    BZOJ 1415 聪聪和可可(期望DP)
    BZOJ 1406 密码箱(数论)
    最大流小结
    UVA6531Go up the ultras
    二分图小结
    Codeforces Round #243 (Div. 1)
    图论模板集合
    zoj3416 Balanced Number
  • 原文地址:https://www.cnblogs.com/dongjingya/p/9442871.html
Copyright © 2011-2022 走看看