详解uniapp中的条件编辑

曼妙佳人

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（VX/zfb/百d/头条/QQ/快手/钉钉/Tao宝）、快应用等多个平台。
但每个平台有自己的一些特性，因此会存在一些无法跨平台的情况。


以下写法不建议
大量写 if else，会造成代码执行性能低下和管理混乱。
编译到不同的工程后二次修改，会让后续升级变的很麻烦。





解决方案——条件编译
具体不同平台的写法请前往uniapp官网查看

• #ifdef：if defined 仅在某平台存在
• #ifndef：if not defined 除了某平台均存在
• %PLATFORM%：平台名称
  

在script标签中的用法

1. // #ifdef  %PLATFORM%

复制代码

在template标签中的用法

1. <!--  #ifdef  %PLATFORM% -->
   
2. 平台特有的组件
   
3. <!--  #endif -->

复制代码

在style标签中的用法

1. /*  #ifdef  %PLATFORM%  */
   
2. 平台特有样式
   
3. /*  #endif  */

复制代码