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

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

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

组件传值

<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
}

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

posted @ 2019-03-07 15:54  甜珊贝奇  阅读(457)  评论(0编辑  收藏  举报