uni-app学习

1、pages.json单独设置样式：

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "uni-app",
                "enablePullDownRefresh":true,
                "onReachBottomDistance":100,
                "h5": { // h5单独设置样式
                    "pullToRefresh": {
                        "color":"#007AFF"
                    }
                }
            }
        }
    ]

2、启动模式设置：（微信小程序中的编译模式）

"condition": { // 启动模式：仅在开发使用
        "current": 0,
        "list": [
            {
                "name": "详情页",
                "path":"pages/detail/detail",
                "query": "id=80"
            }
        ]
    }

3、APP生命周期：

<script>
    export default {
        onLaunch: function() {
            console.log('App Launch')
        },
        onShow: function() {
            console.log('App Show')
        },
        onHide: function() {
            console.log('App Hide')
        },
        onError(error) {
            console.log('App 出现异常了', error)
        }
    }
</script>

4、页面的生命周期：

onLoad() {
    console.log('页面加载了')
},
onShow() {
    console.log('页面显示了')
},
onHide() {
    console.log('页面隐藏了')
},
onReady() {
    console.log('页面初次渲染完成了')
}

5、条件编译跨端兼容：

<!-- #ifdef H5 -->
<view>
    我希望只在H5页面看见
</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view>
    我希望只在微信小程序页面看见
</view>
<!-- #endif -->

onLoad() {
    // #ifdef H5
    console.log('我希望H5中打印')
    // #endif
    // #ifdef MP-WEIXIN
    console.log('我希望微信小程序中打印')
    // #endif
}

<style>
    /* #ifdef H5 */
    view {
        color: red;
    }
    /* #endif */
    /* #ifdef MP-WEIXIN */
    view {
        color: #007AFF;
    }
    /* #endif */
</style>

6、导航跳转和传参：

7、组件的创建和使用：

<script>
    export default {
        name:"test",
        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')
        },
        mounted() {
            console.log('mounted')
        }, 
        updated() {
            console.log('updated')
        },
        destroyed() {
            console.log('组件销毁了')
            clearInterval(this.intId)
        }
    }
</script>

8、组件间的传值：

父向子传值：

<test title="Hello">

<template>
    <view>
        这是test组件
        这是父组件传过来的数据{{title}}
    </view>
</template>

export default {
    name:"test",
    data() {
        return {
            num: 3, 
            intId: null
        };
    },
    props: ['title']
}

子向父传值：

this.$emit()

兄弟组件传值:

uni..$emit()

9、uni-ui组件库的使用：

官方文档：https://uniapp.dcloud.io/component/README?id=uniui