UniApp实现多端小程序的核心是“写一次代码，自动适配微信、支付宝、百度、抖音等平台”，依托统一语法、条件编译和标准化组件，由编译器按平台规则生成对应代码。
用 UniApp 开发多端小程序，核心是“写一次代码，自动适配微信、支付宝、百度、抖音等主流小程序平台”。它不是为某个小程序单独定制，而是靠统一语法 + 条件编译 + 标准化组件，把业务逻辑和界面表达抽象出来，再由 uni-app 编译器按目标平台规则生成对应代码。
一、环境与项目初始化
推荐使用 HBuilderX（DCloud 官方 IDE），开箱即用，内置 uni-app 支持、真机调试、一键预览小程序等功能。安装后：
- 新建项目 → 选择「uni-app」模板 → 命名（如 my-shop）→ 完成
- 项目会自动生成标准结构：
pages/（页面）、components/（组件）、static/（静态资源）、pages.json（路由与窗口配置）、manifest.json（各平台标识配置） - 重点配置
manifest.json：填入微信小程序 AppID、支付宝小程序 AppID 等，不同平台需分别申请并填写对应字段
二、页面与路由开发
所有小程序页面都放在 pages/ 目录下，按文件夹组织（如 pages/index/index.vue）。路由由 pages.json 统一管理，无需手写 path 或 router 对象。
- 跳转用
uni.navigateTo({ url: '/pages/about/about?name=李四' })，参数通过 URL 传递，接收页在onLoad生命周期中获取 - 页面级生命周期如
onLoad（加载时）、onShow（显示时）、onPullDownRefresh（下拉刷新）等，行为在各小程序平台保持一致 - 避免直接调用
wx.或my.等平台专属 API，优先使用uni.封装的跨端 API（如uni.request、uni.showToast）
三、处理平台差异：条件编译是关键
虽然大部分代码通用，但个别功能仍需区分平台，比如微信小程序支持 open-data 组件，支付宝不支持；APP 端可调用原生摄像头，H5 需降级为 file input。这时用条件编译：
-
// #ifdef MP-WEIXIN…// #endif：仅在微信小程序中编译该段代码 -
// #ifdef MP-ALIPAY…// #endif：仅在支付宝小程序中生效 -
// #ifdef H5…// #endif：只用于 H5 端 - 支持组合写法，如
// #ifdef MP || H5表示小程序或 H5 都包含
四、样式与组件适配技巧
样式建议用 rpx 单位（响应式像素），1rpx = 屏幕宽度 / 750，能自动适配不同分辨率的小程序容器；避免固定 px 值。
- 组件推荐使用
@dcloudio/uni-ui，它已做多端兼容封装，例如<uni-button>在微信里渲染为button，在支付宝里自动映射为my-button - 若需自定义组件，注意属性名规范（如微信用
bindtap，uni-app 统一用@click） - 图片资源路径尽量用相对路径或
/static/下的本地资源，避免线上地址跨域或平台限制
整个过程不依赖平台 SDK 编码能力，只要熟悉 Vue 语法和基本前端逻辑，就能快速产出可上线的多端小程序。真正难的不是写代码，而是理解哪些地方要统一、哪些地方必须区分——条件编译和跨端 API 的边界感，练几次就清楚了。
