[Analysis] Mini Program XML platform differences

Question

[Analysis] Mini Program XML platform differences

malash opened this issue 2 years ago · 0 comments

The consistency of WXML syntax and features support varies across different platforms, and this project demonstrates those disparities.

Changelog

2022/11/22 Add WeChat/QQ/Baidu/Alipay/Toutiao
2023/10/26 Add Red

Summary

Feature	WeChat	QQ	Baidu	Alipay	Toutiao	Red
Recursive `include`	❌	❌	❌	❌	✅	❌
Recursive `template`	❌	❌	⚠️	✅	✅	✅
Recursive `components`	✅	✅	✅	✅	✅	✅
`template` variable scope	✅	✅	✅	✅	✅	❌
CSS across `include`	✅	✅	✅	✅	✅	✅
CSS across `template`	✅	✅	❌	✅	✅	✅
CSS across `component`	❌	❌	❌	✅	❌	❌

Features

Recursive `include`

To test recursive include without cause stack overflow, we can use wx:for with tree-like data.

<!-- a.wxml -->
<block wx:for="{{item.nodes}}">
  <view>item is {{item.name}}</view>
  <include src="./b.wxml" />
</block>

<!-- b.wxml -->
<block wx:for="{{item.nodes}}">
  <view>item is {{item.name}}</view>
  <include src="./a.wxml" />
</block>

WeChat ❌

Demo:
https://developers.weixin.qq.com/s/42D0EhmN7ScI

Behavior: Overflowed template call will be ignored and logged.

QQ ❌

Demo: recursive-include.zip

Behavior: Overflowed template cal will be ignored and rest of loop fails to render.

Baidu ❌

Demo:
swanide://fragment/97851d9d3dcb480aeec2653a3c5958ac1571642744797

Behavior: Overflowed template call will be ignored and logged.

Alipay ❌

Demo: recursive-include.zip

Behavior: Whole page rendered failed and logged.

Toutiao ✅

Demo: https://developer.open-douyin.com/ide/minicode/rQh6Hdn

Red ❌

Demo: recursive-include.zip

Behavior: Whole page rendered failed without logging.

Recursive `template`

To test recursive include without cause stack overflow, we can use wx:for with tree-like data.

<!-- demo.wxml -->
<template name="demo">
  <view>item is {{item.name}}</view>
  <block wx:for="{{item.nodes}}" wx:key="name">
    <template is="demo" data="{{ item: item }}" />
  </block>
</template>

<!-- page.wxml -->
<import src="./demo.wxml" />

<template is="demo" data="{{ ... }}" />

WeChat ❌

Demo:
https://developers.weixin.qq.com/s/haGUChm97ZcV

Behavior: Overflowed template call will be ignored and logged.

QQ ❌

Demo: recursive-template.zip

Behavior: Overflowed template call will be ignored and logged.

Baidu ⚠️

Demo:
swanide://fragment/cb216847085559c137daaa29bff7dc9d1571645142623

⚠️ Baidu maybe inline all include in complilation instead of runtime and may cause stack
overflow when bundling.

Alipay ✅

Demo: recursive-template.zip

Toutiao ✅

Demo: https://developer.open-douyin.com/ide/minicode/rQkHTxa

Red ✅

Demo: recursive-template.zip

Recursive `components`

To test recursive include without cause stack overflow, we can use wx:for with tree-like data.

<!-- demo.wxml -->
<view>item is {{item.name}}</view>
<block wx:for="{{item.nodes}}" wx:key="name">
  <demo item="{{item}}" />
</block>

WeChat ✅

Demo:
https://developers.weixin.qq.com/s/5Q5EMimk79cZ

QQ ✅

Demo: recursive-component.zip

Baidu ✅

Demo:
swanide://fragment/04923bc5304ab48fdc8add0e690246171571667693205

Alipay ✅

Demo: recursive-components.zip

Toutiao ✅

Demo: https://developer.open-douyin.com/ide/minicode/rQkxgET

Red ✅

Demo: recursive-components.zip

`template` variable scope

<!-- page.wxml -->
<block wx:for="{{item.nodes}}" wx:key="name">
  <include src="../wxml/demo" />
</block>

<!-- demo.wxml -->
<view>item is {{item.name}}</view>

WeChat ✅

Demo: https://developers.weixin.qq.com/s/ND7WIimE73cL

QQ ✅

Demo: template-variable-scope.zip

Baidu ✅

Demo:
swanide://fragment/c3991f07e533c0d766013342ac0c97ac1571669430065

Alipay ✅

Demo: template-variable-scope.zip

Behavior: ~~template always use page / component variable scope rather than for-loop.~~ It seems Alipay fixed the issue and this feature works now (2023 Q4).

Toutiao ✅

Demo: https://developer.open-douyin.com/ide/minicode/rQBBWhC

Red ❌

Demo: template-variable-scope.zip

Behavior: template always use page / component variable scope rather than for-loop.

CSS across `include`

Use flex: 1 to test this case. Parent element's styles should effect children's layput.

<!-- flex1.wxml -->
<view class="flex1">flex1</view>

<!-- page.wxml -->
<view class="flex">
  <include src="../wxml/flex1.wxml" />
  <include src="../wxml/flex1.wxml" />
  <include src="../wxml/flex1.wxml" />
</view>

Should render like this:

WeChat ✅

Demo: https://developers.weixin.qq.com/s/rq79TjmD77cw

QQ ✅

Demo: css-across-include.zip

Baidu ✅

Demo:
swanide://fragment/7912540f67d19bad1f374b38ff0879421571726087016

Alipay ✅

Demo: css-across-include.zip

Toutiao ✅

Demo: https://developer.open-douyin.com/ide/minicode/rQB7feV

Red ✅

Demo: css-across-include.zip

CSS across `template`

Similar to previous example but using template.

<!-- page.wxml -->
<template name="flex1">
  <view class="flex1">flex1</view>
</template>

<view class="flex">
  <template is="flex1" />
  <template is="flex1" />
  <template is="flex1" />
</view>