详解微信小程序自定义组件的实现及数据交互


Posted in Javascript onJuly 22, 2019

简单的自定义组件

本文的使用场景是:多个页面都需要用到拨打电话功能,为减少代码量、便于维护,所以自定义了一个组件,每个页面直接调用即可。基本实现下图样式:

详解微信小程序自定义组件的实现及数据交互

下面我们来一步步的实现它:

step1:创建文件夹以及文件

首先创建一个components(名字可自取)文件夹,用于放置所有自定义的组件,

里面可以用右键自动创建的方式,新建一个Component组件,例如:

详解微信小程序自定义组件的实现及数据交互

创建之后的目录结构为:

详解微信小程序自定义组件的实现及数据交互

其中callphone是我们本次要实现的拨打电话组件。

step2:组件的基本搭建

在callphone.wxml中:添加组件结构:

<view class="call" bindtap="callPhone">
 <view class="phone">{{phone}}</view>
 <view>了解最新信息,免费咨询</view>
 <view class="callIcon"></view>
</view>

在callphone.wxss中:添加组件样式:

.call {
 display: block;
 padding: 18rpx 30rpx;
 width: 100%;
 color: #999;
 font-size: 24rpx;
 box-sizing: border-box;
 background: #ecf9e8;
 position: relative;
 border-radius: 10rpx;
}
.call .phone {
 color: #333;
 font-size: 40rpx;
}
.call .callIcon {
 width: 77rpx;
 height: 77rpx;
 position: absolute;
 top: 50%;
 margin-top: -38rpx;
 right: 30rpx;
 background-size: cover;
 background-image: url(data:image/png;base64,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);
}

在callphone.js中:添加组件逻辑:

Component({
 /**
  * 组件的属性列表
  */
 properties: {

 },
 /**
  * 组件的初始数据
  */
 data: {
  phone: '400-010-9797'
 },
 /**
  * 组件的方法列表
  */
 methods: {
  callPhone() {
   wx.makePhoneCall({
    phoneNumber: this.data.phone
   })
  }
 }
})

step3:使用组件

我们要在index.wxml中使用该组件的话,要在index.json中进行声明:(其中call-phone是组件的名称,可以自取)

{
 "usingComponents": {
  "call-phone": "/components/CallPhone/callphone"
 }
}

在index.wxml中引用组件:

<call-phone></call-phone>

完成以上几个步骤,一个简单的小程序自定义组件就完成了,运行结果如下:

详解微信小程序自定义组件的实现及数据交互

Page与Component数据交互

上面的例子中可以看到,电话号码是在组件中的data中设置的,也就是每个页面都是固定写死的;但是如果要实现每个界面的号码不一样的话,此时就涉及到page往组件传值的问题,可以这么修改:

1、page > component

方法1:page在引用组件时能通过属性值设置,callphone.js在properties获取:

<!--index.wxml-->
<call-phone phone="400-010-9797"></call-phone>
// components/CallPhone/callphone.js
Component({
 properties: {
  phone: String //简写
  /* 
  phone: {
   type: String, //类型,目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
   value: '', //初始值
   observer: function(newVal, oldVal) {}
  }
  */
 },
 attached: function() {
  console.log("this.properties.phone:" + this.properties.phone); //控制台打印:"400-010-9797"
 },
 //...
})

方法2:page在引用组件时通data-xxx设置,callphone.js在this.dataset获取:

<!--index.wxml-->
<call-phone data-tel="400-010-9797" ></call-phone>
// components/CallPhone/callphone.js
Component({
 attached: function() {
  console.log("this.dataset.tel:" + this.dataset.tel); //控制台打印:"400-010-9797"
  // 设置properties值用setData()
  this.setData({
   phone: this.dataset.tel
  });
 },
 //...
})

2、component > page

组件中的变量要传到page页面,可以通过事件触发this.triggerEvent()来实行:

// components/CallPhone/callphone.js
Component({
 methods: {
  callPhone() {
   var myEventDetail = {
    msg: '来自component的信息',
    tel: '400-010-9797'
   } // detail对象,提供给事件监听函数
   var myEventOption = {} // 触发事件的选项
   this.triggerEvent('myevent', myEventDetail, myEventOption)
  }
 }
})
<!--index.wxml-->
<!--"bindmyevent"属性与上面"myevent"对应,当自定义组件触发"myevent"事件时,调用"call"方法 -->
<call-phone bindmyevent="call"></call-phone>
//index.js
Page({
 call: function(e) {
  console.log(e.detail.msg);//控制台打印:"来自component的信息"
  wx.makePhoneCall({
   phoneNumber: e.detail.tel
  })
 }
})

