一、uni中的事件
1.事件绑定
在uni中事件绑定和vue中是一样的,通过v-on进行事件的绑定,也可以简写为@
<button @click=“tapHandle”>点我啊
事件函数定义在methods中
methods: {
tapHandle () {
console.log(‘真的点我了’)
}
}
2.事件传参
(1)默认如果没有传递参数,事件函数第一个形参为事件对象
// template
<button @click=“tapHandle”>点我啊
// script
methods: {
tapHandle (e) {
console.log(e)
}
}
(2)如果给事件函数传递参数了,则对应的事件函数形参接收的则是传递过来的数据
// template
<button @click=“tapHandle(1)”>点我啊
// script
methods: {
tapHandle (num) {
console.log(num)
}
}
如果获取事件对象也想传递参数
// template
<button @click=“tapHandle(1,$event)”>点我啊
// script
methods: {
tapHandle (num,e) {
console.log(num,e)
}
}
二.uni的生命周期
1.应用的生命周期
生命周期的概念:一个对象从创建、运行、销毁的整个过程被成为生命周期。
生命周期函数:在生命周期中每个阶段会伴随着每一个函数的触发,这些函数被称为生命周期函数
uni-app 支持如下应用生命周期函数:
| 函数名 | 说明 |
| — | — |
| onLaunch | 当uni-app 初始化完成时触发(全局只触发一次) |
| onShow | 当 uni-app 启动,或从后台进入前台显示 |
| onHide | 当 uni-app 从前台进入后台 |
| onError | 当 uni-app 报错时触发 |
2.页面的生命周期
uni-app 支持如下页面生命周期函数:
| 函数名 | 说明 | 平台差异说明 | 最低版本 |
| — | — | — | — |
| onLoad | 监听页面加载,其参数为上个页面传递的数据,参数类型为Object(用于页面传参),参考示例 | | |
| onShow | 监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面 | | |
| onReady | 监听页面初次渲染完成。 | | |
| onHide | 监听页面隐藏 | | |
| onUnload | 监听页面卸载 | | |
三.下拉刷新
开启下拉刷新
在uni-app中有两种方式开启下拉刷新
需要在 pages.json 里,找到的当前页面的pages节点,并在 style 选项中开启 enablePullDownRefresh
通过调用uni.startPullDownRefresh方法来开启下拉刷新
通过配置文件开启
创建list页面进行演示
柳州学科
{{item}}
通过pages.json文件中找到当前页面的pages节点,并在 style 选项中开启 enablePullDownRefresh
{
“path”:“pages/list/list”,
“style”:{
“enablePullDownRefresh”: true
}
}
通过API开启
api文档
uni.startPullDownRefresh()
监听下拉刷新
通过onPullDownRefresh可以监听到下拉刷新的动作
export default {
data () {
return {
arr: [‘前端’,‘java’,‘ui’,‘大数据’]
}
},
methods: {
startPull () {
uni.startPullDownRefresh()
}
},
onPullDownRefresh () {
console.log(‘触发下拉刷新了’)
}
}
关闭下拉刷新
uni.stopPullDownRefresh()
停止当前页面下拉刷新。
案例演示
<button type=“primary” @click=“startPull”>开启下拉刷新
柳州学科
{{item}}
四.上拉加载
通过在pages.json文件中找到当前页面的pages节点下style中配置onReachBottomDistance可以设置距离底部开启加载的距离,默认为50px
通过onReachBottom监听到触底的行为
<button type=“primary” @click=“startPull”>开启下拉刷新
柳州学科
{{item}}
五.网络请求
搭建后端
软件phpStudy
安装
\heima_shop_server 在这里 npm i node .\src\app.js
timers.active() is deprecated. Please use timeout.refresh() instead.
timers.unenroll() is deprecated. Please use clearTimeout instead.
以上两个报错不影响使用
网络请求
在uni中可以调用uni.request方法进行请求网络请求
需要注意的是:在小程序中网络相关的 API 在使用前需要配置域名白名单。
发送get请求
<button @click=“sendGet”>发送请求
发送post请求
六.数据缓存
uni.setStorage
官方文档
将数据存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个异步接口。
代码演示
<button type=“primary” @click=“setStor”>存储数据
uni.setStorageSync
将 data 存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个同步接口。
代码演示
<button type=“primary” @click=“setStor”>存储数据
uni.getStorage
从本地缓存中异步获取指定 key 对应的内容。
代码演示
<button type=“primary” @click=“getStorage”>获取数据
uni.getStorageSync
从本地缓存中同步获取指定 key 对应的内容。
代码演示
<button type=“primary” @click=“getStorage”>获取数据
uni.removeStorage
从本地缓存中异步移除指定 key。
代码演示
<button type=“primary” @click=“removeStorage”>删除数据
uni.removeStorageSync
从本地缓存中同步移除指定 key。
代码演示
<button type=“primary” @click=“removeStorage”>删除数据
七.上传图片、预览图片
上传图片
uni.chooseImage方法从本地相册选择图片或使用相机拍照。
案例代码
<button @click=“chooseImg” type=“primary”>上传图片
预览图片
结构
<image v-for=“item in imgArr” :src=“item” @click=“previewImg(item)” :key=“item”>
预览图片的方法
previewImg (current) {
uni.previewImage({
urls: this.imgArr,
current
})
}
八.条件注释实现跨段兼容
条件编译是用特殊的注释作为标记,在编译时根据这些特殊的注释,将注释里面的代码编译到不同平台。
**写法:**以 #ifdef 加平台标识 开头,以 #endif 结尾。
平台标识
| 值 | 平台 | 参考文档 |
| — | — | — |
| APP-PLUS | 5+App | HTML5+ 规范 |
| H5 | H5 | |
| MP-WEIXIN | 微信小程序 | 微信小程序 |
| MP-ALIPAY | 支付宝小程序 | 支付宝小程序 |
| MP-BAIDU | 百度小程序 | 百度小程序 |
| MP-TOUTIAO | 头条小程序 | 头条小程序 |
| MP-QQ | QQ小程序 | (目前仅cli版支持) |
| MP | 微信小程序/支付宝小程序/百度小程序/头条小程序/QQ小程序 | |
1.组件的条件注释
代码演示
h5页面会显示
微信小程序会显示
app会显示
2.api的条件注释
代码演示
onLoad () {
//#ifdef MP-WEIXIN
console.log(‘微信小程序’)
//#endif
//#ifdef H5
console.log(‘h5页面’)
//#endif
}
3.样式的条件注释
代码演示
/* #ifdef H5 */
view{
height: 100px;
line-height: 100px;
background: red;
}
/* #endif */
/* #ifdef MP-WEIXIN */
view{
height: 100px;
line-height: 100px;
background: green;
}
/* #endif */
九.uni中的导航跳转
1.利用navigator进行跳转
navigator详细文档:文档地址
跳转到普通页面
跳转到关于页面
跳转到tabbar页面
跳转到message页面
open-type=“redirect” 使用这个属性不能返回了
2.利用编程式导航进行跳转
导航跳转文档
利用navigateTo进行导航跳转
保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。
<button type=“primary” @click=“goAbout”>跳转到关于页面
通过navigateTo方法进行跳转到普通页面
goAbout () {
uni.navigateTo({
url: ‘/pages/about/about’,
})
}
通过switchTab跳转到tabbar页面
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。
跳转到tabbar页面
<button type=“primary” @click=“goMessage”>跳转到message页面
通过switchTab方法进行跳转
goMessage () {
uni.switchTab({
url: ‘/pages/message/message’
})
}
redirectTo进行跳转
关闭当前页面,跳转到应用内的某个页面。
<button type=“primary” @click=“goMessage”>跳转到message页面
goMessage () {
uni.switchTab({
url: ‘/pages/message/message’
})
}
通过onUnload测试当前组件确实卸载
onUnload () {
console.log(‘组件卸载了’)
}
3.导航跳转传递参数
在导航进行跳转到下一个页面的同时,可以给下一个页面传递相应的参数,接收参数的页面可以通过onLoad生命周期进行接收
传递参数的页面
goAbout () {
uni.navigateTo({
url: ‘/pages/about/about?id=80’,
});
}
接收参数的页面
十.uni-app中组件的创建
在uni-app中,可以通过创建一个后缀名为vue的文件,即创建一个组件成功,其他组件可以将该组件通过impot的方式导入,在通过components进行注册即可
1.创建login组件,在component中创建login目录,然后新建login.vue文件
这是一个自定义组件
在其他组件中导入该组件并注册
import login from “@/components/test/test.vue”
2.注册组件
components: {test}
3.使用组件
组件的生命周期函数
| beforeCreate | 在实例初始化之后被调用。 | | |
| — | — | — | — |
| created | 在实例创建完成后被立即调用。 | | |
| beforeMount | 在挂载开始之前被调用。 | | |
| mounted | 挂载到实例上去之后调用。注意:此处并不能确定子组件被全部挂载,如果需要子组件完全挂载之后在执行操作可以使用$nextTick | | |
| beforeUpdate | 数据更新时调用,发生在虚拟 DOM 打补丁之前。 | 仅H5平台支持 | |
| updated | 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。 | 仅H5平台支持 | |
| beforeDestroy | 实例销毁之前调用。在这一步,实例仍然完全可用。 | | |
| destroyed | Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。 | | |
十一.组件的通讯
1.父组件给子组件传值
通过props来接受外界传递到组件内部的值
这是一个自定义组件 {{msg}}
其他组件在使用组件的时候传递值
2.子组件给父组件传值
通过$emit触发事件进行传递参数
这是一个自定义组件 {{msg}}
<button type=“primary” @click=“sendMsg”>给父组件传值
父组件定义自定义事件并接收参数
<test :msg=“msg” @myEvent=“getMsg”>
其他组件在使用组件的时候传递值