jin-yufeng / mp-html Goto Github PK

问题描述
html转义后在经过组件渲染，无法正常显示，直接为空

预期的表现
正常显示，如 你好&#39； 显示 你好 '

实际的表现
直接为空，连你好也不显示

html代码
请附上出现问题的html代码，例如：

const html = '你好''
render () {
  return <ParserRichText html={html} />
}

根据您的建议，我们现在想在服务端解析富文本，目前的方案是用VUE写每个小程序所需的页面，但是不知道怎么跟parser-wxapp整合。按照我们的理解，小程序端请求了一个网址后就会返回HTML富文本，这时怎么在返回富文本之前用parser-wxapp转换，麻烦您给解答一下，谢谢！

问题描述
我想在vue里面使用这个插件解析另外一个网站的内容，但是有些插件一直报错。
背景
因为我们服务端代码使用java写的，如果仅仅只为了这个功能而去搭建服务端node环境，是没有必要的，而且服务端node 我们也不熟悉。因此，想在vue中使用此插件 去解析另外一个已发布的网站。
预期的表现
本想 都是npm插件，应该可以适配且正常解析。我的最终目标就是 通过一个vue项目解析另一个vue项目，最后将整个项目解析结果传递给微信小程序。
实际的表现
但实际情况就是：
第一次尝试：报找不到puppeteer插件，于是我手动安装了puppeteer插件。
第二次尝试：报找不到phantom 和ws，于是我分别安装了。
第三~N次尝试：依然报找不到ws，最后不得已，我安装了我们平时用的vue-native-websocket
并在报错位置引入：

然后是不报错了。
第N+1次尝试：1、解析html代码段正常了，2、使用文件模式解析html文件时报找不到这个文件（可能是我文件路径写的有问题，这里有个疑问就是：这个文件模式是单文件模式还是说也可以解析这个页面中引入的外部js以及超链接指向的外部html页面？），3、使用website模式解析时，报fs插件有错误（fs插件web端我不知道能不能使用，但我还是npm install 安装了一下，结果是没有任何效果）：

另外 使用website解析时报了跨域问题，我本地使用了跨域浏览器先初步跳过的这个报错。
期望您能够在百忙之中为晚辈指点迷津，我的这种思路是否可行，如果不可行 那么有没有什么可行之策呢？
冒昧叨扰，晚辈深表歉意，万望前辈海涵。承蒙不弃，教诲之恩无以为报，拜谢，再拜谢。
html代码
请附上出现问题的html代码（或附件），例如：

<template>
  <div id="app">
    aaaaaaaaaaaaaaaa
  </div>
</template>
<script>
import parser from 'parser-wxapp';

export default {
  name: 'app',
  components: {},
  created() {
    var promise = parser('http://127.0.0.1:8888/home', 'website');
    promise.then(function(response) {
      console.log(response);
    });
  }
}
</script>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

新功能描述
图片样式统一支持自适应大小

应用场景
对图片数据不统一的处理

问题描述
请问小程序 加入视频 有声音没画面是什么问题呢? PS:直接使用video是可以播放的

预期的表现
解析视频并实现播放

实际的表现
视频为自动播放时有声音无画面,非自动播放时为不可操作

html代码
请附上出现问题的html代码（或附件），例如：

<template>
  <view class="support">
    <view class="support-details">
      <video src="https://dcloud-img.oss-cn-hangzhou.aliyuncs.com/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%[email protected]" controls></video>
      <view class="detail"><parser :html="html" @parser="pas" @ready="red" @error="err"></parser></view>
    </view>
  </view>
</template>

<script>
import parser from '@/components/jyf-Parser/index'; //富文本
export default {
  components: { parser },
  data() {
    return {
      html:
        '<div class="video"><video style="width:100%;height:100%" controls="controls" src="https://dcloud-img.oss-cn-hangzhou.aliyuncs.com/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%[email protected]"></video></div>'
    };
  },
  created() {},
  computed: {},
  methods: {
    red: e => {
      console.log(e);
    },
    pas: e => {
      console.log(e);
    },
    err: e => {
      console.log(e);
    }
  }
};
</script>

如果a标签没有href属性，解析的时候会报错
should have url attribute when using navigateTo, redirectTo or switchTab

