流行页面编码与组件的细节知识

组件属性赋值与页面渲染流程解析

组件传值

<v-like like="{{classic.like_status}}" count="{{classic.fav_num}}"/>

流程

API->Page js-通过setData->Page WXML->Like Property->通过setData->Like WXML

setData的误区

this.data.xxx=xxx 与 this.setData({xxx})
前者不更新界面，后者更新界面。

小程序的setData与React中的setData

小程序中的setData都是同步的，而React中的setData有同步也有异步

组件向page传值

组件内部

method(){
 onLike:function(event){
     //自定义事件
     let like = this.properties.like;
     let count = this.properties.count;
     count = like?count-1:count+1;
     //事件激活
     let behavior = this.properties.like?'like':'cancel';
     this.triggerEvent('like',{
         behavior: behavior
     },{}); 
     //第三个参数可取值为： bubbles(事件是否冒泡)，
     //composed(是否可以穿越组件边界),
     //capturePhase(事件是否拥有捕获阶段)
 }
}

page页面的wxml

<v-like bind:like="onLike"/> //此处like为组件内部定义的事件名

page页面的js

onLike: function(e){
 console.log(e);
}
//打印的信息为：
//...
//detail:{behavior:"like"}或者是detail: {behavior:"cancel"}
//...

组件的生命周期函数

created(组件实例进入页面节点)，attached(组件节点实例进入页面节点树)，ready(组件布局完成后执行)，move(组件实例被易懂到节点树另一个位置执行)，detached(组件从页面节点树移除时执行)

注意：

• 在data里面初始变量时不要用Number或者String等其他的类型修饰，例a: 1,b: false。而properties可以，因为小程序进行了加工处理。否则控制台打印的data为f，即function对象
• 小程序会把组件里面的propreties与data对象合并
• properties的变量不要和data里面的变量相同，否则properties会覆盖data里面的变量

注意防范内存泄漏

不要在oberver中修改自身属性值，在期刊树那里可以这样编码，来显示08的效果

properties:{
 index: Number,
 observer: function(newVal,oldVal,changedPath){
     let val = newVal < 10?'0'+newVal:newVal;
     this.setData({
         _index: val
     })
 }
}

data:{
 _index:String
}

一旦修改自身会造成无限递归自己，造成内存泄漏

小程序开发-8-流行页面编码与组件的细节知识