uni-app进阶

990 阅读2分钟

我正在参加跨端技术专题征文活动,详情查看:juejin.cn/post/710123


软件配置

软件的配置项都放在了manifest.json,包含基础的应用名称、描述、版本等 还有一些关于app、h5、小程序、快应用的配置项,根据实际情况配置,假设需要开发的是app,那么像小程序的配置是不需要配置的。 image.png

页面创建

项目右键-新建-vue文件 image.png

运行

根据项目需求,选择运行到哪个端 运行-运行到浏览器-Chrome image.png

应用生命周期

比较常用的就是onLaunch、onShow

uni-app 支持如下应用生命周期函数:onLaunch、onShow、onHide、onError 、onUniNViewMessage、onUnhandledRejection、onPageNotFound、onThemeChange

	// App.vue使用方法
	export default {
            // 当uni-app初始化完成时触发(全局只触发一次)
            onLaunch: function() {
            },
            // 当uni-app启动,或从后台进入前台显示
            onShow: function() {
            },
            // 当uni-app从前台进入后台
            onHide: function() {
            },
            // 当uni-app报错时触发
            onError: function() {
            },
            // 对nvue页面发送的数据进行监听
            onUniNViewMessage: function() {
            },
            // 对未处理的 Promise 拒绝事件监听函数
            onUnhandledRejection: function() {
            },
            // 页面不存在监听函数
            onPageNotFound: function() {
            },
            // 监听系统主题变化
            onThemeChange: function() {
            },
            
	}

页面生命周期

uni-app 支持如下页面生命周期函数:

export default {
            // 监听页面初始化
            onInit: function() {
            },
            // 监听页面加载,其参数为上个页面传递的数据
            onLoad: function() {
            },
            // 监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面
            onShow: function() {
            },
            // 监听页面初次渲染完成
            onReady: function() {
            },
            // 监听页面隐藏
            onHide: function() {
            },
            // 监听页面卸载
            onUnload: function() {
            },
            // 监听窗口尺寸变化
            onResize: function() {
            },
            // 监听页面初次渲染完成
            onPullDownRefresh: function() {
            },
            // 页面滚动到底部的事件(不是scroll-view滚到底),常用于下拉下一页数据
            onReachBottom: function() {
            },
            // 点击tab时触发
            onTabItemTap: function() {
            },
            // 用户点击右上角分享
            onShareAppMessage: function() {
            },
            // 监听页面滚动,参数为Object
            onPageScroll: function() {
            },
            // 监听原生标题栏按钮点击事件,参数为Object
            onNavigationBarButtonTap: function() {
            },
            // 监听页面返回
            onBackPress: function() {
            },
            // 监听原生标题栏搜索输入框输入内容变化事件
            onNavigationBarSearchInputChanged: function() {
            },
            // 监听原生标题栏搜索输入框搜索事件,用户点击软键盘上的“搜索”按钮时触发。
            onNavigationBarSearchInputConfirmed: function() {
            },
            // 监听原生标题栏搜索输入框点击事件(pages.json 中的 searchInput 配置 disabled 为 true 时才会触发)
            onNavigationBarSearchInputClicked: function() {
            },
            // 监听用户点击右上角转发到朋友圈
            onShareTimeline: function() {
            },
            // 监听用户点击右上角收藏
            onAddToFavorites: function() {
            },
            
	}