uni-app

uni-app 介绍

uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架。
适用平台：Android、iOS、微信小程序。实现了一套代码，同时发布到Android、iOS、微信小程序。
官方：uni-app官网

开发工具

（1）HBuilderX
下载地址：http://www.dcloud.io/hbuilderx.html
（2）微信开发者工具
下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

HBuilderX模拟器连接

MuMu模拟器 || 雷电模拟器

目录介绍

┌─components            uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─hybrid                存放本地网页的目录，详见
├─platforms             存放各平台专用页面的目录，详见
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用静态资源（如图片、视频等）的地方，注意：静态资源只能存放于此
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息，详见
└─pages.json            配置页面路由、导航条、选项卡等页面类信息，详见

页面配置

全局配置（globalStyle）

"navigationBarTextStyle": "white",
导航栏文字颜色( 非white即black)
"navigationBarTitleText": "uni-app",
导航栏标题
"navigationBarBackgroundColor": "#F70",
导航栏背景颜色
"backgroundColor": "#F8F8F8"
窗口的背景颜色

单个页面配置（pages）

path路径
style
1、会覆盖全局的globalStyle
mp-weixin
微信配置
h5
网页端配置
app-plus
app端配置    同其他修改背景方法不同

 uniapp生命周期

应用生命周期

函数名	说明
onThemeChange	监听系统主题变化
onLaunch	当uni-app 初始化完成时触发（全局只触发一次）
onShow	当 uni-app 启动，或从后台进入前台显示
onHide	当 uni-app 从前台进入后台
onError	当 uni-app 报错时触发
onUniNViewMessage	对 nvue 页面发送的数据进行监听，可参考 nvue 向 vue 通讯
onUnhandledRejection	对未处理的 Promise 拒绝事件监听函数
onPageNotFound	页面不存在监听函数

 // 只能在App.vue里监听应用的生命周期
    export default {
        onLaunch: function() {
            console.log('App Launch')
        },
        onShow: function() {
            console.log('App Show')
        },
        onHide: function() {
            console.log('App Hide')
        }
    }

路由

uni-app路由全部交给框架统一管理，开发者需要在pages.json里配置每个路由页面的路径及页面样式，不支持 Vue Router。

路由跳转

uni-app 有两种路由跳转方式：使用navigator组件跳转、调用API跳转。