多端小程序深度对比

<!-- 微信小程序 -->
<view wx:if="{{isVisible}}" wx:for="{{items}}" wx:key="id" bindtap="onItemTap">
  {{item.name}}
</view>

<!-- 支付宝小程序 -->
<view a:if="{{isVisible}}" a:for="{{items}}" a:key="id" onTap="onItemTap">
  {{item.name}}
</view>

<!-- 字节小程序 -->
<view tt:if="{{isVisible}}" tt:for="{{items}}" tt:key="id" bindtap="onItemTap">
  {{item.name}}
</view>

<!-- 百度小程序 -->
<view s-if="isVisible" s-for="item, index in items" s-key="id" bindtap="onItemTap">
  {{item.name}}
</view>

// 微信小程序
Component({
  properties: { name: String },
  data: { count: 0 },
  lifetimes: {
    attached() { /* ... */ },
    detached() { /* ... */ }
  }
});

// 支付宝小程序
Component({
  props: { name: String },  // 使用 props 而非 properties
  data: { count: 0 },
  didMount() { /* 对应 attached */ },
  didUnmount() { /* 对应 detached */ }
});

// 字节小程序（与微信基本一致）
Component({
  properties: { name: String },
  data: { count: 0 },
  lifetimes: {
    attached() { /* ... */ }
  }
});

// utils/platform.js
const adapters = {
  wx: { name: 'wechat', api: wx },
  my: { name: 'alipay', api: my },
  tt: { name: 'bytedance', api: tt },
  swan: { name: 'baidu', api: swan }
};

function getPlatform() {
  for (const key of Object.keys(adapters)) {
    if (typeof globalThis[key] !== 'undefined') {
      return adapters[key];
    }
  }
  return { name: 'unknown', api: {} };
}

export const platform = getPlatform();

// 统一封装的 API
export function request(options) {
  const p = getPlatform();
  return new Promise((resolve, reject) => {
    p.api.request({
      ...options,
      success: resolve,
      fail: reject
    });
  });
}

export function showModal(options) {
  const p = getPlatform();
  if (p.name === 'alipay') {
    // 支付宝的 confirm API 参数结构不同
    return new Promise((resolve) => {
      p.api.confirm({
        title: options.title,
        content: options.content,
        confirmButtonText: options.confirmText || '确定',
        cancelButtonText: options.cancelText || '取消',
        success: (res) => resolve({ confirm: res.confirm, cancel: !res.confirm })
      });
    });
  }
  return new Promise((resolve, reject) => {
    p.api.showModal({
      ...options,
      success: resolve,
      fail: reject
    });
  });
}

// 使用 Taro + React 编写多端代码
import Taro, { useState } from '@tarojs/taro';
import { View, Text, Button } from '@tarojs/components';

export default function ProductPage() {
  const [count, setCount] = useState(0);

  const handleAdd = () => {
    setCount(count + 1);
    Taro.showToast({ title: '添加成功' });
  };

  return (
    <View className="product-page">
      <Text>数量: {count}</Text>
      <Button onClick={handleAdd}>加入购物车</Button>
    </View>
  );
}

<template>
  <view class="product-page">
    <text>数量: {{count}}</text>
    <button @click="handleAdd">加入购物车</button>
  </view>
</template>

<script>
export default {
  data() {
    return { count: 0 };
  },
  methods: {
    handleAdd() {
      this.count++;
      uni.showToast({ title: '添加成功' });
    }
  }
};
</script>

// #ifdef MP-WEIXIN
wx.login({ success: (res) => { /* ... */ } });
// #endif

// #ifdef MP-ALIPAY
my.getAuthCode({ scopes: 'auth_base', success: (res) => { /* ... */ } });
// #endif