uniapp多端语法兼容性的写法

时间：2021年03月14日

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

uniapp的语法兼容标签

#ifdef #ifndef #endif三者的意思

#ifdef	仅在某个平台上使用
#ifndef	在除了这个平台的其他平台上使用(非此平台使用）
#endif	结束条件编译

认识各端平台标识的意思

标识	平台
APP-PLUS	5+App
MP	微信小程序/支付宝小程序/百度小程序/头条小程序/QQ小程序
MP-WEIXIN	微信小程序
MP-ALIPAY	支付宝小程序
MP-BAIDU	百度小程序
MP-TOUTIAO	头条小程序
MP-QQ	QQ小程序
H5	H5
APP-PLUS-NVUE	5+App nvue

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

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

/*\n	可以使用// 或者 <!-- -->\n*/\n// #ifdef APP-PLUS\n <view>仅在5+app平台上显示代码</view>\n// #endif\n\nmethods: {\n	// #ifdef APP-PLUS\n	click(){\n	  console.log('仅在5+app平台上生效的事件')\n	},\n	// #endif\n}

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

/*\n	可以使用// 或者 <!-- -->\n*/\n<!-- #ifndef APP-PLUS -->\n <view>只要不是5+app平台上此代码会显示</view>\n<!-- #endif -->\n\nmethods: {\n	<!-- #ifndef APP-PLUS -->\n	click(){\n	   console.log('非5+app平台上生效的事件')\n	},\n	<!-- #endif -->\n}

css 中使用

// 除H5以外的平台使用\n.box{\n /* #ifndef H5 */\n  position: fixed;\n  top: 0;\n  left: 0;\n  /* #endif*/\n}

小结：使用uniapp“颠覆性”多端的开发，你需要掌握它多端的兼容性语法。