uni-app官网
目录结构
┌─uniCloud 云空间目录,阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb(详见uniCloud)
│─components 符合vue组件规范的uni-app组件目录
│ └─comp-a.vue 可复用的a组件
├─utssdk 存放uts文件
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ └─list
│ └─list.vue list页面
├─static 存放应用引用的本地静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此
├─uni_modules 存放[uni_module](/uni_modules)。
├─platforms 存放各平台专用页面的目录,详见
├─nativeplugins App原生语言插件 详见
├─nativeResources App端原生资源目录
│ └─android Android原生资源目录 详见
├─hybrid App端存放本地html文件的目录,详见
├─wxcomponents 存放小程序组件的目录,详见
├─unpackage 非工程代码,一般存放运行或发行的编译结果
├─AndroidManifest.xml Android原生应用清单文件 详见
├─main.js Vue初始化入口文件
├─App.vue 应用配置,用来配置App全局样式以及监听 应用生命周期
├─manifest.json 配置应用名称、appid、logo、版本等打包信息,详见
├─pages.json 配置页面路由、导航条、选项卡等页面类信息,详见
└─uni.scss 这里是uni-app内置的常用样式变量
1.页面
新建页面
uni-app
中的页面,通常会保存在工程根目录下的pages
目录下。每次新建页面,均需在
pages.json
中配置pages
列表;未在pages.json -> pages
中配置的页面,uni-app
会在编译阶段进行忽略。pages.json的完整配置参考:全局文件。
删除页面
删除页面时,需做两件工作:
- 删除
.vue
文件或.nvue
文件- 删除
pages.json -> pages
列表项中的配置
2.生命周期
生命周期分为页面生命周期和组件生命后期。
页面生命周期
常用页面生命周期
1:onLoad 监听页面加载,其参数为上个页面传递的数据,参数类型为 Object(用于页面传参)示例
2:onShow 监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面
3:onReady 监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发
4:onPullDownRefresh 监听用户下拉动作,一般用于下拉刷新
5:onReachBottom 页面滚动到底部的事件(不是scroll-view滚到底),常用于下拉下一页数据。具体见下方注意事项
option
//在起始页面跳转到test.vue页面并传递参数
uni.navigateTo({
url: 'test?id=1&name=uniapp'
});
// 在test.vue页面接受参数
export default {
onLoad: function (option) { //option为object类型,会序列化上个页面传递的参数
console.log(option.id); //打印出上个页面传递的参数。
console.log(option.name); //打印出上个页面传递的参数。
}
}
组件生命周期
常用组件生命周期
beforeCreate 在实例初始化之前被调用。详见 created 在实例创建完成后被立即调用。详见 beforeMount 在挂载开始之前被调用。详见 mounted 挂载到实例上去之后调用。详见 注意:此处并不能确定子组件被全部挂载,如果需要子组件完全挂载之后在执行操作可以使用 $nextTick
Vue官方文档beforeUpdate 数据更新时调用,发生在虚拟 DOM 打补丁之前。详见 仅H5平台支持 updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。详见 仅H5平台支持 beforeDestroy 实例销毁之前调用。在这一步,实例仍然完全可用。详见 destroyed Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。详见
uniapp入门
1:页面编写
2:组件引用
3:路由跳转
4:数据渲染
1:页面编写
CSS语法 uniappCSS支持
uni-app 的 css 与 web 的 css 基本一致。本文没有讲解 css 的用法。在你了解 web 的 css 的基础之上,本文讲述一些样式相关的注意事项。
uni-app
支持的通用 css 单位包括 px、rpx
- px 即屏幕像素
- rpx 即响应式 px,一种根据屏幕宽度自适应的动态单位。以 750 宽的屏幕为基准,750rpx 恰好为屏幕宽度。屏幕变宽,rpx 实际显示效果会等比放大,但在 App(vue2 不含 nvue) 端和 H5(vue2) 端屏幕宽度达到 960px 时,默认将按照 375px 的屏幕宽度进行计算,具体配置参考:rpx 计算配置
Flex 布局
为支持跨平台,框架建议使用 Flex 布局,关于 Flex 布局可以参考外部文档A Complete Guide to Flexbox、阮一峰的 flex 教程等
view视图容器 它类似于传统html中的div,用于包裹各种元素内容。
text相当于span
scroll-view可滚动视图区域。用于区域滚动。
scroll-x Boolean false 允许横向滚动 scroll-y Boolean false 允许纵向滚动
一般知道这些差异都可以完成页面编写了
tabBar
如果应用是一个多 tab 应用,可以通过 tabBar 配置项指定一级导航栏,以及 tab 切换时显示的对应页。
在 pages.json 中提供 tabBar 配置,不仅仅是为了方便快速开发导航,更重要的是在App和小程序端提升性能。在这两个平台,底层原生引擎在启动时无需等待js引擎初始化,即可直接读取 pages.json 中配置的 tabBar 信息,渲染原生tab。
图标可以去阿里图标库阿里巴巴矢量图标库
组件引用
传统vue项目开发,引用组件需要导入 - 注册 - 使用
三个步骤,如下:
uni-app
的easycom
机制,将组件引用进一步优化,开发者只管使用,无需考虑导入和注册,更为高效:
组件传值
子接收父
路由跳转
常用路由
navigator
页面跳转。
该组件类似HTML中的
<a>
组件,但只能跳转本地页面。目标页面必须在pages.json中注册。uni.navigateTo(OBJECT)
保留当前页面,跳转到应用内的某个页面,使用
uni.navigateBack
可以返回到原页面。
参数 类型 必填 默认值 说明 平台差异说明 url String 是 需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 'path?key=value&key2=value2',path为下一个页面的路径,下一个页面的onLoad函数可得到传递的参数 //在起始页面跳转到test.vue页面并传递参数 uni.navigateTo({ url: 'test?id=1&name=uniapp' });
uni.redirectTo(OBJECT)
关闭当前页面,跳转到应用内的某个页面。
参数 类型 必填 说明 url String 是 需要跳转的应用内非 tabBar 的页面的路径,路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 'path?key=value&key2=value2' uni.navigateBack(OBJECT)
关闭当前页面,返回上一页面或多级页面。可通过
getCurrentPages()
获取当前的页面栈,决定需要返回几层。
数据渲染
网络请求
uni.request(OBJECT)
发起网络请求。
uni.request({
url: 'https://www.example.com/request', //仅为示例,并非真实接口地址。
data: {
text: 'uni.request'
},
header: {
'custom-header': 'hello' //自定义请求头信息
},
success: (res) => {
console.log(res.data);
this.text = 'request success';
}
});
接口封装
后面再更新