微信小程序-使用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)  
    }
相关推荐
脑袋大大的22 分钟前
钉钉小程序开发环境配置与前端开发指南
小程序·钉钉·企业应用开发
2301_805962933 小时前
微信小程序控制空调之接收MQTT消息
微信小程序·小程序·esp32
The_era_achievs_hero3 小时前
微信小程序121~130
微信小程序·小程序
難釋懷3 小时前
微信小程序WXSS 模板样式
微信小程序·小程序·notepad++
清颖~3 小时前
原生微信小程序研发,如何对图片进行统一管理?
微信小程序·小程序
军军君013 小时前
基于Springboot+UniApp+Ai实现模拟面试小工具二:后端项目搭建
前端·javascript·spring boot·spring·微信小程序·前端框架·集成学习
默魔9 小时前
uniapp 微信小程序点击开始倒计时
微信小程序·小程序·uni-app
阿俊-全栈开发20 小时前
crmeb多门店对接拉卡拉支付小程序聚合收银台集成全流程详解
小程序·php·拉卡拉聚合收银台·拉卡拉三方支付
難釋懷1 天前
微信小程序全局配置
微信小程序·小程序
Enti7c1 天前
微信小程序核心知识点速览
微信小程序·小程序