总结

以上所述是小编给大家介绍的微信小程序自定义组件的实现及数据交互,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
用javascript实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
Aug 15 Javascript
Javascript hasOwnProperty 方法 &amp; in 关键字
Nov 26 Javascript
js 返回时间戳所对应的具体时间
Jul 20 Javascript
jquery $.ajax各个事件执行顺序
Oct 15 Javascript
VBS通过WMI监视注册表变动的代码
Oct 27 Javascript
jQuery 文本框得失焦点的简单实例
Feb 19 Javascript
js实现表格字段排序
Feb 19 Javascript
Bootstrap每天必学之前端开发框架
Nov 19 Javascript
如何使用JS在HTML中自定义字符串格式化
Jul 20 Javascript
详解如何在项目中使用jest测试react native组件
Feb 09 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
Apr 22 Javascript
小程序使用分包的示例代码
Mar 23 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
Jul 22 #Javascript
详解vue为什么要求组件模板只能有一个根元素
Jul 22 #Javascript
微信小程序获取用户绑定手机号方法示例
Jul 21 #Javascript
Vue商品控件与购物车联动效果的实例代码
Jul 21 #Javascript
浅析Angular 实现一个repeat指令的方法
Jul 21 #Javascript
Node.js 实现简单的无侵入式缓存框架的方法
Jul 21 #Javascript
Vue中遍历数组的新方法实例详解
Jul 21 #Javascript
You might like
Codeigniter通过SimpleXML将xml转换成对象的方法
2015/03/19 PHP
php转换上传word文件为PDF的方法【基于COM组件】
2019/06/10 PHP
Firefox+FireBug使JQuery的学习更加轻松愉快
2010/01/01 Javascript
jQuery实现动画效果的简单实例
2014/01/27 Javascript
Ajax提交与传统表单提交的区别说明
2014/02/07 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
2014/03/13 Javascript
在JavaScript中判断整型的N种方法示例介绍
2014/06/18 Javascript
详解JavaScript对象序列化
2016/01/19 Javascript
nodejs微信公众号支付开发
2016/09/19 NodeJs
关于验证码在IE中不刷新的快速解决方法
2016/09/23 Javascript
JS添加或修改控件的样式(Class)实现方法
2016/10/15 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
2017/06/13 Javascript
一个因@click.stop引发的bug的解决
2019/01/08 Javascript
JS实现的贪吃蛇游戏案例详解
2019/05/01 Javascript
node.js实现带进度条的多文件上传
2020/03/27 Javascript
vue-router结合vuex实现用户权限控制功能
2019/11/14 Javascript
vue项目中自定义video视频控制条的实现代码
2020/04/26 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
2020/08/06 Javascript
举例讲解Python中的身份运算符的使用方法
2015/10/13 Python
Python下实现的RSA加密/解密及签名/验证功能示例
2017/07/17 Python
pandas 条件搜索返回列表的方法
2018/10/30 Python
Python3内置模块之json编解码方法小结【推荐】
2020/12/09 Python
VSCode中自动为Python文件添加头部注释
2019/11/14 Python
Python使用enumerate获取迭代元素下标
2020/02/03 Python
使用Python对Dicom文件进行读取与写入的实现
2020/04/20 Python
python实现模拟器爬取抖音评论数据的示例代码
2021/01/06 Python
CSS实现限制字数功能当对象内文本溢出时显示省略标记
2014/08/20 HTML / CSS
在Java开发中如何选择使用哪种集合类
2016/08/09 面试题
工程监理应届生求职信
2013/11/09 职场文书
危爆物品安全大检查大整治工作方案
2014/05/03 职场文书
我们的节日中秋节活动总结
2015/03/23 职场文书
2016年寒假社会实践活动总结
2015/10/10 职场文书
2016七夕情人节感言
2015/12/09 职场文书
争做文明公民倡议书
2019/06/24 职场文书
2019年二手房买卖合同范本
2019/10/14 职场文书
CSS3 实现NES游戏机的示例代码
2021/04/21 HTML / CSS