大家好，我是林译川，今天我们来聊聊uniapp开发中的一些注意事项。uniapp作为一个跨平台的框架，虽然方便，但也有一些细节需要注意，否则可能会遇到一些意想不到的问题。
一、v-show 和 v-if 的选择
在uniapp中，v-show 和 v-if 的使用和Vue一样，但要注意的是，v-show 是基于 CSS 的 display 属性进行切换的，而 v-if 是条件渲染，如果频繁切换，v-if 的性能会更好。
二、typeof 的使用
在uniapp中，typeof 操作符在小程序中不支持，需要使用其他方式来判断数据类型。
三、for 循环中的 key 值
在 for 循环嵌套 for 循环时，key 的取值不能一样，否则会报错。
四、static 目录下的文件
static 目录下的 js 文件不会被编译，如果里面有 es6 的代码，不经过转换直接运行，在手机设备上会报错。
五、资源文件的位置
- css、less/scss 等资源同样不要放在 static 目录下，建议这些公用的资源放在 common 目录下。
- template 内引入静态资源，如 image、video 等标签的 src 属性时，可以使用相对路径或者绝对路径。
- js 文件不支持使用 / 开头的方式引入。
- css 文件或 style 标签内引入 css 文件时（scss、less 文件同理），只能使用相对路径。
六、环境判断
编译期判断环境可用条件编译，运行期判断可用 uni.getSystemInfoSync().platform 判断环境。
七、rpx 和 px 的使用
在字体或高度中使用了 rpx，那么需注意这样的写法意味着随着屏幕变宽，字体会变大、高度会变大。如果你需要固定高度，则应该使用 px。
八、App 端的特殊注意事项
- App 端，在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位，只支持 px，不支持 rpx。
- 小程序不支持在 css 中使用本地文件，包括本地的背景图和字体文件。需以 base64 方式方可使用。
- 背景图片微信小程序不支持相对路径（真机不支持，开发工具支持）。
- 字体图标网络路径必须加协议头 https。
九、非 H5 端的特殊注意事项
- 非 H5 端不支持使用含有 dom、window 等操作的 vue 组件和 js 模块，安装的模块及其依赖的模块使用的 API 必须是 uni-app 已有的 API。
- 小程序组件需要放在项目特殊文件夹 wxcomponents（或 mycomponents、swancomponents）。
- 当需要在 vue 组件中使用小程序组件时，注意在 pages.json 的 globalStyle 中配置 usingComponents，而不是页面级配置。
十、页面生命周期
uni-app 完全支持 vue 的生命周期，同时，增加了信息的生命周期，有了解过微信小程序，会更容易学习。
十一、条件编译
有些功能 h5 没有而小程序有（例如：扫码），可以通过条件编译来实现。
十二、省市区选择器
uni-app 上省市区选择器，兼容支付宝小程序写法，使用 uni-app 的三级联动，或者 pick。
十三、运行到微信开发者工具
运行到微信开发者工具需要在 Hbuilder 中设置运行设置，选择微信开发者工具根目录，还需要在微信开发者工具中开启服务器配置才行。
十四、关于 vue
- 注意：如果使用老版的非自定义组件模式，即 manifest 中 "usingComponents":false，部分模版语法不支持，但此模式已于 2019 年 11 月起下线。
- data 必须声明为返回一个初始数据对象的函数；否则页面关闭时，数据不会自动销毁，再次打开该页面时，会显示上次数据。
- class 支持的语法：...
十五、跨端开发注意事项
- 非 H5 端不支持 * 选择器；
- body 的元素选择器请改为 page，同样，div 和 ul 和 li 等改为 view、span 和 font 改为 text、a 改为 navigator、img 改为 image...
- 非 H5 端默认并未启用 scoped，如需要隔离组件样式可以在 style 标签增加 scoped 属性，H5 端为了隔离页面间的样式默认启用了 scoped
十六、关于体积控制
- 使用运行时代码压缩 HBuilderX 创建的项目勾选 运行-->运行到小程序模拟器-->运行时是否压缩代码
- cli 创建的项目可以在 package.json 中添加参数 --minimize，示例：...
十七、页面跳转
- navigateTo、redirectTo 只能打开非 tabBar 页面。
- switchTab 只能打开 tabBar 页面。
- reLaunch 可以打开任意页面。
十八、全局数据绑定
如果需要把 globalData 的数据绑定到页面上，可在页面的 onShow 页面生命周期里进行变量重赋值。
十九、关于 SEO
H5 平台是 SPA 单页应用，普通的 SEO 信息即加 meta 字段只能在自定义的模板 html 里配置首页。
二十、常见问题
- 如何获取上个页面传递的数据：在 onLoad 里得到，onLoad 的参数是其他页面打开当前页面所传递的数据。
- 如何设置全局的数据和全局的方法：uni-app 内置了 vuex，在 app 里的使用，可参考 hello-uniapp store/index.js。
- 如何捕获 app 的 onError：由于 onError 并不是完整意义的生命周期，所以只提供一个捕获错误的方法，在 app 的根组件上添加名为 onError 的回调函数即可。
以上就是 uniapp 开发中的一些注意事项，希望对大家有所帮助。我是林译川，关注新派编程网（www.xjpbg.com），了解更多编程知识。