你的位置:首页 > 信息动态 > 新闻中心
信息动态
联系我们

uni-app跨端兼容之条件注释

2021/12/22 0:03:43

跨端兼容对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技巧