跨平台应用开发进阶 (一) :走近 uni-app
一、前言
跨平台是一种能够在多种平台(例如Android
,iOS
,Windows
,Blackberry
、小程序、快应用等)上运行的应用软件。基于此框架构建的应用程序不需要为每个平台进行单独的编码,而是一次编码就可以在多个平台上高效运行。它是当今应用程序开发领域中最受欢迎的方法之一。此篇博文主要梳理uni-app
应用的项目结构、项目启动后文件加载顺序,及应用、文件生命周期等知识点。其中,大部分内容主要参考uni-app官方文档,按照自己的思路重新梳理一遍而得。
跨平台框架中,uni-app
是 DCloud
出品的新一代跨端框架,可以说是目前跨端数最多的框架之一了,目前支持发布到:App
(Android/iOS
)、H5
、小程序(微信小程序/支付宝小程序/百度小程序/字节跳动小程序),目前市面上类似的框架还有:Taro
(京东出品)、Megalo
(网易出品)。
uni-app
的 nvue
说白了就是 weex
的那一套东西,uni-app
集成了 weex
的 SDK
,也就实现了 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.js
是uni-app
的入口文件,主要作用是初始化vue
实例、定义全局组件、使用需要的插件如vuex
。
首先引入了Vue
库和App.vue
,创建了一个vue
实例,并且挂载vue
实例。
使用Vue.use
引用插件,使用Vue.prototype
添加全局变量,使用Vue.component
注册全局组件。
⚠️注意,此处无法使用vue-router
,路由须在pages.json
中进行配置。如果开发者坚持使用vue-router
,可以在插件市场找到转换插件。
3.2 App.vue
App.vue
是uni-app
的主组件,所有页面都是在App.vue
下进行切换的,是页面入口文件。但App.vue
本身不是页面,这里不能编写视图元素。
这个文件的作用包括:调用应用生命周期函数、配置全局样式、配置全局的存储globalData
。
应用生命周期仅可在App.vue
中监听,在页面监听无效。
uni-app
支持 onLaunch
、onShow
、onHide
等应用生命周期函数,
注意⚠️
应用生命周期仅可在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
的时候要注意,在onLaunch
,onShow
生命周期函数中不能直接使用getApp().globalData
,应用会报错。因为getApp()
在这两个生命周期函数中还没有创建出app
实例。正确用法如下:
4.2 页面生命周期
uni-app
支持如下页面生命周期函数:
注意⚠️:
onPageScroll
里不要写交互复杂的js
,比如频繁修改页面。因为这个生命周期是在渲染层触发的,在非 h5 端,js
是在逻辑层执行的,两层之间通信是有损耗的。如果在滚动过程中,频发触发两层之间的数据交换,可能会造成卡顿。如果想实现滚动时标题栏透明渐变,在 App 和 H5 下,可在
pages.json
中配置titleNView
下的type
为transparent
。如果需要滚动吸顶固定某些元素,推荐使用
css
的粘性布局。在 App、微信小程序、H5 中,也可以使用
wxs
监听滚动;在app-nvue
中,可以使用bindingx
监听滚动。onBackPress
上不可使用async
,会导致无法阻止默认返回。
onPageScroll
滚动监听示例如下:
4.3 组件生命周期
uni-app
组件支持的生命周期,与vue
标准组件的生命周期相同。这里没有页面级的onLoad
等生命周期:
五、拓展阅读
《uniapp门户》
版权声明: 本文为 InfoQ 作者【No Silver Bullet】的原创文章。
原文链接:【http://xie.infoq.cn/article/fd6341f288b5be086f009bc3b】。文章转载请联系作者。
评论