uni-app的基本语法和规范

生命周期函数

image.png
<template>
    <view class="content">
        
            <uni-calendar 
            :insert="true"
            :lunar="true" 
            :start-date="'2019-3-2'"
            :end-date="'2019-5-20'"
             ></uni-calendar>
        
        
        
        
        <testList :title="msg" @myEdits="getNums"></testList>
        <text>子组件传递的数据{{num}}</text>
        <testa> </testa>
        <testb> </testb>




        <view class="text-area">
            <image v-for="(item,i) in imgArrs" :src="item" @click="perivImgs(item)"></image>
            样式
        </view>
        <view class="iconfont icon-ningmeng-01" style="color:red"></view>
        <button @click="but(2,$event)">点击$event</button>
        <button @click="pull">点击页面刷新</button>
        <button @click="getUrls">发送数据请求</button>
        <button @click="setSlosge">异步设置存储</button>
        <button @click="getSlosge">异步获取存储</button>
        <button @click="removeSlosge">异步移除存储</button>
        <button @click="asyncLoacl">同步设置数据存储</button>
        <button @click="chooseImsgs">上传图片</button>

        <navigator url="/pages/datail/datail">跳转详情页面</navigator>
        <navigator url="/pages/message/message" open-type="switchTab">跳转tabar页面</navigator>
        <navigator url="/pages/datail/datail" open-type="redirect">跳转(没有箭头返回)</navigator>
        <button @click="goUrls">编程导航,点击跳转</button>
        <button @click="messUrs">编程导航,跳转taber页面</button>
        <button @click="deatisur">编程导航,跳转详情,关闭当前页面</button>

        <!-- #ifdef H5 -->
        <view>在h5可见(条件编译)</view>
        <!-- #endif -->
        <!-- #ifdef MP-WEIXIN -->
        <view>在小程序中可见(条件编译)</view>
        <!-- #endif -->



    </view>
</template>

<script>
    //引入一个组件
    import test from '../../components/test.vue'
    import testa from '../../components/a.vue'
    import testb from '../../components/b.vue'

    //下载导入日历组件
    import uniCalendar from '../../components/uni-calendar/uni-calendar.vue'


    export default {
        components: {
            testList: test,
            testa,
            testb,
            uniCalendar,
        },
        data() {
            return {
                msg: 'msg(父组件)',
                title: '允许选中',
                imgArrs: [],
                num: '',
            }
        },
        //监听页面下拉刷新
        onPullDownRefresh: function() {
            console.log('触发了下拉刷新')
            setTimeout(() => {
                console.log('延迟下拉刷新')
                uni.stopPullDownRefresh()
            }, 2000)
        },
        //监听页面上拉加载
        onReachBottom: function() {
            console.log('页面触底了')
        },
        onLoad(options) {
            // #ifdef H5
            console.log('h5打印')
            // #endif
            // #ifdef MP-WEIXIN
            console.log('微信打印')
            // #endif


            console.log('页面加载')
            console.log('可以获取上个页面传递的参数', options)
        },
        onShow: function() {
            console.log('页面显示了')
        },
        onReady: function() {
            console.log('页面初次加载完成')
        },
        onHide: function() {
            console.log('页面隐藏了')
        },
        methods: {
              change(e) {
                        console.log(e);
                    },
            but(n, e) {
                console.log(n, e)
            },
            //点击刷新方法:
            pull() {
                uni.startPullDownRefresh()
            },
            //发送数据请求:
            getUrls() {
                uni.request({
                    url: 'https://api.apiopen.top/getJoke?page=1&count=2&type=video',
                    success(res) {
                        console.log(res)
                    }
                })
            },
            //设置存储数据
            setSlosge() {
                uni.setStorage({
                    key: 'id',
                    data: 80,
                    success() {
                        console.log('存储成功')
                    }
                })
            },
            //获取数据
            getSlosge() {
                uni.getStorage({
                    key: 'id',
                    success(res) {
                        console.log('获取成功', res)
                    }
                })
            },
            //移除存储:
            removeSlosge() {
                uni.removeStorage({
                    key: 'id',
                    success() {
                        console.log('删除成功')
                    }
                })
            },
            //同步设置存储
            asyncLoacl() {
                //设置
                uni.setStorageSync('num', 101)
                //获取
                const res1 = uni.getStorageSync('num')
                console.log(res1)
                //删除
                setTimeout(() => {
                    uni.removeStorageSync('num')
                }, 2000)

            },
            //上传图片:
            chooseImsgs() {
                uni.chooseImage({
                    count: 5, //h5中限制不住
                    success: res => {
                        console.log(res)
                        this.imgArrs = res.tempFilePaths
                    }
                })

            },
            //点击图片预览:
            perivImgs(current) {
                console.log(current)
                uni.previewImage({
                    current,
                    urls: this.imgArrs,
                    indicator: 'number'
                })

            },
            //编程导航点击跳转
            goUrls() {

                uni.navigateTo({
                    url: '/pages/datail/datail?id=80'
                })
            },
            //编程导航跳转tabar
            messUrs() {
                uni.switchTab({
                    url: '/pages/message/message'
                })

            },
            //跳转到详情关闭当前页面
            deatisur() {
                uni.redirectTo({
                    url: '/pages/datail/datail'
                })
            },
            //获取子组件数据:
            getNums(num) {
                console.log(num)
                this.num = num
            }

        }


    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .logo {
        height: 200rpx;
        width: 200rpx;
        margin-top: 200rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
    }

    /* #ifdef  H5*/
    .text-area {
        width: 750rpx;
        height: 1350rpx;
        background: red;
    }

    /* #endif */


    /* #ifdef  MP-WEIXIN*/
    .text-area {
        width: 750rpx;
        height: 1350rpx;
        background: #007AFF;
    }

    /* #endif */

    .title {
        font-size: 36rpx;
        color: #8f8f94;
    }

    .box-active {
        background: red;
    }
</style>

<template>
    <view>
        a组件{{num}}
        <button @click="addNums">修改B组件数据</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
             num:1
            }
        },
    
        beforeCreate() {
            
            
        },
        methods: {
        addNums(){
            uni.$emit('updateNum',10)
        }
        },
        created() {
        
            
        },
        mounted() {
        
        }
    }
</script>

<style>

</style>

<template>
    <view>
        b组件{{num}}
    </view>
</template>

<script>
    export default {
        data() {
            return {
            num:2
            }
        },
    
        beforeCreate() {
            
            
        },
        methods: {
        
        },
        created() {
            uni.$on('updateNum',num=>{
                this.num+=num
            })
        
            
        },
        mounted() {
        
        }
    }
</script>

<style>

</style>

<template>
    <view>
        test
        <text>父组件传递的数据:{{title}}</text>
        <button @click="dataFuter()">点击(给父组件传数据)</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                nums:68
                
            }
        },
        props:['title'],
        beforeCreate() {
            console.log('组件初始化')
            
        },
        methods: {
            dataFuter(){
                //定义自定义事件
            this.$emit('myEdits',this.nums)
            }
            
        },
        created() {
                console.log('数据')
            
        },
        mounted() {
            console.log('demo')
        }
    }
</script>

<style>

</style>

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,905评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,140评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,791评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,483评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,476评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,516评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,905评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,560评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,778评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,557评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,635评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,338评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,925评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,898评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,142评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,818评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,347评论 2 342

推荐阅读更多精彩内容