微信小程序开发

微信小程序中一个页面的组成是包括 wxml(模板) ,wxss (层叠样式表), js (业务逻辑),json 

(页面配  置)四部分。默认会缓存5个页面栈。

小程序的组件

Component({
  externalClasses:["外部类"],
  options:选项:样式隔离,开启多个插槽,
  properties:父组件的传参(只读),
  lifetimes:生命周期:attached挂载,detached卸载,
  pageLifetimes:页面生命周期:show,hide,
  data:组件的数据(可写),
  methods:组件的方法,
})

父传子

  // 父传递
 <step value="{{size}}"/>
  // 子接收 
 properties:{
  value:{type:Number,value:1}
 }
   // 子访问 
 this.data.value
 <text>{{value}}</text>

子传父

// 子发送事件
this.triggerEvent("change",num)
// 父监听change
<step bindchange="changeHd"></step>
// 处理函数获取数据的数据
changeHd(e){ e.detail}

插槽

// 定义插槽
<step><text>插槽内容</text></step>
// 子组件使用插槽
<slot></slot>
多个插槽
// 子组件定义开启多个插槽
options:{multipleSlots:true}
// 父组件定义插槽
<step><text slot="pre">pre</text><text slot="next">next</text></step>
// 子组件使用插槽
<slot name="pre"></slot>
<slot name="next"></slot>

外部类（组件外部定义组件内的样式）

1.定义外部类数组

externalClasses: ['btnclass']

2.在组件的wxml里面使用外部类

<image src="/static/home-cart.png" class="btnclass"  >

3.在父组件定义外部类对应的class

<step value="{{size}}" bindchange="sizeChange" btnclass="btn">

4.在组件的样式定义样式

.btn{
	width: 150rpx !important;
	height: 150rpx !important;
}

组件的生命周期

组件的生命周期，指的是组件自身的一些函数，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。最重要的生命周期是 created 、attached、 detached ，包含一个组件实例生命流程的最主要时间点。

组件的的生命周期也可以在 lifetimes 字段内进行声明（这是推荐的方式，其优先级最高）

 pageLifetimes:{
    show(){
      console.log("页面显示")
    },
    hide(){

      console.log("页面隐藏")
    }
  }

组件中监听数据的变化(可以同时监听多个)

 observers:{
    "value":function(v){
      console.log(v,"value发生变化");
    }
  }

wxs 语法

对数据进行格式化,在wxml里面使用js特定方法,像vue2中的filters