uniapp新手必须的知道的坑

有学过微信小程序开发和vue的，uniapp开发成本低，但是还是不能忽视了注意事项，别给自己带来麻烦，以下是我从官网上抽取的，希望接下来的开发能够顺利进行，文字有点多，但细看益处多多，go~~~

开发工具下载标准版，在运行或发行uni-app时，会提示安装uni-app插件
下载App开发版，可开箱即用
如使用cli方式创建项目，可直接下载标准版，因为uni-app编译插件被安装到项目下了。
可以通过 vue-cli 创建 uni-app 项目。
接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni
数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期
为兼容多端运行，建议使用flex布局进行开发
static 目录下的 js 文件不会被编译，如果里面有 es6 的代码，不经过转换直接运行，在手机设备上会报错。
css、less/scss 等资源同样不要放在 static 目录下，建议这些公用的资源放在 common 目录下。
生命周期函数onUniNViewMessage 对 nvue 页面发送的数据进行监听
onlaunch里进行页面跳转，如遇白屏报错，请参考https://ask.dcloud.net.cn/article/35942
页面生命周期:
onResize 监听窗口尺寸变化 5+App、微信小程序
onNavigationBarButtonTap 监听原生标题栏按钮点击事件，参数为Object 5+ App、H5
onBackPress 监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack ；详细说明及使用：onBackPress 详解
5+App、H5
onNavigationBarSearchInputChanged 监听原生标题栏搜索输入框输入内容变化事件 5+App、H5 1.6.0
onNavigationBarSearchInputConfirmed 监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。 5+App、H5 1.6.0
onNavigationBarSearchInputClicked 监听原生标题栏搜索输入框点击事件 5+App、H5 1.6.0
在HBuilderX 中，点击“运行”编译出来的代码是开发环境，点击“发行”编译出来的代码是生产环境
switch(uni.getSystemInfoSync().platform){
case ‘android’:
console.log(‘运行Android上’)
break;
case ‘ios’:
console.log(‘运行iOS上’)
break;
default:
console.log(‘运行在开发者工具上’)
break;
}

1
2
3
4
5
6
7
8
9
10
11
12
uni-app 支持的通用 css 单位包括 px、rpx
https://uniapp.dcloud.io/frame?id=%e5%88%a4%e6%96%ad%e5%b9%b3%e5%8f%b0
不同平台在编译出包后已经是不同的代码
alert(“只有h5平台才有alert方法”)
App端，在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位，只支持 px。注意此时不支持 rpx
uni-app 在 App 端、H5 端都支持了 rpx。
rpx不支持动态横竖屏切换计算，使用rpx建议锁定屏幕方向
如果设计稿不是750px，HBuilderX提供了自动换算的工具，详见：https://ask.dcloud.net.cn/article/35445。
早期 uni-app 提供了 upx ，目前已经推荐统一改为 rpx 了
在 uni-app 中不能使用 * 选择器。
page 相当于 body 节点
nvue页面暂不支持全局样式
下图是内置css变量，专用于处理各平台兼容问题

height: var(–status-bar-height);
bottom: calc(var(–window-bottom) + 10px)
需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 “+”, “-”, “*”, “/” 运算；
calc()函数使用标准的数学运算优先级规则；
NavigationBar和TabBar高度是固定不可修改的

css设置背景图片需注意

和 不会在页面中做任何渲染，只接受控制属性。

1
2
App端Android支持不依赖Android版本号。因为uni-app的js代码运行在自带的独立jscore中，没有js的浏览器兼容性问题。uni-app的vue页面在Android低端机上只有css浏览器兼容性问题，因为vue页面仍然渲染在webview中，受Android版本影响，太新的css语法在低版本不支持。
为多端兼容考虑，建议优先从 uni-app插件市场 获取插件。直接从 npm 下载库很容易只兼容H5端。
非 H5 端不支持使用含有 dom、window 等操作的 vue 组件和 js 模块，安装的模块及其依赖的模块使用的 API 必须是 uni-app 已有的 API（兼容小程序 API），比如：支持高德地图微信小程序 SDK。类似jQuery 等库只能用于H5端。
uni-app 支持在 App 和 小程序 中使用小程序自定义组件（但是推荐用vue组件）
使用方式
在 pages.json 对应页面的 style -> usingComponents 引入组件

使用vue.js注意事项：
data 必须声明为返回一个初始数据对象的函数；否则页面关闭时，数据不会自动销毁，再次打开该页面时，会显示上次数据。
为兼容各端，事件需使用 v-on 或 @ 的方式绑定，请勿使用小程序端的bind 和 catch 进行事件绑定。
按键修饰符：uni-app运行在手机端，没有键盘事件，所以不支持按键修饰符。
uni-app 支持配置全局组件，需在 main.js 里进行全局注册（就跟vue开发一样），注册后就可在所有页面里使用该组件。
nvue页面暂不支持全局组件
Vue.component(‘page-head’,pageHead)
当重复设置某些属性为相同的值时，不会同步到view层。https://uniapp.dcloud.io/use?id=%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f
在普通的 H5+ 项目中，需要使用 document.addEventListener 监听原生扩展的事件。

uni-app 中，没有 document。可以使用 plus.globalEvent.addEventListener 来实现（注意manifest中需开启新编译器，即自定义组件模式"usingComponents":true）。
条件编译（对于某些平台，这是注释了的代码）
// #ifdef APP-PLUS
// 监听设备网络状态变化事件
plus.globalEvent.addEventListener(‘netchange’, function(){});
// #endif
body的元素选择器请改为page，同样，div和ul和li等改为view、span和font改为text、a改为navigator、img改为image（也就是使用小程序的标签）
如果你的H5和小程序界面正常，而App界面异常，大多是因为css兼容性。解决这类问题，可以在caniuse查询，也可以使用一个较低版本的chrome浏览器在H5端测试。
这不是不能使用flex，Android4.4也支持flex，只是不要使用太新的css。
不要在引用组件的地方在组件属性上直接写 style=“xx”，要在组件内部写样式
uni-app 基于Vue 2.0实现
发布时注意啦～～～（路径配置）

H5 版 uni-app 全支持 vue 语法，所以可能造成部分写法在 H5 端生效，在小程序或 App 端不生效。
如果遇到了白屏或网络不给力的提示，一般是跨域问题，网络请求（request、uploadFile、downloadFile等）在浏览器存在跨域限制，需服务端配合才能跨域。
如果你想在原生tabbar 上方悬浮一个菜单，之前写 bottom:0。这样的写法编译到 h5 后，这个菜单会和 tabbar 重叠，位于屏幕底部。而改为使用 bottom:var(–window-bottom)，则不管在 app 下还是在h5下，这个菜单都是悬浮在 tabbar 上浮的（这就是上面提到的内置css变量的实际应用）。
CSS 內使用 vh 单位的时候注意 100vh 包含导航栏，使用时需要减去导航栏和 tabBar 高度，部分浏览器还包含浏览器操作栏高度，使用时请注意。
正常支持 rpx，px 是真实物理像素。
组件内（页面除外）不支持 onLoad、onShow 等页面生命周期。
进入 uni-app 项目，点击工具栏的运行 -> 运行到浏览器 -> 选择 Chrome，即可将 uni-app运行到 浏览器

复制不完 将就看吧 都是些我见过的小毛病 没啥新奇的
不知道是复制谁的了 好久的东西了 在备忘录里存着的