我现在有一个弹层的组件(popup),组件里面定义了显示组件(showPopup)和隐藏组件(hidePopup)的方法。

我们如何在调用组件的页面中调用组件里面的方法呢?

在调用组件的页面写如下代码:

onReady: function() {
this.popup = this.selectComponent("#popup"); //组件的id
},
showPopup(){
this.popup.showPopup(); //组件里里面定义的showPopup方法
},
hidePopup() {
this.popup.hidePopup(); //组件里里面定义的hidePopup方法
},

对上面的代码做个简易说明:

先看下效果图:

 对应代码截图:

1.调用页面(Page/.../index.wxml)

2.组件页面(compoents/popup/index.js):

推荐2篇写的不错的博文,可以看看:

【微信小程序】自定义组件

小程序自定义组件的具体实现+页面与自定义组件间的通信

微信小程序——页面中调用组件方法的更多相关文章

  1. 微信小程序页面调用自定义组件内的事件

    微信小程序页面调用自定义组件内的事件 page page.json { "usingComponents": { "my-component": ". ...

  2. 微信小程序页面跳转方法总结

    微信小程序页面跳转目前有以下方法(不全面的欢迎补充): 1. 利用小程序提供的 API 跳转: // 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面.// 注 ...

  3. 微信小程序--页面与组件之间如何进行信息传递和函数调用

    微信小程序--页面与组件之间如何进行信息传递和函数调用 ​ 这篇文章我会以我自己开发经验从如下几个角度来讲解相关的内容 页面如何向组件传数据 组件如何向页面传数据 页面如何调用组件内的函数 组件如何调 ...

  4. 微信小程序开发过程中tabbar页面显示的相关问题及解决办法!

    在微信小程序的开发过程中如果有使用过tabbar的同学,我相信一定会遇到一些困扰.为什么有些时候代码中明明已经在app.json里面增加了tabbar,可以页面中就是不显示呢?可不可以有些页面显示ta ...

  5. 总结微信小程序开发中遇到的坑

    总结微信小程序开发中遇到的坑,一些坑你得一个一个的跳啊,/(ㄒoㄒ)/~~ 1,页面跳转和参数传递实例 首先说一下我遇到的需求有一个我的消息页面,里面的数据都是后端返回的,返回的数据大致如下,有一个是 ...

  6. 在微信小程序页面间传递数据总结

    在微信小程序页面间传递数据 原文链接:https://www.jianshu.com/p/dae1bac5fc75 在开发微信小程序过程之中,遇到这么一些需要在微信小程序页面之间进行数据的传递的情况, ...

  7. 微信小程序-页面跳转与参数传递

    QQ讨论群:785071190 微信小程序页面跳转方式有很多种,可以像HTML中a标签一样添加标签进行跳转,也可以通过js中方法进行跳转. navigator标签跳转 <view class=& ...

  8. [转] 微信小程序页面间通信的5种方式

    微信小程序页面间通的5种方式 PageModel(页面模型)对小程序而言是很重要的一个概念,从app.json中也可以看到,小程序就是由一个个页面组成的. 如上图,这是一个常见结构的小程序:首页是一个 ...

  9. 全栈开发工程师微信小程序-上(中)

    全栈开发工程师微信小程序-上(中) width: 750rpx; 750rpx代表与屏幕等宽,rpx的缩写responsive pixel,这个单位是可以根据屏幕大小进行自适应调整的像素单位. 小程序 ...

随机推荐

  1. schema中字段类型的定义

    当schema中字段类型为String时,保存的时候如果该字段为Number也可以保存成功,mongoose会自动将其转换为数字字符串. 当schema中字段类型为Number时,保存的时候如果该字段 ...

  2. .NET CORE EF 框架调用存储过程

    ; //多个参数多表组合值 SqlParameter[] Param = { new SqlParameter("@UserId", System.Data.SqlDbType.V ...

  3. ES6,新增数据结构WeakSet的用法

    WeakSet和Set类似,同样是元素不重复的集合,它们的区别是WeakSet内的元素必须是对象,不能是其它类型. 特性: 1.元素必须是对象. 添加一个number类型的元素. const ws = ...

  4. lua面向对象编程之点号与冒号的差异详细比较

    首先,先来一段在lua创建一个类与对象的代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 Class = {} Class.__index = Cl ...

  5. Mac安装mtr与brow安装

    Mac安装mtr与brow安装 Mac里比较好的安装mtr方式是用Homebrew 或者MacPorts,本来想安装Homebrew,但大概是GFW的问题,下载地址无法访问,因为没有全局FQ,暂时不考 ...

  6. 【Web】Tomcat中利用Session识别用户的基本原理

    HTTP无状态的特性与Session.Cookie的存在 HTTP有一个特性:无状态的,就是前后两个HTTP事务它们并不知道对方的信息. 而为了维护会话信息或用户信息,一般可用Cookie或Sessi ...

  7. uwsgi -- unavailable modifier requested: 0 -- 的解决办法

    nginx 报错 upstream prematurely closed connection while reading response header from upstream 说明是上游服务器 ...

  8. 【ARM】2410裸机系列-ADC数模转换

    开发环境   1.硬件平台:FS2410 2.主机:Ubuntu 12.04 ADC寄存器配置       1.初始化ADC(ADCCON) 设置预分频,预分频因子,选择A/D转换通道,并选择正常模式 ...

  9. nginx源码分析:module机制

    根据nginx官方文档,添加一个module的介绍,当我们需要添加一个module时,需要以下操作: 1.为该module新建一个目录. 2.添加一个config文件,一个module核心代码源文件. ...

  10. Shell获取格式化日期

    Shell获取格式化日期 shell date 获取昨天日期 使用date -d 选项: date +"%Y%m%d" -d "+n days" 今天的后n天日 ...