跨端兼容之条件注释

参考：
uni-app跨端兼容之条件注释_uniapp在不同的端展示不同的代码注释什么-CSDN博客

跨端兼容对uni来说确实是挺有必要的，因为uni-app本身就是一个多端开发的技术，可以用于多种应用但也难免存在不同应用的兼容问题 例如 一个功能在网页端能正常执行 但放到小程序或APP应用中就没用了，确实我觉得多端兼容实现的并不完全算是兼容 叫条件注释更恰当一些 就是判断当前端口 例如我写一段代码 我只希望用户是通过小程序访问我的应用时才展示这段代码的效果 当你用h5页面或者app打开我应用时 方法则不会执行 这段代码相当于注释了 那你就可以来用uni-app的条件注释

元素的条件注释

	<!-- #ifdef H5 -->
	 <view>我只会在H5页面出现</view>
	<!-- #endif -->
	<!-- #ifdef MP-WEIXIN -->
	  <view>只有在微信小程序中可以看见我</view>
	<!-- #endif -->
	<!-- #ifdef APP-PLUS -->
	  <view>只有在app应用中才能看见我</view>
	<!-- #endif -->

样式的条件注释

view{
  /* H5页面中生效 */
  /* #ifdef H5 */
  background-color: #4CD964;
  /* #endif */
  /* 微信小程序中生效 */
  /* #ifdef MP-WEIXIN */
  background-color: #999999;
  /* #endif */
  /* APP中生效 */
  /* #ifdef APP-PLUS */
  background-color: #3F536E;
  /* #endif */
}

逻辑代码条件注释

// #ifdef H5
console.log('我会在H5页面中打印');
// #endif
// #ifdef MP-WEIXIN
  console.log('我会在微信小程序中打印');
// #endif
// #ifdef APP-PLUS
  console.log('我会在app应用中打印');
// #endif

这样你就会发现 只有在对应应用打开 代码才会出现 非常简单好用的uni-app技巧