注意事项

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

微信小程序

注意

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

支付宝小程序

注意

uView需要开启了component2模式才支持支付宝小程序

1. 支付宝在很早前，已升级为component2模式，此模式支持更多的功能和特性，uni-app上，很多的特性，如provide/inject、$slots等，需要开启此模式才能支持， 而此模式在uni-app新建项目中默认是关闭的，因而需要在项目根目录的manifest.json中开启，如没有alipay属性节点，新增即可：

......
"mp-alipay" : {
	"component2": true
},
......

2. uView的waterfall瀑布流组件使用了$scoped slot特性，由于hx的问题，在hx2.8.2修正了此问题，所以瀑布流组件需要hx2.8.2及以上才支持支付宝小程序。

Vue特性在各平台支持度

1. 以下特性，uView已对各小程序开发工具，H5浏览器，APP(不含NVUE)进行过实测，均获得支持，其中支付宝小程序需要开启component2模式。

App（vue）	App（nvue）	H5	小程序
√	√	√	√

• provide / inject
• $slots
• v-model / sync
• $parent / $children

设置页面背景颜色

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

1. 通过page节点设置

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

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

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

2. 通过页面外层view设置

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

<template>
	<view class="wrap">
		......
	</view>
</template>
<style scoped>
.wrap {
	background-color: $u-bg-color;
	min-height: 100vh;
}
</style>

全局赋值设备信息的陷阱

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

// main.js
Vue.prototype.system = uni.getSystemInfoSync();

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

小程序主包太大无法预览和发布

我们都知道微信小程序预览和发布的主包大小都不能超过2M，否则无法真机预览和上传发布，经常有同学反馈刚使用uView，调试时候主包就超过了2M而无法真机预览， 我们在这里做一个说明，uView是按需引入的，在发行时，HX会自动剔除您没有使用组件，即使您使用了uView的全部组件，整个uView的大小也只有500K左右，但是有如下两点前提：

• 调试
  在调试阶段，为了调试的友好效果和编译速度等，HX默认是没有对JS进行压缩和去除注释，也没有进行组件按需引入的，所以会导致JS文件都很大，我们需要在 HBuilder X进行如下操作，再重新编译即可：

HBuilderX   运行->运行到小程序模拟器->勾选 运行时是否压缩代码

• 发布
  在HX中进行发布时，uView的组件会按需引入(使用uView所有组件的情况下，占用空间500k左右)，如果主包依然超出2M，您需要从多个方面着手：

1. 小程序分包
2. 将静态资源放到服务器进行引用
3. 取消"ES6转ES5"设置

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>

"$u"被占用

uView有很多的自带的js工具函数，挂载在$u对象中，而$u又挂载在Vue.prototype中，所以，请勿占用$u变量名并 挂载到Vue.prototype。

uView对nvue的支持

什么是nvue？见关于nvue
在uview2.0中，我们为兼容nvue做了不懈的努力，终于在无数个日夜后将vue和nvue打通在uview2.0的版本中，我们相信： 您在使用2.0版本的uview开发nvue时将会如鱼得水，信手拈来。

技术点要求

1. uView依赖SCSS预处理器，所以您需要给HBuilder X安装 “sass/scss编译” 插件，详见快速上手
2. uView基于HX的最新版本开发，旧版本可能会不兼容，如遇问题，请升级HX尝试是否可解决
3. uView要求项目开启uniapp的V3版本，V3有很大的优势，详见V3版本介绍
4. HX2.5.5稳定版正式引入easycom，建议开发者升级HX到2.5.1及以上的稳定版，详见关于easycom

关于Hbuilder X

uniapp依赖于HX，uniapp经过这两年发展(2018-2020)，势头强劲，茁壮成长。我们目睹了整个过程，陪着uniapp一起成长，感慨能有 一家良心企业能扎根技术，埋头苦干，把APP，H5还有各家小程序做到大一统，同时也愤慨各家大厂的小程序各自为营，仿佛倒退到多年前 各家浏览器大战的时代，让人唏嘘不已。
根据我们的经验，我们强烈建议:

• 开发者在开发线上项目的时候只使用HX的稳定版
• 初学者不要使用HX内测版，不然会碰到莫名其妙的问题，会挫败学习信心
• 每当HX更新大功能的时候，比如以往的自定义组件模式，近来的V3版本，还是目前的uniCloud，或者以后可能关于nuve的大功能，线上项目请过一段时间再使用。
• 建议喜欢尝鲜并熟悉uniapp的用户，在电脑分别安装HX的稳定版和内测版，尝鲜使用内测版，开发使用稳定版，二者分别更新，互不干扰

编译调试

开发的时候，特别是写布局的时候，我们建议使用chrome或者HX内置的浏览器，需要说明的是，电脑浏览器的预览效果是不精细的， 写完之后，可以手机连上电脑同一局域网的WiFi，在手机浏览器上再进行细微的调整。
写完布局再写逻辑的时候，如果还需要兼容小程序和APP，一定要每写完一个页面，就用APP基座和小程序真机进行调试，这能及早发现问题，否则会剪不断理还乱。

内网穿透

有时候需要通过花生壳等工具，进行内网穿透，让外部的人可以访问到本地的调试网页，这时由于webpack-dev-server会默认检查hostname， 去掉此限制即可，在uniapp项目根目录下新建vue.config.js文件(如果有，不用创建)，修改如下内容：

module.exports = {
	configureWebpack: {
		devServer: {
			disableHostCheck: true
		}
	}
}

安全区适配(针对APP)

在iPhone X等机型，底部带有指示条，如果配置了safearea则会在底部生成一个原生的白色区块，好处是不会导致 误触，缺点是颜色无法修改，有时候也影响美观。
uView在各个可能会受到指示条影响的地方都做了特别处理，比如弹窗，键盘组件等，详见底部安全区适配

为什么uView的源码中会有那么多的注释？

很多开源项目，发布的时候都会刻意去掉注释，这可能是为了干净整洁，也可能是为了减少体积，还可能是出品方认为用户不会，也没必要去阅读源码。
相反，uView不这么认为，我们会一直将注释保留在发行的版本中，这些注释不是为了给我们自己看的，而是为了给用户看的。
我们希望用户在使用的过程中，能通过阅读源码，既能提升工作效率，还能学到知识。因为uView的理念是"挣脱束缚，向往自由"，我们也希望您在阅读 源码的过程中，如果发现问题，或者有更好的实现方式和想法，可以反馈给我们，进而构建一个更强健的UI框架。