初识 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":"./"
    }

插件市场