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中监听，在其它页面监听无效。

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

• 组件生命周期

页面适配

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({
    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":"./"
    }

插件市场