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


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 相关文章推荐
js可突破windows弹退效果代码
Aug 09 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
Jan 31 Javascript
jquery+css3打造一款ajax分页插件(自写)
Jun 18 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
Jan 05 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
Apr 21 Javascript
基于Bootstrap分页的实例讲解(必看篇)
Jul 04 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
在vue项目中,将juery设置为全局变量的方法
Sep 25 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
Feb 20 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
Sep 21 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
Aug 13 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
Jan 29 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
世界第一个无线广播电台 KDKA
2021/03/01 无线电
中篇:安装及配置PHP
2006/12/13 PHP
数据库查询记录php 多行多列显示
2009/08/15 PHP
Ajax+PHP边学边练 之五 图片处理
2009/12/03 PHP
PHP中限制IP段访问、禁止IP提交表单的代码
2011/04/23 PHP
php使用exec shell命令注入的方法讲解
2013/11/12 PHP
PHP Yaf框架的简单安装使用教程(推荐)
2016/06/08 PHP
PHP截取发动短信内容的方法
2017/07/04 PHP
繁简字转换功能
2006/07/19 Javascript
JQuery操作单选按钮以及复选按钮示例
2013/09/23 Javascript
jQuery实现图片渐入渐出切换展示效果
2015/08/15 Javascript
每天一篇javascript学习小结(面向对象编程)
2015/11/20 Javascript
基于bootstrap的选择框插件icheck
2016/12/23 Javascript
js 数组详细操作方法及解析合集
2018/06/01 Javascript
require.js 加载过程与使用方法介绍
2018/10/30 Javascript
基于JS实现前端压缩上传图片的实例代码
2019/05/14 Javascript
Express结合Webpack的全栈自动刷新
2019/05/23 Javascript
一个手写的vue放大镜效果
2019/08/09 Javascript
vue指令v-html使用过滤器filters功能实例
2019/10/25 Javascript
[04:10]2018年度CS GO玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
使用Python编写提取日志中的中文的脚本的方法
2015/04/30 Python
Python中偏函数用法示例
2018/06/07 Python
在pycharm上mongodb配置及可视化设置方法
2018/11/30 Python
python直接获取API传递回来的参数方法
2018/12/17 Python
Django 表单模型选择框如何使用分组
2019/05/16 Python
python中count函数简单的实例讲解
2020/02/06 Python
新秀丽拉杆箱美国官方网站:Samsonite美国
2016/07/25 全球购物
澳大利亚领先的武术用品和健身器材供应商:SMAI
2019/03/24 全球购物
测量实习生自我鉴定
2013/09/19 职场文书
水污染治理专业毕业生推荐信
2013/11/14 职场文书
个人思想政治总结
2015/03/05 职场文书
车间主任岗位职责范本
2015/04/08 职场文书
2015年三好一满意工作总结
2015/07/24 职场文书
《吸血鬼幸存者》新内容发布 追加多个全新模式
2022/04/07 其他游戏
Redis实战高并发之扣减库存项目
2022/04/14 Redis
MySQL下载安装配置详细教程 附下载资源
2022/09/23 MySQL