uni-app学习心得

目录

一、uni-app介绍

1.什么是uni-app?

2.为什么要选择uni-app？

 二、功能框架图

 三、创建uni-app

1.通过HBuilderX可视化界面创建

1.1安装HBuilderX

1.2创建创建uni-app

 1.3运行uni-app

 2.通过vue-cli命令行创建

2.1环境安装

2.2创建uni-app

2.3运行uni-app

3.cli创建项目和HBuilderX可视化界面创建项目的区别

四、目录结构

五、生命周期

六、路由

1.路由跳转

七、页面栈

 八、页面代码规范介绍

九、组件

十、API

十一：学习拓展资料

---

一、uni-app介绍

1.什么是uni-app?

Uni-app（全称为 UNIversal Application ，中文名为“跨平台开发框架”）是由 DCloud 基于 Vue.js 开发的一个跨平台前端框架，旨在提供基于 Vue.js 的统一开发框架，一份代码可编译成 H5、小程序、App 等多个平台。使用 Uni-app，可以减少多平台开发时的重复投入、提高开发效率和降低开发成本，具有非常广阔的应用前景。

2.为什么要选择uni-app？

1. 跨平台开发：使用 Uni-app，开发者无需在不同平台上单独开发，只需编写一份代码就可同时适用于 H5、微信小程序、支付宝小程序、百度小程序、头条小程序和 App 等多个平台。

• 基于 Vue.js：Uni-app 采用基于 Vue.js 的开发方式，学习成本较小，便于开发者上手，同时拥有 Vue.js 的一些特性，如组件化开发、数据双向绑定等。

• 代码复用：Uni-app 技术上给予开发者大量的灵活性，可以通过 mixin 和 vue-router 来对一些常用方法和组件进行复用，提升代码复用性。

• 性能优秀：Uni-app 充分利用了各个平台的优势，如大力压缩文件大小，OTA 发布等，以及针对不同平台进行了专门的优化和适配，保证了运行性能的稳定和流畅。

• 社区支持：Uni-app 有一个完善的社区支持和大量的开源组件，开发者可以方便地获取最新信息，同时在社区中获取技术支持。

 二、功能框架图

 三、创建uni-app

1.通过HBuilderX可视化界面创建

1.1安装HBuilderX

可视化的方式比较简单，HBuilderX内置相关环境，开箱即用，无需配置nodejs。

开始之前，开发者需先下载安装如下工具：

HBuilderX：官方IDE下载地址       

1.2创建创建uni-app

完成安装后，打开软件进入到首页，点击工具栏里的文件 -> 新建 -> 项目（快捷键Ctrl+N）

选择uni-app类型，输入工程名，选择模板，点击创建，即可成功创建。uni-app自带的模板有 默认的空项目模板、Hello uni-app 官方组件和API示例，还有一个重要模板是 uni ui项目模板，日常开发推荐使用该模板，已内置大量常用组件。

 1.3运行uni-app

浏览器运行：进入uniapp项目，点击工具栏的运行 -> 运行到浏览器 -> 选择浏览器，即可在浏览器里面体验uni-app 的 H5 版

运行App到手机或模拟器：连接手机，开启USB调试，进入uniapp项目，点击工具栏的运行 -> 真机运行 -> 选择运行的设备，即可在该设备里面体验uni-app。

 在微信开发者工具里运行：进入uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验uni-app。

 在支付宝小程序开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 支付宝小程序开发者工具，即可在支付宝小程序开发者工具里面体验uni-app。

 2.通过vue-cli命令行创建

除了HBuilderX可视化界面，也可以使用 cli 脚手架，可以通过 vue-cli 创建 uni-app 项目。

2.1环境安装

全局安装 vue-cli

npm install -g @vue/cli

2.2创建uni-app

使用正式版（对应HBuilderX最新正式版）

vue create -p dcloudio/uni-preset-vue my-project

使用alpha版（对应HBuilderX最新alpha版）

vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project

2.3运行uni-app

npm run dev:%PLATFORM%
npm run build:%PLATFORM%

3.cli创建项目和HBuilderX可视化界面创建项目的区别

界面化HbuilderX创建的项目会跟随HBuilderX升级升级，反之，命令式创建的不会，需要代码执行手动升级 - npm update

还有插件的使用，HbuilderX使用插件更加简单，直接界面化操作安装插件启用即可，而命令式需要命令安装依赖。

四、目录结构

一个uni-app工程，默认包含如下目录及文件： 

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

五、生命周期

1.应用生命周期

uni-app 支持如下应用生命周期函数：

2.页面生命周期

uni-app 支持如下页面生命周期函数：

3.组件生命周期

uni-app 组件支持的生命周期，与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期：

六、路由

uni-app页面路由为框架统一管理，开发者需要在pages.json里配置每个路由页面的路径及页面样式。类似小程序在 app.json 中配置页面路由一样。所以 uni-app 的路由用法与 Vue Router 不同，如仍希望采用 Vue Router 方式管理路由，可在插件市场搜索 Vue-Router。

1.路由跳转

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

七、页面栈

框架以栈的形式管理当前所有页面， 当发生路由切换的时候，页面栈的表现如下：

路由方式	页面栈表现	触发时机
初始化	新页面入栈	uni-app 打开的第一个页面
打开新页面	新页面入栈	调用 API   uni.navigateTo  、使用组件  <navigator open-type="navigate"/>
页面重定向	当前页面出栈，新页面入栈	调用 API   uni.redirectTo  、使用组件  <navigator open-type="redirectTo"/>
页面返回	页面不断出栈，直到目标返回页	调用 API  uni.navigateBack   、使用组件 <navigator open-type="navigateBack"/> 、用户按左上角返回按钮、安卓用户点击物理back按键
Tab 切换	页面全部出栈，只留下新的 Tab 页面	调用 API  uni.switchTab  、使用组件  <navigator open-type="switchTab"/>  、用户切换 Tab
重加载	页面全部出栈，只留下新的页面	调用 API  uni.reLaunch  、使用组件  <navigator open-type="reLaunch"/>

 八、页面代码规范介绍

uni-app 支持在 template 模板中嵌套 <template/> 和 <block/>，用来进行 列表渲染 和 条件渲染。<template/> 和 <block/> 并不是一个组件，它们仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。<block/> 在不同的平台表现存在一定差异，推荐统一使用 <template/>。

代码示例

<template>
	<view>
		<template v-if="test">
			<view>test 为 true 时显示</view>
		</template>
		<template v-else>
			<view>test 为 false 时显示</view>
		</template>
	</view>
</template>

<template>
	<view>
		<block v-for="(item,index) in list" :key="index">
			<view>{{item}} - {{index}}</view>
		</block>
	</view>
</template>

九、组件

组件可分为不同类型，大致如下，详见：

视图容器
基础内容
表单组件
导航
媒体组件
地图
画布
webview
广告
小程序开放能力组件
APP nvue专用组件
扩展组件
导航栏

十、API

uni-app开发API可分为不同类型，大致如下，详见：

基础
网络
路由与页面跳转
数据缓存
位置
媒体
设备
Worker
键盘
界面
页面和窗体
文件
绘画
广告
第三方服务
平台扩展
其他

十一：学习拓展资料

uni-app官网
uni-app插件市场
uni-app项目github地址
Vue.js 基础教程