一文带你走近uni-app

举报
SHQ5785 发表于 2022/03/11 08:58:44 2022/03/11
【摘要】 一、前言跨平台是一种能够在多种平台(例如Android,iOS,Windows,Blackberry、小程序、快应用等)上运行的应用软件。基于此框架构建的应用程序不需要为每个平台进行单独的编码,而是一次编码就可以在多个平台上高效运行。它是当今应用程序开发领域中最受欢迎的方法之一。此篇博文主要梳理uni-app应用的项目结构、项目启动后文件加载顺序,及应用、文件生命周期等知识点。其中,大部分...

一、前言

跨平台是一种能够在多种平台(例如AndroidiOSWindowsBlackberry、小程序、快应用等)上运行的应用软件。基于此框架构建的应用程序不需要为每个平台进行单独的编码,而是一次编码就可以在多个平台上高效运行。它是当今应用程序开发领域中最受欢迎的方法之一。此篇博文主要梳理uni-app应用的项目结构、项目启动后文件加载顺序,及应用、文件生命周期等知识点。其中,大部分内容主要参考uni-app官方文档,按照自己的思路重新梳理一遍而得。

跨平台框架中,uni-appDCloud 出品的新一代跨端框架,可以说是目前跨端数最多的框架之一了,目前支持发布到:AppAndroid/iOS)、H5、小程序(微信小程序/支付宝小程序/百度小程序/字节跳动小程序),目前市面上类似的框架还有:Taro(京东出品)、Megalo(网易出品)。

uni-appnvue 说白了就是 weex 的那一套东西,uni-app 集成了 weexSDK,也就实现了 App 端的原生渲染能力。

weex 支持的东西,在 nvue 里大多都是支持的。

二、项目结构

一个uni-app工程,默认包含如下目录及文件:
在这里插入图片描述
在这里插入图片描述

三、文件加载顺序

参照vue项目启动后调用顺序: index.html → main.js → app.vue → index.js → components/组件

uni-app项目启动后文件调用顺序为: index.html → main.js → app.vue → pages.json → components/组件

3.1 main.js

main.jsuni-app入口文件,主要作用是初始化vue实例、定义全局组件、使用需要的插件如vuex

首先引入了Vue库和App.vue,创建了一个vue实例,并且挂载vue实例。

import Vue from 'vue'
import App from './App'
import pageHead from './components/page-head.vue' //全局引用page-head组件

Vue.config.productionTip = false
Vue.component('page-head', pageHead) //全局注册page-head组件,每个页面将可以直接使用该组件
App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount() //挂载Vue实例

使用Vue.use引用插件,使用Vue.prototype添加全局变量,使用Vue.component注册全局组件。

⚠️注意,此处无法使用vue-router,路由须在pages.json中进行配置。如果开发者坚持使用vue-router,可以在插件市场找到转换插件。

3.2 App.vue

App.vueuni-app的主组件,所有页面都是在App.vue下进行切换的,是页面入口文件。但App.vue本身不是页面,这里不能编写视图元素。

这个文件的作用包括:调用应用生命周期函数、配置全局样式、配置全局的存储globalData

应用生命周期仅可在App.vue中监听,在页面监听无效。

uni-app 支持 onLaunchonShowonHide应用生命周期函数

<script>  
    export default {  
        onLaunch: function() {  
            console.log('App Launch,app启动')  
        },  
        onShow: function() {  
            console.log('App Show,app展现在前台')  
        },  
        onHide: function() {  
            console.log('App Hide,app不再展现在前台')  
        }  
    }  
</script>

注意⚠️

应用生命周期仅可在App.vue中监听,在其它页面监听无效。
App.vue 不能写模板。

3.3 pages.json

pages.json 文件用来对 uni-app 进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部原生tabbar 等。

它类似微信小程序中app.json的页面管理部分。注意定位权限申请等原属于app.json的内容,在uni-app中是在manifest.json中配置。

其中,uni-app 通过 pages 节点配置应用由哪些页面组成,pages 节点接收一个数组,数组每个项都是一个对象,其属性值如下:

在这里插入图片描述
Tips🌹:

  • pages节点的第一项为应用入口页(即首页);
  • 应用中新增/减少页面,都需要对 pages 数组进行修改;
  • 文件名不需要写后缀,框架会自动寻找路径下的页面资源;

四、生命周期

主要分为应用生命周期、组件生命周期及页面生命周期。

4.1 应用生命周期

uni-app 支持如下应用生命周期函数:
在这里插入图片描述
注意⚠️:
js中操作globalData的时候要注意,在onLaunchonShow生命周期函数中不能直接使用getApp().globalData,应用会报错。因为getApp()在这两个生命周期函数中还没有创建出app实例。正确用法如下:

<script>
	export default {
		globalData: {
			isIphoneX: false,
			provider: 'weixin' //'alipay' 'baidu' 'toutiao'
		},
		onLaunch: function() {
			console.log('App Launch')
			this.init()
		},
		onShow: function() {
			console.log('App Show')
			 setTimeout(() => {
			 	let provider = getApp().globalData.provider
			 	console.log(`globalData is: ${provider}`)
			 }, 0)
		},
		onHide: function() {
			console.log('App Hide')
		},
		methods: {
			init() {
				this.$nextTick(function(){
					let provider = getApp().globalData.provider
					console.log(`liubbc provider: ${provider}`)
				})
				let context = this
				uni.getSystemInfo({
					success: function(res) {
						context.globalData.isIphoneX = res.model.indexOf('iPhone X') != -1 ? true : false
					}
				})
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						context.globalData.provider = res.provider[0] || 'weixin'
					}
				});			
			},
		}
	}
</script>
 
<style>
	/*每个页面公共css */
	@import '@/common/css/common.css';
</style>

4.2 页面生命周期

uni-app 支持如下页面生命周期函数:
在这里插入图片描述
在这里插入图片描述
注意⚠️:

  • onPageScroll里不要写交互复杂的js,比如频繁修改页面。因为这个生命周期是在渲染层触发的,在非h5端,js是在逻辑层执行的,两层之间通信是有损耗的。如果在滚动过程中,频发触发两层之间的数据交换,可能会造成卡顿。
  • 如果想实现滚动时标题栏透明渐变,在App和H5下,可在pages.json中配置titleNView下的typetransparent
  • 如果需要滚动吸顶固定某些元素,推荐使用css的粘性布局。
  • 在App、微信小程序、H5中,也可以使用wxs监听滚动;在app-nvue中,可以使用bindingx监听滚动。
  • onBackPress上不可使用async,会导致无法阻止默认返回。

onPageScroll滚动监听示例如下:

onPageScroll : function(e) { //nvue暂不支持滚动监听,可用bindingx代替
    console.log("滚动距离为:" + e.scrollTop);
},

4.3 组件生命周期

uni-app 组件支持的生命周期,与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期:
在这里插入图片描述

五、拓展阅读

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。