有学过微信小程序开发和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运行到 浏览器

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

Logo

前往低代码交流专区

更多推荐