uni-app基础本文已参与「新人创作礼」活动，一起开启掘金创作之路。这里介绍uni-app的基础知识。uni-app是

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

1、什么是uni-app

uni-app是一个使用Vue.js开发跨平台应用的前端框架。

开发者通过编写Vue.js代码，uni-app将其编译到iOS、Android、微信小程序、支付宝、百度小程序、H5等多个平台。保证其正确运行并达到优秀体验。

2、创建uni-app（VScode）

a.环境安装：

全局安装vue-cli： cnpm install -g @vue/cli

b.创建uni-app：

创建： vue create -p dcloudio/uni-preset-vue my-project
提示选择项目模板，初次体验建议选择 hello uni-app 项目模板（可自定义）
在vscode中打开项目
安装vue语法提示插件vetur
cli工程默认带了uni-app语法提示和5+App语法提示
安装组件语法提示： cnpm i @dcloudio/uni-helper-json
运行项目： cnpm run dev:platform platform取值：h5(H5)、mp-alipay、mp-weixin(微信小程序)、mp-qq、

b.注意（HBuilderX 工程）

HBuilderX 创建的工程默认不带 types 语法提示，在 vscode 中编辑的时候，可以自行安装
初始化npm： cnpm init -y
安装uni-app语法提示： npm i @types/uni-app @types/html5plus -D

3、开发规范

页面文件遵循 Vue 单文件组件 (SFC) 规范
组件标签靠近小程序规范，详见uni-app 组件规范
接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范
数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期
为兼容多端运行，建议使用flex布局进行开发

4、资源路径说明

模板内引入静态资源
js文件引入（js文件不支持 / 开头的方式引入）
css引入静态资源（js文件不支持 / 开头的方式引入）
Tips引入

5、生命周期

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

a. onLaunch 当uni-app 初始化完成时触发（全局只触发一次）

b. onShow 当uni-app 启动，或从后台进入前台显示

c. onHide 当uni-app 从前台进入后台

d. onError 当uni-app 报错时触发

e. onUniNViewMessage 对nvue 页面发送的数据进行监听

页面生命周期

  onLoad、onShow、onReady、onHide、onUnload、onResize、onPullDownRefresh、
  onReachBottom、onTabItemTap、onShareAppMessage、onPageScroll、
  onNavigationBarButtonTap、onBackPress、onNavigationBarSearchInputChanged、
  onNavigationBarSearchInputConfirmed、onNavigationBarSearchInputClicked

6、路由

需在pages.json里配置每个路由页面的路径及页面样式，（插件市场Vue-Router）
两种页面跳转方式： navigator组件跳转、调用API跳转。
框架以栈的形式管理当前所有页面，路由切换：

a. 初始化：uni-app打开的第一个页面；

b. 打开新页面：调用 API   uni.navigateTo  、使用组件

c. 页面重定向：调用 API   uni.redirectTo  、使用组件

d. 页面返回：调用 API uni.navigateBack   、使用组件  、用户按左上角返回按钮、安卓用户点击物理back按键

e. Tab 切换：调用 API uni.switchTab 、使用组件    、用户切换 Tab

f. 重加载：调用 API uni.reLaunch 、使用组件

7、页面样式与布局

尺寸单位

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

b. rpx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度 750rpx;

c. 若设计稿宽度为 640px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设为：750 * 100 / 640，结果为：117rpx。
样式导入
选择器

a. .class #firstname view view::after view::before

b. after、before 只在小程序和app中生效

c. 在uni-app 中不能使用 * 选择器

d. page 相当于 body 节点
css变量

a. --status-bar-height ：系统状态栏高度；

b. --window-top ：内容区域距离顶部的距离；

c. --window-bottom：内容区域距离底部的距离；
布局

采用flex布局；（适应各种显示设备和屏幕尺寸）

8、 `<template/>` 和 `<block/>`

<template/> 和 <block/> 并不是一个组件，它们仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。
支持在 template 模板中嵌套 <template/> 和 <block/>，用来进行列表渲染和条件渲染。

9、 renderjs

renderjs 是一个运行在视图层的js，只支持app-vue和h5；
作用：

a. 大幅降价逻辑层和视图层的通讯损耗，提供高性能视图交互能力；

b. 在视图层操作dom，运行for web 的js库。
使用：

设置script 节点的lang 为renderjs

uni-app基础

1、 什么是uni-app

2、 创建uni-app（VScode）

3、 开发规范

4、 资源路径说明

5、 生命周期

6、 路由

7、 页面样式与布局

8、 <template/> 和 <block/>