uniapp基础学习

1. uni的生命周期

1.1 应用的生命周期

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

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

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

 1.2 页面的生命周期

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

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结尾。平台标识如下：

<!-- #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. 组件的生命周期

子组件：

<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. 组件库基本介绍和使用