uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、鸿蒙Next、Web（响应式）、以及各种小程序（微信/支付宝/百度/抖音/飞书/QQ/快手/钉钉/淘宝/京东/小红书）、快应用、鸿蒙元服务等多个平台。

多平台跨端显示不同内容是如何进行编译？

官方地址：uni-app官网

1. JS 逻辑中按平台调用不同 API

// utils/auth.js
export function wechatLogin() {
  // #ifdef MP-WEIXIN
  return uni.login({ provider: 'weixin' })
  // #endif
  // #ifdef APP-PLUS
  return uni.login({ provider: 'weixin', univerifyStyle: '...' })
  // #endif
  // #ifdef H5
  return uni.login({ provider: 'weixin', appid: '公众号appid' })
  // #endif
}

‌2. 模板中按平台渲染不同结构

 <!-- #ifdef H5 -->
        <view>这是H5显示的文字</view>
 <!-- #endif -->
 <!-- #ifdef MP-WEIXIN -->
        <view>这是小程序显示的文字</view>
  <!-- #endif -->
  <!-- #ifdef APP-PLUS -->
        <view>这是App显示的文字</view>
   <!-- #endif -->

‌3. 样式中按平台写不同样式

/* #ifdef H5 */
.page { padding: 20px; }
/* #endif */

/* #ifdef MP-WEIXIN */
.page { padding: 10px; }
/* #endif */

‌4. 常用平台名称‌：APP-PLUS（App）、H5、MP-WEIXIN（微信小程序）、MP-ALIPAY（支付宝小程序）、MP-TOUTIAO（字节小程序）。

支持 #ifdef（仅在某平台存在）和 #ifndef（除了某平台均存在），多平台用 || 连接，如

#ifdef H5 || MP-WEIXIN。

注：APP-PLUS 无法区分ios/Android ,需要通过uni.getSystemInfoSync().platform 进行判断显示内容。