Skip to content
This repository has been archived by the owner on Mar 7, 2024. It is now read-only.

PageMeta 根节点没有显示的问题 #1721

Open
hyyqcweb opened this issue Sep 17, 2021 · 12 comments
Open

PageMeta 根节点没有显示的问题 #1721

hyyqcweb opened this issue Sep 17, 2021 · 12 comments
Labels
bug Something isn't working

Comments

@hyyqcweb
Copy link

bug 描述
当我使用PageMeta 代码: <PageMeta pageStyle={show ? 'overflow: hidden' : ''}>, page 节点并没有 style="overflow: hidden"

复现步骤

  • 点击 "点我" 按钮,page根节点没有变化
  • 期望结果:page根节点根据 PageMeta 中的 变化

期望结果
原生渲染

复现代码

import * as React from 'react';
import { View, PageMeta } from 'remax/wechat';

const Report = () => {
 const [show, setShow] = React.useState<boolean>(false);

 return (
  <PageMeta pageStyle={show ? 'overflow: hidden' : ''}>
    <View onClick={() => setShow(true)}>点我</View>
 </PageMeta>
 )
};

export default Report;

版本信息:

  • remax 版本: [e.g. 2.4.1]
  • 手机型号 [e.g. iPhone X]
  • 小程序端 [e.g. 微信小程序]
  • 小程序版本[e.g. 2.19.0]
  • 开发环境 [e.g. mac OS]

其他信息
原生渲染
remax编译渲染

@hyyqcweb hyyqcweb added the bug Something isn't working label Sep 17, 2021
@watsonhaw5566
Copy link
Contributor

watsonhaw5566 commented Dec 6, 2021

你好,我看到官方提供的片段中也是没有在page中加入style:overflow:hidden的。
image

在remax中wechat平台的 page-meta是作为page的内的一个子组件进行渲染的,按理说不应该控制到page层的内容。

亦或你们是有别的需求?

@baranwang
Copy link

baranwang commented Dec 15, 2021

<page-meta /> 只能是页面内的第一个节点,且不能被 wx:if 、 wx:for 动态变更
<navigation-bar /> 只能是 <page-meta /> 内的第一个节点,且不能被 wx:if 、 wx:for 动态变更

page-metanavigation-bar 是两个特殊节点,不能用 template 来渲染,可以考虑在构建流程中,如果遇到 PageMeta 就在 wxml 中插入

like:

<page-meta></page-meta>
<import src="/base.wxml"/>
<template is="REMAX_TPL" data="{{root: root}}" />
<template is="REMAX_TPL" data="{{ root: modalRoot }}" />

@baranwang
Copy link

尝试 PR 发现在渲染 page.ejs 时并没有暴露页面中使用了哪些组件相关的 API(除了这个问题也确实不大用得到),所以改动会挺大,暂时放弃了😂

@watsonhaw5566
Copy link
Contributor

watsonhaw5566 commented Dec 15, 2021

尝试 PR 发现在渲染 page.ejs 时并没有暴露页面中使用了哪些组件相关的 API(除了这个问题也确实不大用得到),所以改动会挺大,暂时放弃了😂

有网友已经修了,可以等待发布新版本@hyyqcweb @baranwang 修复wechat page-meta、navigation-bar 组件渲染错误

@baranwang
Copy link

baranwang commented Dec 15, 2021

尝试 PR 发现在渲染 page.ejs 时并没有暴露页面中使用了哪些组件相关的 API(除了这个问题也确实不大用得到),所以改动会挺大,暂时放弃了😂

有网友已经修了,可以等待发布新版本@hyyqcweb @baranwang 修复wechat page-meta、navigation-bar 组件渲染错误

我没看过的错话这个已经在master上了,而且如果我没理解错 #1583 并不能修复这个问题,因为通过 import base.wxml 导入 page-meta 不能使这个组件生效。微信对于 page-meta 和 navigation-bar 应该是不支持动态导入的,现在的机制引入后有会一个warn

<page-meta /> 只能是页面内的第一个节点,且不能被 wx:if 、 wx:for 动态变更
<navigation-bar /> 只能是 <page-meta /> 内的第一个节点,且不能被 wx:if 、 wx:for 动态变更

划重点 且不能被 wx:if 、 wx:for 动态变更

如果要修复这个bug就必须在构建阶段判断组件内是否调用了 PageMeta 如果有的话 wxml 文件需要处理成:

<page-meta>
 ...
</page-meta>
<import src="/base.wxml"/>
<template is="REMAX_TPL" data="{{root: root}}" />
<template is="REMAX_TPL" data="{{ root: modalRoot }}" />

@watsonhaw5566
Copy link
Contributor

OK,可以尝试着去修一下,这个应该涉及到模板的判断了,由于没有怎么使用过page-meta不太了解这个bug.

@baranwang
Copy link

https://github.com/baranwang/remax-plugin-insert

写了一个插件可以临时解决这个问题,不过不是特别优雅,需要手动配置需要使用 page-meta 的页面

@watsonhaw5566
Copy link
Contributor

https://github.com/baranwang/remax-plugin-insert

写了一个插件可以临时解决这个问题,不过不是特别优雅,需要手动配置需要使用 page-meta 的页面

404了,兄die

@baranwang
Copy link

404?没有啊!仓库怎么会404

@watsonhaw5566
Copy link
Contributor

https://github.com/baranwang/

这链接可以打开?

@baranwang
Copy link

https://github.com/baranwang/remax-plugin-insert

哈哈哈哈哈 我傻ber了 仓库刚才设成私有了

@watsonhaw5566
Copy link
Contributor

watsonhaw5566 commented Dec 17, 2021

https://github.com/baranwang/remax-plugin-insert

哈哈哈哈哈 我傻ber了 仓库刚才设成私有了

很棒啊,真的感谢

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants