微信小程序-使用Component方法代替Page方法构造页面

井眼2024-07-29 9:27

一.使用Component方法的前提条件

在小程序js文件里使用Component方法代替Page方法需要在json文件里面定义usingComponents属性

{
  "usingComponents": {}
}

二.注意事项

1.在page页面里使用的钩子函数和事件监听方法都需要写在methods对象里面

  methods:{
    update(){
      this.setData({
        name:'jerry'
      })
    } ,
    onLoad(options){
      console.log(options)  
      console.log(this.data.id)
      console.log(this.properties.title)  
    }
  }
})

2.接收页面参数

2.1 通过onLoad(options)里面的options里面有接收的参数值

传参页面代码

<navigator open-type="navigate" 
url="/pages/detail/detail?id=10&title=test">detail</navigator>

接收参数页面代码

    onLoad(options){
      console.log(options)  
    }

2.2 通过properties接收参数，使用this.data或者this.properties获取接收的参数，前提得在properties对象里定义好参数，参数名和传参的参数名一致

  properties:{
    id:{
      type:String,
      value:''
    },
    title:{
      type:String,
      value:''
    }
  }

    onLoad(options){
      console.log(this.data.id)
      console.log(this.properties.title)  
    }