从新手到熟悉使用uni-app引导学习文档

一:新建uni-app
二:运行可通过h5页面,微信小程序,自己的手机。
三:工程目录
在这里插入图片描述

pages:存放每个页面组件
static:存放静态资源
unpackage:打包后存在这里
App.vue:根文件
main.js:主入口文件
manifest.json:一些app配置
pages.json:存放页面路径(样式)和全局路径(样式)
uni.scss:内置样式

四:官网了解样式
五:配置tabbar(样式参考文档)
如果应用是一个多tab应用,可以通过tabBar配置项指定tab栏的表现,以及tab切换时显示的对应页。(list至少有两项)
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

六:condition启动模式配置
启动模式配置,仅开发期间生效,用于模拟直达页面的场景,如:小程序转发后,用户点击所打开的页面。
在这里插入图片描述

在这里插入图片描述

七:组件:uni-app提供了丰富的基础组件给开发者,开发者可以像搭积木一样,组合各种组件拼接成自己的应用。(组件丰富,官方文档了解)
在这里插入图片描述

text文本组件
在这里插入图片描述
在这里插入图片描述

view(=div)

在这里插入图片描述
在这里插入图片描述

button(属性丰富,参考官方文档)

在这里插入图片描述
在这里插入图片描述

媒体组件image

在这里插入图片描述
在这里插入图片描述

八:uni-app中的样式

在这里插入图片描述
在这里插入图片描述

引入css的方式:
1 直接组件页面内

引入icon字体图表:
1 static中引入文件夹fonts
在这里插入图片描述

2 App.vue 公共样式中引入
@import url("./static/fonts/iconfont.css");

3 iconfont.css 文件中修改路径

原路径加上:~@/static/fonts/
在这里插入图片描述

4 view中引用:iconfont必须要

在这里插入图片描述

引入scss文件:
1 下载scss编译插件
2 标签

九:数据绑定(跟Vue99%差不多)

在这里插入图片描述
在这里插入图片描述

十:生命周期

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

下拉刷新:onPullDownRefresh(属于生命周期函数)
在js中定义onPullDownRefresh处理函数(和onLoad等生命周期函数同级),监听该页面用户下拉刷新事件。

1 先在json给予下拉刷新权限
在这里插入图片描述

2 监听下拉刷新:(下拉刷新触发的动作)
在这里插入图片描述

3 uni.stopPullDownRefresh 停止刷新

4 可通过按钮来触发下拉刷新

在这里插入图片描述

触底加载新内容:onReachBottom

在这里插入图片描述

可以在json中配置,距离底部多远触发触底加载函数:
在这里插入图片描述

在这里插入图片描述

十一:网络请求(get)

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

十二:数据缓存
1 设置点击事件触发uni.setStorage ; uni.getStorage;uni.removeStorage 分别存储;查询;删除数据。
2 浏览器在Application的 Local Storage里面查询;微信小程序在Storage里面查询。

在这里插入图片描述

在这里插入图片描述

十三:上传图片(参考官方文档)
在这里插入图片描述

1 通过点击事件触发uni.chooseImage函数上传图片
2 this.imgArr = res.tempFilePaths 将图片地址赋予给图片数组
3 v-for循环呈现图片
在这里插入图片描述

预览图片
在这里插入图片描述

在这里插入图片描述

十四:条件编译的跨端兼容
html内容:
在这里插入图片描述

js内容跨端兼容:
在这里插入图片描述

css内容跨端兼容:
在这里插入图片描述

十五:uni中的导航跳转
声明式导航
在这里插入图片描述

编程式导航
在这里插入图片描述
在这里插入图片描述

导航传参:
地址后面直接 (?id=80&page=1) 就可以。接受参数的网页onload里面接收参数。
在这里插入图片描述

附:open-type属性:跳转页面的方式(声明式跳转)

在这里插入图片描述

十六:uni-app中组件的创建(与vue相同)
组件的生命周期函数与vue相同
1 beforeCreate
2 create
3 beforeMount
4 mount
5 beforeUpdate
6 update
7 beforeDestroy
8 destroy
在这里插入图片描述

十七:uni-app组件的通讯
父向子传值:
1 父组件中子组件绑定数据
在这里插入图片描述

2 子组件通过props:[‘ ‘} 接收父组件的数据
在这里插入图片描述

子向父组件传值:
1 子组件通过点击事件调用方法:
在这里插入图片描述

2 方法中 this.$emit(‘myEven’, this.num):触发父组件的myEven并且传递数据
3 父组件接收数据:
在这里插入图片描述

在这里插入图片描述

兄弟组件之间的传值
a ----> b
1 a组件通过uni.$emit全局触发事件并且传递参数
在这里插入图片描述

2 b组件通过uni.$on全局监听并且接收参数(在created()方法里面进行)
在这里插入图片描述

十八:uni ui 扩展组件
在这里插入图片描述

1 下载
2 import 引入
3 注册
4 调用方式(复制代码黏贴就可以)
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/MJ1314MJ/article/details/109011211