uni-app 条件编译问题：一个逗号引发的血案，微信平台和支付宝平台编译不一致

示例代码：

"tabBar": {  
    "color": "#7A7E83",  
    "selectedColor": "#3c9cff",  
    "borderStyle": "white",  
    "backgroundColor": "#ffffff",  
    "list": [  

        /*  #ifdef  MP-ALIPAY  */  
        {  
            "pagePath": "pages/manage/index/index",  
            "iconPath": "static/tabbar_btn_etc.png",  
            "selectedIconPath": "static/tabbar_btn_etc_sel.png",  
            "text": "首页"  
        },  
        /*  #endif  */  

        /*  #ifndef  MP-ALIPAY  */  
        {  
            "pagePath": "pages/manage/index/index",  
            "iconPath": "static/tabbar_btn_etc.png",  
            "selectedIconPath": "static/tabbar_btn_etc_sel.png",  
            "text": "业务"  
        }  
        /*  #endif  */  
    ]  
}

操作步骤：

}, 
/*  #endif  */
这里的逗号引起的

预期结果：

表现一致

实际结果：

表现不一致

bug描述：

编译时微信小程序正常，支付宝小程序不正常（一个逗号引发的血案）逗号去掉，微信小程序不正常，支付宝小程序正常

ionicwang 1楼•5 天前

确实因为这个json文件中最后一项是不能有逗号的刚好编译到支付宝小程序后 }, 会变成最后一项就报错了你可以这样试试 “tabBar”: {
“color”: “#7A7E83”,
“selectedColor”: “#3c9cff”,
“borderStyle”: “white”,
“backgroundColor”: “#ffffff”,
“list”: [
{
// #ifdef MP-ALIPAY
“pagePath”: “pages/manage/index/index”,
“iconPath”: “static/tabbar_btn_etc.png”,
“selectedIconPath”: “static/tabbar_btn_etc_sel.png”,
“text”: “首页”
// #endif
// #ifndef MP-ALIPAY
“pagePath”: “pages/manage/index/index”,
“iconPath”: “static/tabbar_btn_etc.png”,
“selectedIconPath”: “static/tabbar_btn_etc_sel.png”,
“text”: “业务”
// #endif
}
]
}

bupafengyu 2楼•5 天前作者

比如支付宝和小程序的tabBar数量不是一样的怎么解决？

vueper 3楼•5 天前

回复前端6年: 你这种需求我推荐你使用自定义tabbar

itying888 4楼•5 天前

回复爱豆豆: 你是官方代表不？为何官方不修复？

yibo5220 5楼•5 天前

回复前端6年: 不是我只是给你推荐下解决的方法

sinazl 6楼•5 天前

你这都改变数量了这两套tabbar肯定不一样用自定义的tabbar更适合你的需求或者你使用uni.setTabBarItem控制单项隐藏和显示来解决你数量不一样的问题

ionicwang 7楼•5 天前

回复爱豆豆: 上面有个邀请回答你可邀请官方的人员看看

wuwangju 8楼•5 天前

回复爱豆豆: 谢谢，官方修复更适合我的需求！你说的方法我早考虑了，第一麻烦，第二隐藏和显示不是全平台的。

wuwangju 9楼•5 天前

回复前端6年: 好的

bupafengyu 10楼•5 天前作者

在 uni-app 开发中，条件编译是一个非常有用的功能，它允许你根据不同的平台编写特定的代码。然而，由于不同平台的编译器和运行环境可能存在差异，有时候一些细微的语法问题可能会导致编译或运行时的错误。

你提到的“一个逗号引发的血案”可能是指在条件编译中，由于逗号的使用不当，导致在微信平台和支付宝平台上编译结果不一致。以下是一些可能的情况和解决方案：

1. 条件编译语法问题

在 uni-app 中，条件编译的语法如下：

// #ifdef MP-WEIXIN
// 微信小程序平台代码
// #endif

// #ifdef MP-ALIPAY
// 支付宝小程序平台代码
// #endif

如果你在条件编译块中使用了逗号，可能会导致编译错误或不一致的行为。例如：

// #ifdef MP-WEIXIN
const a = 1, b = 2; // 微信平台代码
// #endif

// #ifdef MP-ALIPAY
const a = 1, b = 2; // 支付宝平台代码
// #endif

如果逗号的使用在某个平台上不被支持，可能会导致编译错误。建议在条件编译块中尽量避免使用复杂的语法，或者确保语法在所有目标平台上都是兼容的。

2. 平台差异导致的编译问题

不同平台的编译器可能对某些语法的处理方式不同。例如，微信小程序和支付宝小程序在 JavaScript 引擎的实现上可能存在差异，导致某些语法在微信平台上可以正常编译，但在支付宝平台上却报错。

3. 解决方案

为了避免这种问题，可以采取以下措施：

简化条件编译块中的代码：尽量在条件编译块中只放置与平台相关的代码，避免复杂的语法。
使用平台特定的 API：如果某些 API 在不同平台上的行为不一致，可以使用条件编译来分别处理。
测试和调试：在开发过程中，及时在多个平台上进行测试，确保代码在所有目标平台上都能正常运行。
查阅文档：查阅 uni-app 官方文档以及微信小程序和支付宝小程序的文档，了解不同平台的差异和限制。

4. 示例

以下是一个更安全的条件编译示例：

// #ifdef MP-WEIXIN
const a = 1;
const b = 2;
// #endif

// #ifdef MP-ALIPAY
const a = 1;
const b = 2;
// #endif