初识 uni app

uni app是什么？

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

快速上手（vscode编辑器）

1.安装脚手架

cnpm i -g @vue/cli

2.创建uniapp

tips:dcloudio/uni-preset-vue 如果安装不成功，可以去github下载到本地进行安装创建项目

vue create -p dcloudio/uni-preset-vue uniapp-demo

3.选择模板，生成项目

选择模板

项目目录

tips:生成以下目录树，首先安装tree, brew install tree ,执行tree -L 3 -I "node_modules" ，具体参数可看tree文档

├── README.md //说明
├── babel.config.js //babel 的配置文件
├── package.json //依赖模块
├── postcss.config.js //postcss 配置文件，autoprefixer插件可以自动生成浏览器前缀； 
├── public //发布页面入口
│   └── index.html
├── src
│   ├── App.vue //应用配置，用来配置App全局样式以及监听
│   ├── main.ts //Vue初始化入口文件
│   ├── manifest.json //配置应用名称、appid、logo、版本等打包信息
│   ├── pages //页面
│   │   └── index
│   │       └── index.vue
│   ├── pages.json //配置页面路由、导航条、选项卡等页面类信息
│   ├── sfc.d.ts
│   ├── static // 公共静态资源
│   │   └── logo.png
│   └── uni.scss //通用样式
├── tsconfig.json
└── yarn.lock

生命周期

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

函数名	说明
onLaunch	当uni-app 初始化完成时触发（全局只触发一次)
onShow	当 uni-app 启动，或从后台进入前台显示
onHide	当 uni-app 从前台进入后台

页面生命周期tips:先触发 uni-app onReady ，后触发 vue 的 mounted 建议使用uni-app的onLoad 代替 vue的 created

函数名	说明
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），参考示例
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏
onUnload	监听页面卸载
onResize	监听窗口尺寸变化
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新，参考示例
onReachBottom	页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项
onTabItemTap	点击 tab 时触发，参数为Object，具体见下方注意事项
onShareAppMessage	用户点击右上角分享
onPageScroll	监听页面滚动，参数为Object
onNavigationBarButtonTap	监听原生标题栏按钮点击事件
onBackPress	监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack ；详细说明及使用：onBackPress 详解。支付宝小程序只有真机能触发，只能监听非navigateBack引起的返回，不可阻止默认行为。
onNavigationBarSearchInputChanged	监听原生标题栏搜索输入框输入内容变化事件
onNavigationBarSearchInputConfirmed	监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。
onNavigationBarSearchInputClicked	监听原生标题栏搜索输入框点击事件
onShareTimeline	监听用户点击右上角转发到朋友圈
onAddToFavorites	监听用户点击右上角收藏

组件生命周期

函数名	说明
beforeCreate	在实例初始化之后被调用
created	在实例创建完成后被立即调用
beforeMount	在挂载开始之前被调用
mounted	挂载到实例上去之后调用
beforeDestroy	实例销毁之前调用。在这一步，实例仍然完全可用
destroyed	Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁

页面适配

uni-app 支持的通用 css 单位包括 px、rpx

rpx 是由微信小程序提出一种方案，解决自适应屏幕尺寸的尺寸单位，即响应式 px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大，但在 App 端和 H5 端屏幕宽度达到 960px 时，默认将按照 375px（iphone6）的屏幕宽度进行计算

// px换算rpx
1px = 2rpx  //举个例子，字体大小是12px,换算为rpx应该是24rpx

标签与组件相关

文件配置相关

页面跳转及路由

uniapp 有自己一套路由管理机制，而未采用vue-route方案

函数名	说明
uni.navigateTo	保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
uni.redirectTo	关闭当前页面，跳转到应用内的某个页面。
uni.reLaunch	关闭所有页面，打开到应用内的某个页面。
uni.switchTab	跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
uni.navigateBack	关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。
uni.preloadPage	预加载页面，是一种性能优化技术。被预载的页面，在打开时速度更快。

uni. navigateTo({
    url:'/pages/index/index',
    success(){
        console.log('成功跳转页面')
    }
})

请求

uniapp 提供网络请求的 api 是 uni.request，具体支持的请求方法可以参考官网
在各个小程序平台运行时，网络相关的 API 在使用前需要配置域名白名单。
不支持jsonp，跨域问题需要再mainfest.json中配置跨域代理

uni.request({
    url: 'https://xxx.xxx.xxx/request', //仅为示例，并非真实接口地址。
    data: {
        text: 'demo'
    },
    method:'POST',
    header: {
        'Content-Type' : 'application/json',
    },
    success: (res) => {
        console.log(res.data);
    }
});

补充

如果不需要支持app端，则文件可以直接是.vue，如需支持则是.nvue
uniapp支持两种渲染引擎
- h5,小程序走的是webview渲染
- app走的是weex渲染【原生】
uni-app在打包成h5时，默认是不支持直接打开的，因为打包出来是（/xxx/xxx）这种格式，可在vue.config中配置publicPath,把它配置成（./），但在uni-app中找不到这个文件的。其中官网有提到点击查看publPath。

 "h5" : {  
        "publicPath":"./"
    }