跨平台应用开发进阶(一) ：走近 uni-app

文章目录

一、前言
二、项目结构
三、文件加载顺序
- 3.1 main.js
- 3.2 App.vue
- 3.3 pages.json
四、生命周期
- 4.1 应用生命周期
- 4.2 页面生命周期
- 4.3 组件生命周期
五、延伸阅读 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 → router/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实例。

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.vue是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。但App.vue本身不是页面，这里不能编写视图元素。

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

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

uni-app 支持 onLaunch、onShow、onHide 等应用生命周期函数，

<script>  export default {  onLaunch: function() {  console.log('App Launch，app启动')  },  onShow: function() {  console.log('App Show，app展现在前台')  },  onHide: function() {  console.log('App Hide，app不再展现在前台')  },globalData: {// 登录用户信息userInfo: {},// 是否已登录hasLogin: false,// tokentoken: '',// 设备信息deviceInfo: {},// 是否有更新可用hasNew: false,config: {}}}
</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