uniapp多端语法兼容性的写法

使用uniapp，可以开发一次多端覆盖。如果你要开发一个微信小程序，你可以选择使用微信官方的原生代码开发，但是你也只能是开发了一个微信的小程序应用。你也可以选择uniapp,同样可以开发一个微信小程序，可以说是“殊途同归”，但是绝不仅于此，使用uniapp开发的同时，你除了发布微信小程序应用之外，同时还可以发布app以及h5应用（当然还有很多其它端的应用，这里就不举了）。当然了，并不是你使用uniapp开发完微信小程序就可以多端发布，这里需要作一下不同端的语法兼容性处理，下面看一下是怎么处理的。

uniapp的语法兼容标签

#ifdef #ifndef #endif三者的意思

#ifdef仅在某个平台上使用

#ifndef在除了这个平台的其他平台上使用(非此平台使用）

#endif结束条件编译

认识各端平台标识的意思

标识平台

APP-PLUS5+App

MP微信小程序/支付宝小程序/百度小程序/头条小程序/QQ小程序

MP-WEIXIN微信小程序

MP-ALIPAY支付宝小程序

MP-BAIDU百度小程序

MP-TOUTIAO头条小程序

MP-QQQQ小程序

H5-H5

APP-PLUS-NVUE5+App nvue

认识了上面的语法标签和平台标识，接下来结合列子看下

仅在5+app平台上此代码生效

/*

    可以使用// 或者 <!-- -->

*/

// #ifdef APP-PLUS

 <view>仅在5+app平台上显示代码</view>

// #endif

methods: {

    // #ifdef APP-PLUS

    click(){

      console.log('仅在5+app平台上生效的事件')

    },

    // #endif

}

非5+app平台上此代码生效

/*

    可以使用// 或者 <!-- -->

*/

<!-- #ifndef APP-PLUS -->

 <view>只要不是5+app平台上此代码会显示</view>

<!-- #endif -->

methods: {

    <!-- #ifndef APP-PLUS -->

    click(){

       console.log('非5+app平台上生效的事件')

    },

    <!-- #endif -->

}

css 中使用

// 除H5以外的平台使用

.box{

 /* #ifndef H5 */

  position: fixed;

  top: 0;

  left: 0;

  /* #endif*/

}

小结：使用uniapp“颠覆性”多端的开发，你需要掌握它多端的兼容性语法。更多技术文档请关注君兰IT