在iphone7,系统12.3.1，会出现页面渲染一部分，或者卡死的情况，这是什么问题的。。。，代码是用的示例代码，这会和返回的html字符串有关吗？

您好，是这样的，之前在官网论坛发了同样的帖子
是 view 递归问题

当时您回答说，自定义组件支持这种递归
请问可以给一个用例吗？

非常感谢！

如题，在nodejs后端使用这个包的时候，需要解析一些不标准的html，希望可以屏蔽一些标签（不合法的图片）。谢谢！

        const res = await parser(htmlStr);
        let nodes = res.nodes;
        let i = nodes.length;
        while (i--) {
            let node = nodes[i];
            if (node.name === 'div') {
                let j = node.children.length;
                while (j--) {
                    let childEle = node.children[j];
                    if (childEle.name === 'img' && childEle.children.length === 0 && childEle.attrs.src.includes('data:image/svg+xml')) {
                        node.children.splice(j, 1)
                    }
                }
            }
        }

目前是这样去掉不规范的svg图片的，用的是原生rich-text组件，如果用您的组件，或许还要修改下imgList。

另外想请问一下，如何给图片设置padding？

请问在wepy1.X框架中如何使用您的组件

<section style="background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_jpg/Ljib4So7yuWg7a9PAmMjiaT076OLfiaqKT3ZWDbCf6Tcd7jNWToeuKOsOYuujjibtxQ0ABxZr2tcuicJOPolFGmqiayQ/640?wx_fmt=jpeg&quot;);background-position: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;background-size: 100%;"><section data-width="92%" style="margin-right: auto;margin-left: auto;padding: 5px;box-sizing: border-box;width: 513.359px;"><section style="color: rgb(135, 173, 109);letter-spacing: 1.5px;line-height: 22px;text-align: justify;"><p class="">&nbsp; &nbsp;&nbsp;</p><p class="">&nbsp; &nbsp; 肇庆砚坑紫云谷位于广东省肇庆市东南郊烂柯山，西江羚羊峡省级自然保护区内。砚坑拥有端砚开采、加工的悠久历史，**品质最好的端砚都出自于紫云谷的老坑、坑子、麻子坑三大名坑。这里有唐朝年间开采砚石的千年老坑洞，并可观赏到一年一度盛开的烂柯仙钟之称的吊钟花，铁索桥，户外拓展基地，绿色长廓，古磨群遗址，沟谷雨林品氧谷、侗族歌舞表演，沿着脚下的小溪，就开始进入风景如画的山谷。只见脚下流水淙淙，溪水清澈见底，两旁长满青苔的石壁背后，一会儿是竹林，一会儿是开满野花的山坡。巨石、流水、光影、蝉鸣、鸟声、醉人的清风<span class="">……</span>清幽的画面不断切换，让人目不暇接。分布着众多的水潭、怪石，珍珠水叠群，独特的自然风光。涉溪探险、觅玉寻金，溯流而上途经多处天然山水乐园、瀑布群。天青潭，天下第一砚，跳涧潭，紫背天葵保护区，神龟潭，冰纹潭与大自然融为一体。凤凰岩、古塔岩、宣德岩、朝天岩，麻子坑更是青山环抱，苍翠蜿蜒，绿水环绕，宛如一幅天然图画。</p></section></section></section>

这个也会超过宽度，在小程序里出现横向滚动条，盼复

问题描述
图片预览支持索引吗？比如富文本里有多张图片，能否定位到所点击图片索引，展示当前点击的图片？

解析出来html图片明显比原图高

问题描述
在解析富文本的时候，由于后端传过来的数据，携带的单位是pt，无法正常解析，自己写了一个单位转换的方式，但是也无法正常解析

预期的表现
希望即使是携带的样式单位是pt，也能够这个正常解析
在线等，急

实际的表现
无法正常解析，表格展示错乱

html代码
请附上出现问题的html代码（或附件），例如：

<table style='border:1pt solid #ccc'></table>
就是类似这样的，代码正常，就是单位是pt

文章预期是下面样子（PC端，左右排列）

在小程序是这个样子的

富文本html：
测试文章.txt

