mView

注意事项

由于uni-app支持多端开发，而各端，特别是各小程序平台，没有统一的标准，加重了开发者和企业的成本，幸好uni-app使用Vue标准，对各端进行了写法的统一， 推动了生态的发展，但是由于某些小程序平台自身的原因，仍然会出现某些兼容性问题，我们会将制作mView过程中遇到，和平时收集的兼容性问题呈现在本专题，希望能 帮助到uni-app开发者。(引言使用：uview)

演示注意

警告

演示组件时，可能点击效果不会生效，要想体验点击反馈效果建议手机模式查看。

微信小程序

注意

微信小程序基础库需要设置在2.19.2及以上

Vue特性在各平台支持度

App（vue）App (nvue)H5小程序
√×√√

注意：小程序主要实测微信小程序哦

设置页面背景颜色

一般情况下，我们给页面的page节点或者给页面的最外层view设置背景颜色，二者分别有如下需要注意点：

1. 通过page节点设置

这个方式全端有效，但是需要注意的是，在微信小程序，或者某些安卓机型上，该节点如果写在带scoped属性的样式标签内是无效的，所以我们建议 您可以在页面多加一个不带scoped属性的样式标签，如下：

/* 如果需要css的支持，还可以添加lang属性 */
<style lang="scss">
page {
	background-color: $m-bg-color;
}
</style>

/* 带scoed属性的其他样式 */
<style lang="scss" scoped>
.box {
	......
}
</style>

2. 通过页面外层view设置

相比page节点，view的高度默认为内容高度，所以如果页面内容不足一屏高度时，底部剩余部分依然为默认的白色，所以我们给需要这个view设置一个 最低高度，让它等于窗口高度：

<template>
	<view class="wrap">
		......
	</view>
</template>

<style scoped lang="scss">
.wrap {
	background-color: $m-bg-color;
	min-height: 100vh;
}
</style>

全局赋值设备信息的陷阱

我们都知道，可以通过uni.getSystemInfoSync()获取设备信息，但是每次用到时都写一遍是很繁琐的，所以很多同学们都会突发奇想，比如在main.js或者 在App.vue中将uni.getSystemInfoSync()的结果赋值给app.config.globalProperties，如下：

// main.ts
app.config.globalProperties.sys = uni.getSystemInfoSync()

上面的写法没有问题，我们可以任意地方通过this.sys得到设备的信息，但是这里有一个陷阱，写在main.ts，意味着赋值代码只会被执行一次，且是APP启动的时候， 但是uni-app中，设备信息的windowHeight属性是不含APP的导航栏和tabbar高度在内的，当我们进入首页时，windowHeight不含tabbar高度在内，高度可能为 '700px'，但是进入内页后，没有tabbar，这时的windowHeight高度依然为700px(少掉了tabbar的50px高度)，显然是不正确的。 上面说的只是对windowHeight属性有影响，其他的属性无碍，如果是需要获取高度，建议每次都执行uni.getSystemInfoSync()，或者通过uView提供的快捷工具 uni.$m.sys()方法获取即可。

uni.scss的优缺点

uni.scss为uni-app新建项目自带工程文件，使用的预处理器为sass/scss，由此可见，uni-app官方推荐的是scss，同时我们uView也是scss的坚定推崇者，不建议在 uni-app中使用less、stylus等。

uni.scss具有如下一些特点：

  • 无需引入，uni-app在编译时，会自动引入此文件
  • 在此中定义的scss变量，可以全局使用，可以在此定义一些颜色，主题，尺寸等变量
  • uni.scss会编译到每个scss文件中(请着重理解这一句话)

综上所述，我们可以得知，uni.scss主要是利用scss的特性，定义一些全局变量，供各个写了lang=scss的style标签引用，但是这引出了一个重要的问题： uni.scss中所写的一切内容，都会注入到每个声明了scss的文件中，这意味着，如果您的uni.scss如果有几百行，大小10k左右，那么这个10k都会被注入所有的 其他scss文件(页面)中，如果您的应用有50个页面，那么有可能因此导致整体的包体积多了50 * 10 = 500k的大小，这可能会导致小程序包太大而无法预览和发布， 所以，我们建议您只将scss变量相关的内容放到uni.scss中。

#样式覆盖兼容性

为了避免样式被用户覆盖，或者被污染，一般组件或者页面都会给style标签加上scoped属性，如下演示为一个组件的内部构造：

/* item.vue */
<template>
	<view class="item"></view>
</template>

<style scoped>
	.item {
		border: 1px solid red;
	}
</style>

我们在页面中引入上方的item组件，并且想修改它的border边框为颜色(blue)，一般通过v-deep或/deep/指令修改，如下写法：

<template>
	<item></item>
</template>

<style scoped>
::v-deep .item {
	border: 1px solid blue;
}
</style>

上面的写法，在App和H5正常，但是在微信小程序无效，它要求::v-deep或/deep/前面必须还要有父元素的类名存在，如下：

<template>
	<view class="wrap">
		<item></item>
	</view>
</template>

<style scoped>
.wrap ::v-deep .item {
	border: 1px solid blue;
}
</style>

如果是在支付宝小程序中，写在组件上的类名和内联样式，都是无效的，如下：

<template>
	/* 在支付宝小程序，组件标签上的任何class和style都会被剔除，不会添加到组件内部的根元素中 */
	<item style="border: 1px solid blue" class="item"></item>
</template>