uniapp基础学习

1. uni的生命周期

1.1 应用的生命周期

生命周期的概念：一个对象从创建、运行、销毁的整个过程被成为生命周期。

生命周期函数：在生命周期中每个阶段会伴随着每一个函数的触发，这些函数被称为生命周期函数。

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

函数名	说明
onLaunch	当uni-app初始化完成时触发（全局只触发一次）
onShow	当uni-app启动，或从后台进入前台显示
onHide	当uni-app从前台进入后台
onError	当uni-app报错时触发

 1.2 页面的生命周期

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

函数名	说明	平台差异说明	最低版本
onLoad	监听页面加载，其参数为上个页面传递到数据，参数类型为Object（用于页面传参）
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成
onHide	监听页面隐藏
onUnload	监听页面卸载
onResize	监听窗口尺寸变化	APP、微信小程序
onPullDownRefresh	监听用户下拉，一般用于下拉刷新
onReachBottom	页面滚动到底部的事件（不是scroll-view滚动到底），常用于下拉一页数据。
onTabItemTap	点击tab时触发，参数为Object	微信小程序、百度小程序、H5
onShareAppMessage	用户点击右上角分享
stopPullDownRefresh	关闭下拉刷新
startPullDownRefresh	开始下拉刷新，调用后触发下拉刷新动画。效果与用户手动下拉一致。

2. 网络请求

在uni中可以调用 uni.request方法进行请求网络请求。 需要注意的是：在小程序中网络相关的API在使用前需要配置域名白名单。

发送get请求：

<template>
   <view>
      <button @click="sendGet">发送请求</button>
   </view>
</template>
<script>
    export default {
        methods: {
            sendGet() {
                uni.request({
                    url: 'http://localhost:8080/home/swiper',
                    success(res) {
                        console.log(res)
                    }
                })
            }
        }
    }
</script>

3. 数据缓存

uni.setStorage：

将数据存储在本地缓存中指定的key中，会覆盖掉原来该key对应的内容，这是一个异步接口。

<template>
	<view>
        <button type="primary" @click="setStor">存储数据</button>
        <button type="primary" @click="getStor">获取数据</button>
        <button type="primary" @click="removeId">移除数据</button>
    </view>
</template>
<script>
    export default {
        methods: {
            setStor() {
                uni.setStorage({
                    key: 'id',
                    data: 100,
                    success() {
                        console.log('存储成功')
                    }
                }),
                 uni.setStorageSync({
                    key: 'id',
                    data: 100,
                    success() {
                        console.log('存储成功')
                    }
                })
            },
            getStor() {
                uni.getStorage({
                    key: 'id',
                    success(res) {
                        console.log('获取成功', res)
                    }
                }),
                const res = uni.getStorageSync('id')
                console.log(res)
            },
            removeId() {
                uni.removeStorage({
                    key: 'id',
                    success() {
                        console.log('移除成功', res)
                    }
                }),
                uni.removeStorageSync('id')
            }
        }
    }
</script>

4. 图片上传预览

uni.chooseImage方法从本地相册选择图片或使用相机拍照。

<template>
	<view>
        <button type="primary" @click="chooseImg">上传图片</button>
        <view>
            <image v-for='item in imgArr' :src="item" :key="index" @click="previewImg(item)"></image>
    	</view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                imgArr: []
            }
        },
        methods: {
            chooseImg() {
                uni.chooseImage({
                    count: 5,
                    success: res => {
                        this.imgArr = res.tempFilePaths
                    }
                })
            },
            previewImg(current) {
                uni.previewImage({
                    current: current,
                    urls: this.imgArr,
                    loop: true,
                    indicator: "default"
                })
            }
        }
    }
</script>

5. 条件注释实现跨段兼容

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

写法：以 #ifdef 加  平台标识 开头，以 #endif结尾。平台标识如下：

值	平台	参考文档
APP-PLUS	5+App	HTML5+规范
H5	H5
MP-WEIXIN	微信小程序	微信小程序
MP-BAIDU	百度小程序	百度小程序
MP-TOUTIAO	头条小程序	头条小程序
MP-QQ	QQ小程序
MP-ALIPAY	支付宝小程序	支付宝小程序
MP	微信/支付宝/百度/头条/QQ小程序

<!-- #ifdef H5 -->
<view>
    h5页面会显示
</view>
<!-- #endif -->

<!-- #ifdef MP-WEIXIN -->
<view>
    微信小程序会显示
</view>
<!-- #endif -->

 6. 两种方式导航跳转和传参

<template>
    <view>
        <view>导航跳转的学习</view>
        <navigator url="/pages/detail/detail?id=80&age=19">跳转至详情页</navigator>
        <navigator url="/pages/message/message" open-type="switchTab">跳转至信息页</navigator>
        <navigator url="/pages/detail/detail" open-type="redirect">跳转至详情页</navigator>
        <button @click="goDetail">跳转至详情页</button>
        <button @click="goMessage">跳转至信息页</button>
        <button @click="redirectDetail">跳转至详情页并关闭当前页面</button>
    </view>
</template>
<script>
    export default {
        onUnload() {
            console.log('导航页面卸载了')
        },
        methods: {
            goDetail() {
                uni.navigateTo({
                    url: '/pages/detail/detail'
                })
            },
            goMessage() {
                uni.switchTab({
                    url: '/pages/message/message'
                })
            },
            redirectDetail() {
                uni.redirectTo({
                    url: '/pages/detail/detail'
                })
            }
        }
    }
</script>

接受参数：

<script>
    export default {
        onLoad(options) {
            console.log(options)
        }
    }
</script>

7. 组件的生命周期

beforeCreate	在实例初始化之后被调用
created	在实例创建完成后被立即调用。
beforeMounted	在挂在开始之前被调用。
mounted	挂载到实例上去之后调用。注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用。
beforeUpdate	数据更新时调用，发生在虚拟DOM打补丁之前。	仅H5平台支持
updated	由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。	仅H5平台支持
beforeDestroy	实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed	Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会接绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

子组件：

<template>
	<view id="myView">
        这是test组件{{num}}
    </view>
</template>
<script>
    export default {
        data() {
            return {
                num: 3,
                intId： null
            }
        },
        beforeCreate() {
            console.log('实例已经开始初始化了')
            console.log(this.num)
        },
        created() {
            console.log('created', this.num)
            this.intId = setInterval(() => {
                console.log('执行定时器')
            }, 1000)
        },
        beforeMount() {
            console.log('beforemount', document.getElementById('myView'))
        },
        mounted() {
            console.log('mounted', document.getElementById('myView'))
        },
        destroyed() {
            console.log('组件销毁了')
            clearInterval(this.intId)
        }
    }
</script>

 父组件：

<template>
	<test v-if="flag"></test>
	<button type="primary" @click="checkTest">切换test组件</button>
</template>
<script>
    export default {
        data() {
            return {
                flag: false
            }
        },
        checkTest() {
            this.flag = !this.flag
        }
    }
</script>

8. 组件间的通信方式

9. 组件库基本介绍和使用