Multi-terminal development of WeChat applets and H5 page style issues in uniapp

Preface: When we do multi-terminal development, introduce plug-ins or write self-written pages, we will find that sometimes the styles of the pages opened in WeChat developer tools and opened in browsers or other ways are problematic, so how do we proceed? Solve it?

Browser page opening effect

WeChat developer tools page opening effect

It can be displayed normally in WeChat, so we have to change the style of one side

1. Method

1. Writing in html:

在html中我们可以这样写：
H5
 <!-- #ifdef H5 -->
           <view> 样式 </view>
  <!-- #endif -->

微信
 <!-- #ifdef  MP-WEIXIN -->
            <view> 样式 </view>
 <!-- #endif -->

2. Writing in css:

//#ifdef H5
    .topSearch { 
            top: 88rpx;
        }

// #endif


// #ifdef MP-WEIXIN
        .topSearch{
            top: 0rpx !important;
        }
// #endif

2. When using some components in the plug-in market, change the style of a certain component:: v-deep !important

There is nothing to explain, just go to the code

::v-deep .uni-numbox__minus{
    border: 1px solid #ddd;
}
::v-deep .uni-numbox-btns{
    border: 1px solid #ddd;
}
::v-deep .uni-input-input{
    background-color: #fff !important;
}

Here I directly changed the style of the counter in the plug-in. In the case that ::v-deep does not respond alone, we can directly change the style manually by adding !important