快应用学习笔记

快应用学习笔记

1. 生命周期

页面的生命周期：onInit、onReady、onShow、onHide、onDestroy、onBackPress、onMenuPress
页面的状态：显示、隐藏、销毁
APP的生命周期：onCreate、onDestroy

页面的生命周期

onInit, onReady, onShow在页面创建时触发调用。

onInit：监听页面初始化。当页面完成初始化时调用，只触发一次，VM的数据（events,props,data）已经准备好；所以可以使用props，data中的数据了。

onReady：监听页面创建完成。当页面完成创建可以显示时触发，只触发一次，表示VM的模板已经编译完成，所以可以获取DOM节点（如：this.$element(idxxx)）了。

onShow：监听页面显示。当进入页面时触发，页面被切换重新显示时调用onShow()

onHide：页面被切换隐藏时调用onHide()

onDestroy：页面被销毁时调用，被销毁的可能原因有：用户从当前页面返回到上一页，或者用户打开了太多的页面，框架自动销毁掉部分页面，避免占用资源。所以，页面销毁时应该做一些释放资源的操作，如：取消接口订阅监听geolocation.susubscribe()

onBackPress()：当用户点击返回实体按键、左上角返回菜单、调用返回API时触发该事件。如果事件响应方法最后返回true表示不返回，自己处理业务逻辑（完毕后开发者自行调用API返回）；否则：不返回数据，或者返回其它数据：表示遵循系统逻辑：返回到上一页。

onMenuPress()：当使用原生的顶部标题栏时，可以通过manifest.json中的menu属性配置是否显示右上角的菜单，配置请参考文档manifest文件

onReachTop() 监听页面是否触顶

onReachBottom() 监听页面是否触底

onPageScroll(event) 监听页面滚动

组件

1. 组件引入

 <import name="XXX" src="XXX"></import>

<import>标签中的的src属性指定自定义组件的地址，name属性指定在父组件中引用该组件时使用的

例如：

<import name="comp-part1" src="./part1"></import>

父子组件通信
父组件通过 属性：="{{值}}"的方式给子组件传值

<!-- 父组件 -->
<import name="comp" src="./comp"></import>
<template>
  <div class="parent-demo">
    <comp say="{{say}}" prop-object="{{obj}}"></comp>
  </div>
</template>
<script>
  export default {
    private: {
      say:'hello'
      obj:{
        name:'child-demo'
      }
    }
  }
</script>

子组件

子组件通过props属性接收父组件传过来的数据

<!-- 子组件 -->
<template>
  <div class="child-demo">
    <text class="title">子组件:</text>
    <text>{{ say }}</text>
    <text>{{ propObject.name }}</text>
  </div>
</template>
<script>
  export default {
    props: ['say', 'propObject'],
    onInit() {
      console.info(`外部传递的数据：`, this.say, this.propObject)
    }
  }
</script>

子组件对父组件通信

• 父组件传递的数据本身就是对象，子组件直接修改对象中的属性，父组件的值也会发生改变，不推荐这种;那这种就不看了吧。
• 子组件通过$dispatch()触发自定义事件，父组件通过$on()监控自定义事件的触发，如：del；

 <!-- 父组件 -->
<import name="comp2" src="./comp2.ux"></import>
<template>
  <div class="parent-demo">
    <text>我是父组件num:{{num}}</text>
    <comp2 num="{{num}}"></comp2>
  </div>
</template>

<script>
  export default {
    private:{
        count:20,
        num:20,
        age:18
    },
    onInit(){
    //监听页面初始化。当页面完成初始化时调用，只触发一次，VM的数据（events,props,data）已经准备好；所以可以使用props，data中的数据了。
      this.$on('dispathEvt',this.dispathEvt)
    },
    dispathEvt(evt){
        this.num = evt.detail.num
    },
  }
</script>

<!-- comp2 -->
<template>
  <div class="child-demo">
    <text>我是子组件二num:{{compNum}}</text>
    <input type="button" onclick='delHandler' value='del'></input>
  </div>
</template>
<script>
  export default {
    props: ['num'],
    data(){
        return{
            compNum:this.num
        }
    },
    delHandler(){
        this.compNum --
        //this.$dispatch应该相当于Vue里面的this.$emit吧，应该吧，哈哈哈哈
        this.$dispatch('dispathEvt',{
            num:this.compNum
        })
    },
  }
</script>```

 - 子组件通过`$emit()`触发在节点上绑定的自定义事件来执行父组件的方法，如：add；
 

```javascript
<import name="comp1" src="./comp1.ux"></import>
<template>
  <div class="parent-demo">
    <text>我是父组件count:{{count}}</text>
    <comp1 count="{{count}}" onemit-evt="emitEvt"></comp1>
  </div>
</template>

<script>
  export default {
    private:{
        count:20,
        num:20,
        age:18
    },
    onInit(){
      this.$on('dispathEvt',this.dispathEvt)
    },
    emitEvt(evt){
        this.count = evt.detail.count
    },
    dispathEvt(evt){
        this.num = evt.detail.num
    },
    evtTypeEmit(){
       this.$broadcast('broadevt',{
         age:19
       })
    },
  }
</script>

<!-- comp1 -->
<template>
  <div class="child-demo">
    <text>我是子组件一count:{{compCount}}</text>
    <input type="button" onclick='addHandler' value='add'></input>
  </div>
</template>
<script>
  export default {
    props: ['count'],
    data(){
        return{
            compCount:this.count
        }
    },
    addHandler(){
        this.compCount ++
        this.$emit('emitEvt',{
            count:this.compCount
        })
    },
  }
</script>

兄弟/跨组件通信

这个有点麻烦，用的时候再研究吧