问题描述
文字换行，图片尺寸不对，我用过wxparse，在代码转换上也多多少少有点问题，不过问题基本都是出在图片尺寸上，你代码会好很多，不过还是没达到我想要的效果，请问还能优化吗

预期的表现

实际的表现

html代码
请附上出现问题的html代码，例如：

<div>Hello World!</div>

欢迎使用了本插件的开发者们来这里分享一下
之后可以展示在首页上

<section class="" style="font-size: 16px;"><section style="margin-top: 10px;margin-bottom: 10px;box-sizing: border-box;"><section data-width="96%" style="display: inline-block;width: 535.672px;vertical-align: top;box-shadow: rgb(0, 0, 0) 0px 0px 0px;box-sizing: border-box;"><section style="box-sizing: border-box;"><section style="background-image: linear-gradient(135deg, rgb(163, 241, 142) 0%, rgb(57, 186, 121) 100%);box-sizing: border-box;"><section style="padding: 4px;box-sizing: border-box;"><section style="text-align: right;box-sizing: border-box;"><section data-width="100%" style="padding-top: 10px;padding-bottom: 10px;display: inline-block;width: 527.672px;vertical-align: top;background-color: rgb(254, 255, 255);box-sizing: border-box;"><section style="text-align: center;box-sizing: border-box;transform: translate3d(12px, 0px, 0px);"><section style="max-width: 100%;vertical-align: middle;display: inline-block;box-sizing: border-box;overflow: hidden !important;"><img class="" data-copyright="0" data-cropselx1="0" data-cropselx2="528" data-cropsely1="0" data-cropsely2="293" data-ratio="0.667" data-src="https://mmbiz.qpic.cn/mmbiz_jpg/SiaRjbGUeWDNibwWNsIicQLF8UE1kXp3psFYgoFbYdvKxUlP8tepItnn4icBCrUqNAibs8AGo4QbyHk4WbDiaiaHFEKEQ/640?wx_fmt=jpeg" data-type="jpeg" data-w="1000" data-backw="528" data-backh="352" data-before-oversubscription-url="https://mmbiz.qpic.cn/mmbiz_jpg/SiaRjbGUeWDNibwWNsIicQLF8UE1kXp3psFYgoFbYdvKxUlP8tepItnn4icBCrUqNAibs8AGo4QbyHk4WbDiaiaHFEKEQ/640?wx_fmt=jpeg" style="vertical-align: middle; box-sizing: border-box; width: 527.672px !important; height: auto !important; visibility: visible !important;" _width="527.672px" src="https://mmbiz.qpic.cn/mmbiz_jpg/SiaRjbGUeWDNibwWNsIicQLF8UE1kXp3psFYgoFbYdvKxUlP8tepItnn4icBCrUqNAibs8AGo4QbyHk4WbDiaiaHFEKEQ/640?wx_fmt=jpeg&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" crossorigin="anonymous" data-fail="0"></section></section></section></section></section></section></section></section></section></section>

以上代码在小程序上跑会有横向滚动条，估计是宽超过100%，transform: translate3d(12px, 0px, 0px);
这个样式导致，盼完善

问题描述
预览图片大图。触发onShow函数

此方法能否向外暴露。为了拦截onshow函数出触发

问题描述
请详细描述遇到的问题（可附图）

预期的表现
请描述预期的表现

实际的表现
请描述实际的表现

html代码
请附上出现问题的html代码（或附件），例如：

<div>Hello World!</div>

问题描述
Taro 都有 demo了，MPVUE 没有吗 = =!
预期的表现
请描述预期的表现

实际的表现
请描述实际的表现

html代码
请附上出现问题的html代码，例如：
<div>Hello World!</div>

多个img标签默认会有间隙。怎么去掉？
例如：

<div>
    <img src='' />
    <img src='' />
    <img src='' />
    <img src='' />
</div>

或者：

<div>
    <img src='' />
</div>
<div>
    <img src='' />
</div>
<div>
    <img src='' />
</div>
<div>
    <img src='' />
</div>

问题描述
我是将<style>XXXXXX</style> 的样式加在 里面的body变量里面，body是 自身的一些样式，再加后台的富文本html，一起的 字符串。

