uniapp多端编译
uniapp多端编译概述
uniapp是一个基于Vue.js的跨平台开发框架，支持一次开发，多端编译到iOS、Android、Web以及各种小程序平台。其核心优势在于通过条件编译和统一的API实现多端适配。
多端编译配置
在manifest.json中配置各平台的AppID、名称、图标等基本信息。例如微信小程序需填写appid，H5端可配置路由模式和基础路径。
{
"mp-weixin": {
"appid": "your-wechat-appid"
},
"h5": {
"router": {
"mode": "history"
}
}
}条件编译语法
通过注释符号实现不同平台的代码隔离，语法格式为#ifdef 平台名称或#ifndef 平台名称。支持平台标识符包括H5、MP-WEIXIN、APP-PLUS等。
// #ifdef H5
console.log('这段代码只会在H5平台执行');
// #endif
// #ifdef MP-WEIXIN
wx.requestPayment({...}); // 微信小程序专属API
// #endif平台差异处理
对于样式差异，可在CSS中使用条件编译：
/* #ifdef H5 */
body { background-color: #f0f0f0; }
/* #endif */对于模板差异，可在Vue文件中使用条件编译：
<view>
<!-- #ifdef APP-PLUS -->
<text>App端专属内容</text>
<!-- #endif -->
</view>编译命令
在package.json中配置快捷命令：
"scripts": {
"build:h5": "uni-build --platform h5",
"build:mp-weixin": "uni-build --platform mp-weixin",
"build:app": "uni-build --platform app-plus"
}通过命令行执行编译：
npm run build:h5 # 编译H5版本
npm run build:mp-weixin # 编译微信小程序注意事项
各平台对ES规范支持程度不同，建议使用@babel/preset-env进行语法转换。静态资源路径需使用绝对路径或@/别名，避免多端解析差异。
原生组件需按平台单独处理，例如<map>组件在微信小程序和App端的属性差异较大。建议通过uni.getSystemInfo进行运行时环境判断，动态调整组件属性。
