How Ant Design Mini Bridges Alipay and WeChat Mini Programs with TSX

Ant Design Mini Cross‑Platform Support

After months of development, Ant Design Mini has adapted 16 core components for both Alipay and WeChat mini programs. The beta release invites developers to try components such as Button, Slider, Container, Icon, Loading, Switch, Tag, Input, Calendar, List, Result, Popover, Mask, Stepper, Popup, and Checkbox.

Demo screenshots illustrate the components in action, and the documentation and demos have been updated to reflect the dual‑platform capability.

Alipay mini program guide: https://ant-design-mini.antgroup.com/guide/quick-start

WeChat mini program guide: https://ant-design-mini.antgroup.com/guide/using-wechat

uni‑app integration guide: https://ant-design-mini.antgroup.com/guide/using-uni-app

Platform‑Specific Differences

Event APIs differ: Alipay passes functions via props, while WeChat requires functions in data. Slots also behave differently; WeChat does not render default values when a slot is empty, and it lacks slot recursion, affecting components like Calendar and IndexBar.

Page({
  data:{
    handleFormat() {
    }
  }
})

<calendar onFormat="{{handleFormat}}" />

Page({
  handleFormat() {
  }
})
<calendar onFormat="handleFormat" />

In WeChat, the calendarTitle slot must be replaced with CSS styling, and recursive slot rendering is not supported.

Engineering Techniques Behind Dual‑Platform Adaptation

We use a subset of TSX as a neutral template language, allowing Babel parsing, IDE type inference, shared prop types, and direct import of other mini‑program components. A custom Babel‑based compiler transforms TSX into platform‑specific view syntax.

Examples:

Conditional rendering: && and ternary operators replace :if tags.

Loop rendering: map replaces :for, automatically generating :for-item, :for-index, and :key attributes.

{todoList.map((task, taskIndex) => (
  <Text hidden={!mixin.value} key={task.id} data-item-id={taskIndex} data-num={20}>
    {taskIndex} {task}
  </Text>
))}

<block wx:for="{{ todoList }}" wx:for-index="taskIndex" wx:for-item="task" wx:key="{{ task.id }}">
  <text hidden="{{ !mixin.value }}" data-item-id="{{ taskIndex }}" data-num="{{ 20 }}">{{ taskIndex }}{{ task }}</text>
</block>

Event binding is automatically converted: <Text onClick="handleClick" /> becomes <text bind:click="handleClick" /> for WeChat and remains onClick for Alipay.

View‑layer scripts are imported as <wxs src="./helper.wxs" module="helper" /> for WeChat and <import-sjs src="./helper.sjs" module="helper" /> for Alipay.

Type utilities such as TSXMLProps map logical props to string attributes for the view layer.

// Calendar.axml.tsx
import { TSXMLProps, View } from 'tsxml';
interface IProps { className?: string; style?: string; onClick: (e) => void; }
interface InternalData { size: number; }
export default ({ className, style }: TSXMLProps<IProps>, { size }: InternalData) => (
  <View class={`ant-calendar ${className ? className : ''}`} style={style}>
    {size}
  </View>
);

Current limitations: one component per file and custom component event configuration required.

AI‑Assisted Legacy Conversion

To migrate the existing axml codebase to TSX, we prompted ChatGPT with the TSX compiler and test cases, along with component props.ts and config.json. The full prompt is available in the repository.

Ensuring AI‑Generated Code Correctness

We re‑compile the AI‑produced TSX back to axml and compare it with the original using git diff. Minor differences such as an extra <block/> wrapper are easy to spot manually.

Functional‑Mini Component Logic

Component logic is written as functional‑mini components, enabling hooks like useState, useEffect, and computed properties. The Popover component, for example, becomes a clean React‑style function.

const Popover = (props: IPopoverProps) => {
  const [value] = useMergedState(props.defaultVisible, { value: props.visible });
  const [popoverStyle, setPopoverStyle] = useState({ popoverContentStyle: '', adjustedPlacement: '' });
  useEffect(() => {
    setPopoverStyle({ popoverContentStyle: '', adjustedPlacement: '' });
  }, [value, props.autoAdjustOverflow, props.placement]);
  return {
    adjustedPlacement: popoverStyle.adjustedPlacement,
    popoverContentStyle: popoverStyle.popoverContentStyle,
  };
};

Conclusion

Developers are encouraged to explore Ant Design Mini’s cross‑platform capabilities, report bugs, and share feedback via the issue tracker. Official sites: https://mini.ant.design/ and the domestic mirror https://ant-design-mini.antgroup.com/.