mp-html 渲染异常

[okxiaoliang4]

使用环境

uniapp vue3 微信小程序

问题描述

[渲染层错误] TypeError: Cannot read property 'replace' of null
    at Object.h [as decodeEntities] (http://127.0.0.1:43030/__pageframe__/__dev__/WAWebview.js?t=wechat&s=1647931738204&v=2.21.2:2:290435)
    at http://127.0.0.1:43030/__pageframe__/__dev__/WAWebview.js?t=wechat&s=1647931738204&v=2.21.2:2:315510
    at Array.forEach (<anonymous>)
    at Object.parse (http://127.0.0.1:43030/__pageframe__/__dev__/WAWebview.js?t=wechat&s=1647931738204&v=2.21.2:2:315079)
    at http://127.0.0.1:43030/__pageframe__/__dev__/WAWebview.js?t=wechat&s=1647931738204&v=2.21.2:2:316009
    at Array.forEach (<anonymous>)
    at Object.parse (http://127.0.0.1:43030/__pageframe__/__dev__/WAWebview.js?t=wechat&s=1647931738204&v=2.21.2:2:315079)
    at l._nodesObserver (http://127.0.0.1:43030/__pageframe__/__dev__/WAWebview.js?t=wechat&s=1647931738204&v=2.21.2:2:523951)
    at Function.a.safeCallback (http://127.0.0.1:43030/__pageframe__/__dev__/WAWebview.js?t=wechat&s=1647931738204&v=2.21.2:2:193776)
    at l.<anonymous> (http://127.0.0.1:43030/__pageframe__/__dev__/WAWebview.js?t=wechat&s=1647931738204&v=2.21.2:2:235736)(env: macOS,mp,1.05.2201240; lib: 2.21.2)

uni-app vue3 微信小程序渲染异常，在mp-html未适配vue3时我patch一个版本遇到了这个问题，现在看到mp-html更新适配vue3之后替换成官方源，逐行定位问题，发现是这行代码导致的异常

mp-html/dist/uni-app/components/mp-html/node/node.vue

Lines 62 to 63 in c6032b1

	<!-- #ifndef H5 || ((MP-WEIXIN || MP-QQ || APP-PLUS || MP-360) && VUE2) -->
	<rich-text v-else-if="!n.c" :id="n.attrs.id" :style="n.f+';display:inline'" :preview="false" :nodes="[n]" />

跟 #412 的表现方式应该差不多

复现方式

[jin-yufeng]

#412 是一开始能显示，多级页面返回的时候变成空白了，跟你描述的不是一个问题吧
提供可复现的 demo 项目（适配 vue3 前是有这个问题的，但最新版应该没有了，请确认是不是所有代码都更新到最新版了）

[okxiaoliang4]

mp-html更新到了最新版本2.2.2了，复现形式也是多次调用mp-html的时候会出现这个问题

2022-03-23.9.33.00.mov

视频里可以看到第一次的时候文章加载是有文字并且正常显示无报错的，但是当我退出页面再重新打开这篇文章，就会出现这样异常，并且文字消失，当然我不排除可能是uni-app这边的问题

#415 将这个判断条件改回去就是没问题的，也可能是uni-app的问题？

[okxiaoliang4]

还有一个猜想，我尝试了一下，好像确实存在这个问题，在编译成wxml后，当我将nodes的值用wxs调用JSON.parse(JSON.stringify(n.aq))复制了一份对象后这个问题也消失了

<wxs module="handler">
  // 行内标签列表
  var inlineTags = {
    abbr: true,
    b: true,
    big: true,
    code: true,
    del: true,
    em: true,
    i: true,
    ins: true,
    label: true,
    q: true,
    small: true,
    span: true,
    strong: true,
    sub: true,
    sup: true
  }
  /**
   * @description 是否使用 rich-text 显示剩余内容
   */
  module.exports = {
    use: function (item) {
      if (item.c) return false
      // 微信和 QQ 的 rich-text inline 布局无效
      return !inlineTags[item.name] && (item.attrs.style || '').indexOf('display:inline') == -1
    },
    copy: function (o){
      console.log(JSON.stringify(o))
      return JSON.parse(JSON.stringify(o))
    }
  }

</wxs>
<rich-text wx:elif="{{n.an}}" id="{{n.ao}}" style="{{n.ap}}" preview="{{false}}" nodes="{{handler.copy(n.aq)}}" />

[okxiaoliang4]

在wxs里面log了一下发现，在没问题的时候这个html渲染会调用57次console.log
在出问题的时候这个html会调用114次console.log，进行了2次render
在二次渲染的时候会出现渲染层异常

[渲染层错误] TypeError: Cannot read property 'replace' of null
    at Object.h [as decodeEntities] (http://127.0.0.1:43030/__pageframe__/__dev__/WAWebview.js?t=wechat&s=1647931738204&v=2.21.2:2:290435)
    at http://127.0.0.1:43030/__pageframe__/__dev__/WAWebview.js?t=wechat&s=1647931738204&v=2.21.2:2:315510
    at Array.forEach (<anonymous>)
    at Object.parse (http://127.0.0.1:43030/__pageframe__/__dev__/WAWebview.js?t=wechat&s=1647931738204&v=2.21.2:2:315079)
    at http://127.0.0.1:43030/__pageframe__/__dev__/WAWebview.js?t=wechat&s=1647931738204&v=2.21.2:2:316009
    at Array.forEach (<anonymous>)
    at Object.parse (http://127.0.0.1:43030/__pageframe__/__dev__/WAWebview.js?t=wechat&s=1647931738204&v=2.21.2:2:315079)
    at l._nodesObserver (http://127.0.0.1:43030/__pageframe__/__dev__/WAWebview.js?t=wechat&s=1647931738204&v=2.21.2:2:523951)
    at Function.a.safeCallback (http://127.0.0.1:43030/__pageframe__/__dev__/WAWebview.js?t=wechat&s=1647931738204&v=2.21.2:2:193776)
    at l.<anonymous> (http://127.0.0.1:43030/__pageframe__/__dev__/WAWebview.js?t=wechat&s=1647931738204&v=2.21.2:2:235736)(env: macOS,mp,1.05.2201240; lib: 2.21.2)

[jin-yufeng]

给我个可复现的 demo 吧，我再试试怎么回事

[jieke17weiju]

给我个可复现的 demo 吧，我再试试怎么回事

问一下，这个bug修复了吗，我项目打算用这个

[jin-yufeng]

@jieke17weiju 我没有复现出这个问题，如果你也遇到的话可以给我一个可复现的 demo 项目

[jieke17weiju]

@jieke17weiju 我没有复现出这个问题，如果你也遇到的话可以给我一个可复现的 demo 项目

好的，我先用着，复现了再提下

[okxiaoliang4]

给我个可复现的 demo 吧，我再试试怎么回事

uniapp 支付宝小程序那边也有点问题，我看看能不能提供个最小复现demo

[jin-yufeng]

@okxiaoliang4 有空试一下这样还会不会报错
mp-html.zip

[okxiaoliang4]

@okxiaoliang4 有空试一下这样还会不会报错 mp-html.zip

好的

[scholar-ink]

在微信小程序也遇到这个问题 vue3

[jin-yufeng]

@scholar-ink 用上面这个 zip 试一下

[liushaobo-maker]

这个问题现在还在