fix(swan): View 标签支持 flex 布局 #9529
Conversation
|
@Chen-jj 有时间看一下。 |
|
@Chen-jj 辛苦看下这个PR，对兼容百度小程序来说真的很重要 🙏🏻 |
|
目前这个 pr 是有什么边界或者兼容的问题么？ |
|
同求合并 |
packages/taro-swan/src/template.ts
Outdated
| .join('\n') | ||
|
|
||
| const template = | ||
| `<view s-if="{{item.nn==='view'&&(item.st||item.cl)}}" hover-class="{{xs.b(item.hoverClass,'none')}}" hover-stop-propagation="{{xs.b(item.hoverStopPropagation,false)}}" hover-start-time="{{xs.b(item.hoverStartTime,50)}}" hover-stay-time="{{xs.b(item.hoverStayTime,400)}}" animation="{{item.animation}}" bindtouchstart="eh" bindtouchmove="eh" bindtouchend="eh" bindtouchcancel="eh" bindlongtap="eh" bindanimationstart="eh" bindanimationiteration="eh" bindanimationend="eh" bindtransitionend="eh" style="{{item.st}}" class="{{item.cl}}" bindtap="eh" id="{{item.uid}}"> |
There was a problem hiding this comment.
需要注释一下，如果 view 的属性或事件有修改，需要同步修改此处。
|
@SyMind 十分抱歉，之前在忙鸿蒙的东西没有关注这个 PR。 思路十分正确，有些细微之处烦请修改一下，我这边也会尽快新增一个运行时 hooks 用于修改 明天会发 3.2 最后一个 patch 版本，此 PR 可能要跟 3.3 版本进行发布。 |
|
@Chen-jj 这个PR多久能merge呢, 目前开发百度小程序有该问题 |
|
@w88975 下周ok |
|
@SyMind 辛苦看看那些review的问题吧，尽快能修复这个问题~ |
|
@bluescurry 本周实在是太忙了，周五搞。 |
|
@Chen-jj 应该是解决了，麻烦有时间看一下。 |
|
@SyMind 可能是没沟通清楚，整体的方向错了。这次的修改把方法放到基类、把配置放到全局了，但这是不对的，只是百度小程序需要这些东西，要尽量把它们放小程序插件里。麻烦再按评论修改一下。 |
|
@Chen-jj 更改完毕 |
| @@ -193,3 +193,12 @@ export function setUniqueKeyToRoute (key: string, obj) { | |||
| obj.url += (hasMark ? '&' : '?') + `${routerParamsPrivateKey}=${cacheKey}` | |||
| } | |||
| } | |||
|
|
|||
| export function indent (str: string, size: number): string { | |||
There was a problem hiding this comment.
indent 放 @tarojs/plugin-platform-swan 里，不需要修改 shared/src/utils.ts
| @@ -23,7 +23,7 @@ import { | |||
| } from './components' | |||
| import { Shortcuts } from './shortcuts' | |||
| import { isBooleanStringLiteral, isNumber, isFunction } from './is' | |||
| import { toCamelCase, toKebabCase, toDashed, hasOwn } from './utils' | |||
| import { toCamelCase, toKebabCase, toDashed, hasOwn, indent } from './utils' | |||
There was a problem hiding this comment.
indent 放 @tarojs/plugin-platform-swan 里，不需要修改 shared/src/template.ts
There was a problem hiding this comment.
我的看法是需要的，你可以看一下 indent 的用处，在 template 会有如下的代码。
<block ${Adapter.for}="{{i.${Shortcuts.Childnodes}}}" ${Adapter.key}="uid">
${indent(child, 8)}
</block>如果此时 child 是多行文本，例如：
<div>
hello, world
</div>传入后得到的字符串为如下：
<block ${Adapter.for}="{{i.${Shortcuts.Childnodes}}}" ${Adapter.key}="uid">
<div>
hello, world
</div>
</block>There was a problem hiding this comment.
我想在 template 中处理这种多行文本缩进问题是合理的。
|
非view标签还是存在flex: 1无效的问题，taro版本v3.3.1。暂时看了button和input标签的flex: 1没有生效 |
|
@lifeng1893 这个问题本质还是由于百度小程序的渲染 bug 导致，当前采取的也是一种启发式的解决方案，具体讨论如下：https://github.com/NervJS/taro/issues/6015#issuecomment-859722193。 当前你存在问题是在预料只之中的，但是是否要在框架层面解决其它标签的 case 可能需要一些权衡，我想我可以 pr 一下，看看大家的看法。 |
|
@SyMind 我个人认为button和input需要支持下，这两个标签的能力用view标签替代不了 |
|
@lifeng1893 #9884 已经在这个 pr 中添加了对 button、input、text 标签的支持。 |
|
@lifeng1893，其实@SyMind 大佬适配了View的问题已经解决大部分情况了，感觉其他标签处理起来很复杂，有种曲线救国的方法就是用grid。 比如 .container {
display: flex;
.box1 {
flex: 1;
}
.box2 {
width: 20px;
}
}
.container {
@if $ENV == 'swan' {
display: grid;
grid-template-columns: 1fr 20px;
grid-template-areas:
"box1-area"
"box2-area";
.box1 {
grid-area: box1-area;
}
.box2 {
grid-area: box2-area;
}
} @else {
display: flex;
.box1 {
flex: 1;
}
.box2 {
width: 20px;
}
}
}
Env 需要配置 sass:{
data: "$ENV: " + process.env.Env + ";"
} |
|
@lyrbet 我这边试试，感谢 |
|
快手小程序也有一样的问题 |
这个 PR 做了什么? (简要描述所做更改)
对百度小程序 view 进行有限深度的非递归渲染，解决 view 标签 flex 布局异常的问题。
这个 PR 是什么类型? (至少选择一个)
这个 PR 涉及以下平台: