uni-app小程序跨端兼容，条件编译

男娘i 2023-06-27 08:49 19阅读 0赞

## 小程序 跨端兼容，条件编译 ##

**[跨段兼容][Link 1]**

uni-app 已将常用的组件、JS API 封装到框架中，开发者按照 uni-app 规范开发即可保证多平台兼容，大部分业务均可直接满足。

但每个平台有自己的一些特性，因此会存在一些无法跨平台的情况。

大量写 if else，会造成代码执行性能低下和管理混乱。  
编译到不同的工程后二次修改，会让后续升级变的很麻烦。  
在 C 语言中，通过 \#ifdef、\#ifndef 的方式，为 windows、mac 等不同 os 编译不同的代码。 uni-app 参考这个思路，为 uni-app 提供了条件编译手段

**[条件编译][Link 1]**  
写法：以 \#ifdef 或 \#ifndef 加 %PLATFORM% 开头，以 \#endif 结尾。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3oxOTAyNzM3MDA3_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3oxOTAyNzM3MDA3_size_16_color_FFFFFF_t_70 1]  
**写法**：以 \#ifdef 或 \#ifndef 加 %MP% 开头，以 \#endif 结尾。

1.\#ifdef：if defined 仅在某平台存在  
2.\#ifndef：if not defined 除了某平台均存在

\#ifdef

只在MP端显示

\#ifndef

不在MP端显示

**组件条件编译**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3oxOTAyNzM3MDA3_size_16_color_FFFFFF_t_70 2]

**js条件编译**

用双斜杠的方式    
    // js代码

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3oxOTAyNzM3MDA3_size_16_color_FFFFFF_t_70 3]

**样式条件编译**

用/*   */的方式  不能用  //

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3oxOTAyNzM3MDA3_size_16_color_FFFFFF_t_70 4]  
**以上只写了 \#ifdef 的写法 ，\#ifndef的写法一样**

[Link 1]: https://uniapp.dcloud.io/platform
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3oxOTAyNzM3MDA3_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020010520174936.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3oxOTAyNzM3MDA3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3oxOTAyNzM3MDA3_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200105202423401.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3oxOTAyNzM3MDA3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3oxOTAyNzM3MDA3_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200105201908329.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3oxOTAyNzM3MDA3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3oxOTAyNzM3MDA3_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200105202258423.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3oxOTAyNzM3MDA3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3oxOTAyNzM3MDA3_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200105202101586.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3oxOTAyNzM3MDA3,size_16,color_FFFFFF,t_70