目录
3.cli创建项目和HBuilderX可视化界面创建项目的区别
一、uni-app介绍
1.什么是uni-app?
Uni-app(全称为 UNIversal Application ,中文名为“跨平台开发框架”)是由 DCloud 基于 Vue.js 开发的一个跨平台前端框架,旨在提供基于 Vue.js 的统一开发框架,一份代码可编译成 H5、小程序、App 等多个平台。使用 Uni-app,可以减少多平台开发时的重复投入、提高开发效率和降低开发成本,具有非常广阔的应用前景。
2.为什么要选择uni-app?
跨平台开发:使用 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 配置页面路由、导航条、选项卡等页面类信息;
五、生命周期
uni-app 支持如下应用生命周期函数:
uni-app 支持如下页面生命周期函数:
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 基础教程