uni-app（六）

• uni-app中的样式

1.rpx相当于响应式的px，根据不同的屏幕转换不同的尺寸

2.使用@import导入外联样式，用；结束

3.支持常用的选择器，class、id、element等

4.不能使用*选择器

5.page相当于body节点

6.在pages目录下的vue文件中定义的是局部样式，在App.vue中定义的是全局样式，在不同的页面下设置的局部样式会覆盖全局样式

7.uni-app支持字体图标
注意：字体文件小于40kb,uni-app会自动转化为base64格式；
         字体文件大于40kb,需要开发者自己转换，否则使用不生效；
         字体文件的引用路径推荐使用~@开头的绝对路径    

8.使用scss或者less需要下载对应的插件

• uni-app的数据绑定

和Vue中一样 ，直接在data中定义数据即可

export default {
  data () {
    return {
      msg: 'hello-uni'
    }
  }
}

插值表达式的使用：

<view>{{msg}}</view>

在插值表达式中使用三元运算

<view>{{flag ? '真的' : '假的'}}</view>

基本运算

<view>{{1+1}}</view>

v-bind动态绑定 在data中定义了一张图片，把这张图片渲染到页面中
 
export default {
  data () {
    return {
      img: 'http://destiny001.gitee.io/image/monkey_02.jpg'
    }
  }
}

利用v-bind进行渲染

<image v-bind:src="img"></image>

还可以缩写

<image :src="img"></image>

v-for的使用 data中定义一个数组，将数组渲染到页面

data() {
     return {
            arr:[
                {name:"果果",age:6},
                {name:"乐乐",age:7},
                {name:"欣欣",age:8},
        ]
    }   
}

利用v-for进行循环

<view v-for="(item,i) in arr" :key="i">名字：{{item.name}}---年龄：{{item.age}}</view>        

• uni-app中的事件

事件绑定，在uni-app中的事件绑定和Vue是一样的，通过v-on进行事件的绑定，简写为@

<button @click="handle">点我</button>

事件函数定义在methods中

methods: {
    handle(){
        console.log("点击成功")
    }
}

事件传参

1.默认没有传递参数，事件参数第一个形参为事件对象

//template
<button @click="handle">点我</button>
//script
methods： {
    handle(e) {
        console.log(e)
    }
}

2.如果给事件传递参数了，则对应的事件函数形参接收的是传递过来的数据

//template
<button @click="handle(1)">点我</button>
//script
methods： {
    handle(num) {
        console.log(num)
    }
}    

3.如果获取事件对象也想传递参数

//template
<button @click="handle(1,$event)">点我</button>
//script
methods： {
    handle(num,e) {
        console.log(num,e)
    }
}    

• uni-app中的生命周期

　　1.应用生命周期

 

 注意：应用生命周期只能在App.vue中监听，其他页面监听无效；

　　　 onLaunch里进行页面跳转，遇到白屏报错，参考https://ask.dcloud.net.cn/article/35942

 　　　onPageNotFound页面实际已经打开了页面不存在才会触发，api跳转不存在的页面不会触发（uni.navigateTo）

<script>
    // 只能在App.vue里监听应用的生命周期
    export default {
        onLaunch: function() {
            console.log('App Launch')
        },
        onShow: function() {
            console.log('App Show')
        },
        onHide: function() {
            console.log('App Hide')
        }
    }
</script>

2.页面生命周期

 

 3.组件生命周期

 uni-app生命周期网址   https://uniapp.dcloud.io/collocation/frame/lifecycle