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

一.使用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)  
    }
相关推荐
CC同学呀6 小时前
从0到100:单位订餐统计小程序开发日记2025
小程序
666HZ66612 小时前
微信小程序中scss、ts、wxml
微信小程序·小程序·scss
二十十十十十12 小时前
微信点餐小程序—美食物
微信·小程序
向明天乄13 小时前
在小程序中实现实时聊天:WebSocket最佳实践
websocket·网络协议·小程序
h1853859224413 小时前
租车小程序电动车租赁小程序php方案
小程序
海的诗篇_13 小时前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
说私域13 小时前
基于开源AI智能客服、AI智能名片与S2B2C商城小程序的微商服务质量提升路径研究
人工智能·小程序·开源
牧杉-惊蛰13 小时前
uniapp微信小程序css中background-image失效问题
css·微信小程序·uni-app
拼图20918 小时前
微信小程序——skyline版本问题
微信小程序·小程序
mg66819 小时前
微信小程序入门实例_____打造你的专属单词速记小程序
微信小程序·小程序