pages.json
pages:路由文件,第一个为初始化首页
globleStyle:全局配置API
tabBar:底部按钮配置
easycom:只要组件安装在项目的components目录下,符合规范,就可以不用引用、注册,直接在页面中使用。
"easycom": {
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue",
"^shopro-(.*)": "@/components/shopro-$1/shopro-$1.vue"
}
subPackages:分包加载配置,此配置为小程序的分包加载机制。
preloadRule:分包预载配置。
生命周期
onLoad: 监听页面加载,其参数为上个页面传递的数据,参数类型为Object(用于页面传参)
onShow: 监听页面显示
onReady: 监听页面,初次渲染完成
onHide: 监听页面隐藏
onUpload: 监听页面卸载
onPullDownRefresh: 监听用户下拉动作,一般用于下拉刷新
onReachBottom: 页面滚动到底部的事件,常用于下拉下一页数据
onShareAppMessage: 用户点击右上角分享
onPageScroll: 监听页面滚动
onTabltemTap: 点击tab时触发
onNavigationBarButtonTap: 监听原生标题栏按钮点击事件
组件生命周期
beforeCreate: 在实例初始化之前被调用
created: 在实例创建完成之后被立即调用
beforeMount: 在挂载开始之前被调用
mounted: 挂载到实例上去之后调用(注意:这里并不能确定子组件被全部挂载,如果需要子组件完全挂载之后在执行操作可以使用$nextTick)
beforeUpdate: 数据更新时调用,发生在虚拟DOM打补丁之前
updated: 由于数据更改导致虚拟DOM重新渲染和打补丁,在这之后会调用该钩子
beforeDestroy: 实例销毁之前调用,在这一步,实例仍然完全可用
destroyed: 实例销毁后调用。调用后,所有东西都会解绑定,所有事件监听器会被移除,所有子实例会被销毁
页面通讯
uni.$emit(eventName,OBJECT)
eventName:事件名
OBJECT:触发事件携带的附加参数(object)
uni.$on(eventName,callback)
eventName:事件名
callback:事件的回调函数
uni.$once():监听全局的自定义事件。但是只触发一次
uni.$off():移除全局自定义事件监听器
路由跳转
1、使用navigator组件跳转,类似<a>标签,但只能跳转本地页面。目标页面必须在pages.json中注册
2、调用API跳转
uni.navigateTo():保留当前页面,跳转到应用内某个页面,使用uni.navigateBack可以返回到原页面
uni.redirectTo():关闭当前页面,跳转到应用内的某个页面
uni.reLaunch():关闭所有页面,打开到应用内的某个页面
uni.switchTab():跳转到tabBar页面,并关闭其他所有非tabBar页面
uni.navigateBack():关闭当前页面,返回上一页或者多级页
JS语法
不支持window、document、navigator等浏览器专用对象
CSS语法
支持的通用单位包括px、rpx
rpx既响应式px,一种根据屏幕宽度自适应的动态单位。
以750宽的屏幕为基准,750rpx恰好为屏幕的宽度。
rem 根字体大小可以通过 [page-meta]配置
vh viewpoint height,视窗高度,1vh 等于视窗高度的 1%
vw viewpoint width,视窗宽度,1vw 等于视窗宽度的 1%
存储
存储到本地:uni.setStorage
获取本地缓存的值:uni.getStorage
移除:removeStorage
清理本地缓存:clearStorage
以上带有Sync后缀的是同步的,其他是异步的
接口请求
uni.request方式请求接口
条件编译
条件编译是用特殊的注释作为标记,在编译时根据这些特殊的注释,将注释里面的代码编译到不同平台。


系统信息
异步:uni.getSystemInfo()
同步:uni.getSystemInfoSync()
安装运行环境层级排序,从底层向上,uni-app有6个概念
1、device:运行应用的设备,如iphone、huawei
2、os:设备的操作系统,如ios、andriod、windows、mac、linux
3、rom:基于操作系统的定制,Android系统特有概念,如miui、鸿蒙
4、host:运行应用的宿主程序,既os和应用之间的运行环境,如浏览器、微信小程序,uni-app直接开发的app没有Host概念
5、uni:uni-app框架相关的信息,如uni-app框架的编译器版本、运行时版本
6、app:开发者的应用相关的信息,如应用名称、版本
uniapp常用事件
change:输入框改变
focus:获取焦点
blur:失去焦点
confirm:点击完成按钮/回车键
click:单击事件
top:组件被触摸
longpress:长时间按压
touchstart:触摸动作开始
touchend:触摸结束
touchmove:手指触摸移动
touchcancel:触摸被打断
事件修饰符在uniapp会有以下问题
stop:使用stop可以阻止冒泡,但是会把一个事件绑定成非冒泡状态,会导致该元素上的catchEventName失效
prevent:uniapp中基本没有什么默认事件,所以prevent阻止默认事件的行为基本没用
self:没有可以判断的标识
once:uniapp没有removeEventListner,虽然可以直接在handleProxy中处理,但非常的不优雅,违背了意愿,暂不考虑
按键修饰符:uniapp运行在智能手机端,没有键盘事件,所以不支持案件修饰符
遇到的问题和解决方案
uni-app中button本身的边框线问题:button::after{ border: none !important;}
app端只显示icon,不显示文字;可能在配置的在pages.json中设置tabBar ,font-siez用的rpx为单位,在这里只能用px;
uniapp 开发小程序,视频在Android正常播放,ios上黑屏?
粗暴解决法: 加一句代码: :controls="false" ,但可能造成掉帧现象
swiper中高度无法自适应
采用动态获取节点赋值给外层swiper组件
页面跳转
uni.switchTab是只能用于跳转到tabbar页面,并关闭其他非tabbar页面,tabbar之间做切换,navigateTo:保留当前页(隐藏),跳转到指定页。
页面传值
如果传字符串、数字可以直接拼接在路径后面,如果传对象,要先用JSON.stringify()转成字符串,接收页面再用JSON.parse()转为对象。
Push推送要先在manifest.json下配置权限,然后在dcloud开发中心开通,接收推送消息在app.vue的onLaunch中。
App热更新,打wgt包时要注意,manifest.json下修改版本名称和版本号,在app.vue的onLaunch中调用。
uniapp不能使用浏览器对象
在uniapp开发中 使用window、document等浏览器对象不会生效,存在这些的话uniapp将无法打包成功,最好使用 uniapp官方的api
网络请求最好使用uni.request()
页面字体适配,不推荐使用rem,官方有自己的rpx单位也相对实用
在mian.js 挂载$fontSize变量