预期的表现
想<style>里面的一些class样式 作用于 富文本

实际的表现
但是实际不起作用

请问是我使用的方式问题吗？还是哪里出错了？

问题描述
部分行内标签，比如粗体A粗体A粗体A粗体A粗体，后面几个粗体被换行了

在Parser.js的71行是否可以换成continue，这样？

后续会支持外部class吗？

你好，空格不解析啊，怎么让文字首行缩进两个字，我在我的样式中加入text-indent，图片也一块缩进了

问题描述
style标签中使用@Keyframes是解析不了的吗

预期的表现
style标签中使用@Keyframes能解析，这样就可以操作动画

实际的表现
style标签中使用@Keyframes带上后，动画无效果

html代码
请附上出现问题的html代码（或附件），例如：

<style>
    @keyframes avatar_animation {
        0% {
            transform: rotate(30deg);
        }
        50% {
            transform: rotate(-30deg);
        }
        100% {
            transform: rotate(30deg);
        }
    }
    .avatar_img {
        animation-name: avatar_animation;
        animation-duration: 2s;
        animation-timing-function: cubic-bezier(0, 0, 1, 0.5, 0, 0, 1, 0.5);
        animation-iteration-count: infinite;
    }
</style>
<p>xxxxxxx</p>
"""

即使调整内存大小的使用限制node --max-old-space-size=8192 也不行

样式问题，具体代码如下：

当把样式写成：
.container .processing时无法解析
如果没有前后关系，写成：
.container{}
.processing{}
就可以解析

请教个问题，有什么办法实现摄像头拍照并上传。

问题描述

当长内容并且节点复杂情况下，渲染会特别卡。
使用节点array方式只能提升渲染部分效率。但是内容长了，占用内存太多，还是会卡。

长内容卡的主要原因：

• 内容太多，节点太多，占用内容太多，如长内容，通过array方式引入，开发工具会直接报setdata内存占用过大
• 长内容，图片太多，需要解析的时间太久，递归太多内容导致资源占用过大，时间比较久。

如果无法解决效率问题，我感觉内容页面用webview还更加流畅些。

预期的表现

希望能有一个类似于懒加载的按需解析功能。

比如array下面，比如有3个节点。
那么优先解析第一个，如果第一个占满了屏幕，则后面的先不解析；如果屏幕没占满，则解析第二个array
当滚动往下，触发继续解析操作。

希望能有方案解决长内容渲染效率问题

实际的表现
希望能有方案解决长内容渲染效率问题

如题

大佬，你们后台用的什么。

问题描述
在微信小程序中滑动时，界面会出现滚动条，导致文章滚动不了
/Users/fei/Desktop/[email protected]
是否可以去掉index.vue的最后的样式
/* #ifndef MP-BAIDU /
:host {
display: block;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
/ #endif */

问题描述
请详细描述遇到的问题（可附图）

预期的表现
请描述预期的表现

实际的表现
请描述实际的表现

html代码
请附上出现问题的html代码（或附件），例如：

<div>Hello World!</div>

就像这样有两条html 当预览后第二张再预览第一张就会出现只能预览第二张的情况.

问题描述
您好，升级到9月17日版本，a标签解析出现问题：

9月15日版本没有问题

辛苦！

正在使用中...其他一切都好，但请问图片如何懒加载？

比如这个，也可能是嵌套比较深？
<img class="rich_pages" data-copyright="0" data-ratio="0.9795918367346939" data-s="300,640" data-src="https://mmbiz.qpic.cn/mmbiz_png/a1HupTryX2wRibph6FWHPMQDMXuA17Zu03pBEB3GKBDpjSTiaoPZ0SUPbOV4Fr22uQBAGr92wDF4OiaibvW8UWoic2g/640?wx_fmt=png" data-type="png" data-w="147" style="">

文章页面如下：
https://mp.weixin.qq.com/s?__biz=MzA3MTA0ODYyOA==&mid=2651155714&idx=1&sn=e2a8aeb4c22b8d8be284431c509fe304&chksm=84c241d9b3b5c8cf59ad83a79d8845fe63e4ef1d6aa4d09579cd4c5fe24cf2ce636aa133fdaa&scene=21#wechat_redirect