使用#ifdef、#ifndef方法适配微信、支付宝、抖音

#ifdef MP-WEIXIN    //适配微信端

<!-- #ifdef MP-WEIXIN -->
      <view class="navigation-bar" :style="{ top: statusTop }">
        <text class="server-title">我的</text>
      </view>
<!-- #endif -->

如果想要自定义导航栏，则需要在pages.json中配置属性transparentTitle设置为auto和navigationStyle设置为custom

"style": {				
                "navigationBarTitleText": "客服中心",				
                
				"transparentTitle":"auto",				
				"navigationStyle": "custom",				
				
				//支付宝禁止下拉				
				"allowsBounceVertical":"NO",				
				//微信禁止下拉				
				"enablePullDownRefresh": false
				// "disableScroll": true
		 }

抖音自定义导航栏比较严重，所以需要适配才行，这里使用 // #ifndef MP-TOUTIAO 即可，其意思就是除抖音之外的

#ifndef是if not define的简写

{			
            "path": "pages/my/index",			
            "style": {				
                    "navigationBarTitleText": "我的",				
                    // #ifndef MP-TOUTIAO
				    "transparentTitle":"auto",				
				    "navigationStyle": "custom",				
				    // #endif
				   //支付宝禁止下拉				
				   "allowsBounceVertical":"NO",				
				   //微信禁止下拉				
				   "enablePullDownRefresh": false,				
				   "disableScroll": true
			}
},

// #endif 就是结尾标识，相当于闭合标签

完整代码示例

 //适配抖音、头条
 <!-- #ifdef  -->
      <div class="header items-center" style="margin-top: 20%;">
 <!-- #endif -->

 //适配微信
 <!-- #ifdef  -->
      <div class="header items-center" style="margin-top: 20%;">
 <!-- #endif -->

 //适配支付宝
 <!-- #ifdef  -->
      <div class="header items-center" style="margin-top: 20%;">
 <!-- #endif -->

 //适配除了抖音、头条之外的
 <!--  -->
      <div class="header items-center" style="margin-top: 20%;">
 <!-- #endif -->