微信小程序之自定义组件的实现代码(附源码)


Posted in Javascript onAugust 02, 2018

最近在项目开发中,遇到好多雷同的页面样式,就想着可以将常用的功能模块封装成组件,方便在项目中使用和修改,下面就参照微信小程序的文档分步骤写一个微信小程序的组件。

附上效果图:

微信小程序之自定义组件的实现代码(附源码)

step1:创建文件并申明

与创建微信小程序的页面一样,一个自定义组件也需要json,wxml,wxss,js四个文件。

在项目根目录中创建文件夹,取名为:component,在该目录下继续创建文件夹successModal。

可以在开发工具中右键创建,选择component,默认自动会创建四个文件。如图:

微信小程序之自定义组件的实现代码(附源码)

在successModal.json文件中进行自定义组件声明,如:

在开发工具中右键新建选择component,默认自动会创建。

{
 "component": true,
 "usingComponents": {}
}

step2:编写组件模板代码

<!-- 这是自定义组件的内部WXML结构 success.wxml-->
<view class='modal-section' wx:if="{{modalHidden}}">
 <view class='modal-opaci' bindtap='modal_click_Hidden'></view>
 <view class='modal-cont'>
 <icon type='{{modalIcon}}' size='70'></icon>
 <text class='modal-titleTxt {{modalIcon}}'>{{modalTitle}}</text>
 <text class='success-msg'>{{modalDesc}}</text>
 </view>
</view>

step3:编写样式文件

/* 这里的样式只应用于这个自定义组件 */
/*successModal.wxss*/
.modal-opaci {
 position: absolute;
 left: 0;
 top: 0;
 z-index: 100;
 height: 100%;
 width: 100%;
 background: black;
 opacity: 0.4;
 filter: alpha(opacity=40);
}
.modal-cont {
 position: fixed;
 top: 30%;
 left: 8.5%;
 z-index: 999;
 border-radius: 20rpx;
 padding: 40rpx 150rpx;
 background-color: #fff;
 text-align: center;
}
.modal-cont text {
 line-height: 90rpx;
 display: block;
}
.success {
 color: #09bb07;
}
.modal-titleTxt {
 font-size: 50rpx;
 font-weight: 700;
}
.warn {
 color: #f76260;
}

step4:编写业务逻辑

在自定义组件的 js 文件中,需要使用 Component() 来注册组件,组件的属性值和内部数据将被用于组件 wxml 的渲染,其中,属性值是可由组件外部传入的。

//successModal.js
Component({
 /**
 * 组件的属性列表
 */
 properties: {
 //这里定义了modalHidden属性,属性值可以在组件使用时指定.写法为modal-hidden 
 modalHidden: {
  type: Boolean,
  value: true
 },
 modalIcon: {
  type: String,
  value: ' ',
 },
 modalTitle: {
  type: String,
  value: ' ',
 },
 modalDesc: {
  type: String,
  value: ' ',
 }
 },

 /**
 * 组件的初始数据
 */
 data: {

 },

 /**
 * 组件的方法列表
 */
 methods: {
 // 这里是自定义方法
 modal_click_Hidden: function () {
  this.setData({
  modalHidden: false,
  })
 },
 }
})

step5:使用自定义组件

首先在需要使用的json文件中进行引用申明,然后需要提供每个自定义组件的标签名和对应的自定义组件文件路径。

//index.json
{
 "usingComponents": {
 "modal-success": "../../component/successModal/successModal" //在这里写上页面中自定义的标签名和自定义组件的文件路径
 },
 "navigationBarTitleText": "首页"
}

其次,在页面的wxml中使用自定义组件:在页面的 wxml 中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名,节点属性即传递给组件的属性值。

<!--index.wxml-->
<view class="container">
 <view class="demoBtn" bindtap="bindViewTap">
 <text>点击</text>
 </view>
 <!-- 调用modal组件 -->
 <modal-success modal-hidden="{{is_modal_Hidden}}" modal-icon="{{is_modal_icon}}" modal-title="{{is_modal_title}}" modal-desc="{{is_modal_desc}}" />
</view>

以上就是小程序自定义组件的demo,欢迎start。

github地址:https://github.com/ywyan/wx-component

注意点:

  • 对于基础库的1.5.x版本, 1.5.7 也有部分自定义组件支持。
  • 因为WXML节点标签名只能是小写字母、中划线和下划线的组合,所以自定义组件的标签名也只能包含这些字符。
  • 自定义组件也是可以引用自定义组件的,引用方法类似于页面引用自定义组件的方式(使用 usingComponents 字段)。
  • 自定义组件和使用自定义组件的页面所在项目根目录名不能以“wx-”为前缀,否则会报错。
  • 旧版本的基础库不支持自定义组件,此时,引用自定义组件的节点会变为默认的空节点。

总结

以上所述是小编给大家介绍的微信小程序之自定义组件的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js实现同一页面可多次调用的图片幻灯切换效果
Feb 28 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
May 10 Javascript
关于JS中的方法是否加括号的问题
Jul 27 Javascript
基于JavaScript实现在新的tab页打开url
Aug 04 Javascript
100行代码理解和分析vue2.0响应式架构
Mar 09 Javascript
Vue 单文件中的数据传递示例
Mar 21 Javascript
vue 怎么创建组件及组件使用方法
Jul 27 Javascript
Angularjs 1.3 中的$parse实例代码
Sep 14 Javascript
Node实战之不同环境下配置文件使用教程
Jan 02 Javascript
JavaScript中为事件指定处理程序的五种方式分析
Jul 27 Javascript
jQuery操作cookie的示例代码
Jun 05 jQuery
JavaScript实现打砖块游戏
Feb 25 Javascript
Array数组对象中的forEach、map、filter及reduce详析
Aug 02 #Javascript
利用Blob进行文件上传的完整步骤
Aug 02 #Javascript
vue.js图片转Base64上传图片并预览的实现方法
Aug 02 #Javascript
vue组件横向树实现代码
Aug 02 #Javascript
利用Node.js批量抓取高清妹子图片实例教程
Aug 02 #Javascript
在微信小程序里使用watch和computed的方法
Aug 02 #Javascript
在小程序中使用Echart图表的示例代码
Aug 02 #Javascript
You might like
PHP 开发环境配置(Zend Server安装)
2010/04/28 PHP
基于Linux调试工具strace与gdb的常用命令总结
2013/06/03 PHP
ThinkPHP做文字水印时提示call an undefined function exif_imagetype()解决方法
2014/10/30 PHP
php文件读取方法实例分析
2015/06/20 PHP
微信公众平台开发教程①获取用户Openid及个人信息图文详解
2019/04/10 PHP
js 实现菜单左右滚动显示示例介绍
2013/11/21 Javascript
js对文章内容进行分页示例代码
2014/03/05 Javascript
JavaScript中按位“异或”运算符使用介绍
2014/03/14 Javascript
jquery实现搜索框常见效果的方法
2015/01/22 Javascript
javascript新闻跑马灯实例代码
2020/07/29 Javascript
详解自动生成博客目录案例
2016/12/09 Javascript
vue-router路由参数刷新消失的问题解决方法
2017/06/17 Javascript
浅谈webpack下的AOP式无侵入注入
2017/11/12 Javascript
vue-cli常用设置总结
2018/02/24 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
2018/09/14 Javascript
vue实现局部刷新的实现示例
2019/04/16 Javascript
详解JavaScript 浮点数运算的精度问题
2019/07/23 Javascript
[00:32]2016完美“圣”典风云人物:Maybe宣传片
2016/12/05 DOTA
在Django的视图中使用form对象的方法
2015/07/18 Python
Flask解决跨域的问题示例代码
2018/02/12 Python
matlab中实现矩阵删除一行或一列的方法
2018/04/04 Python
Pandas标记删除重复记录的方法
2018/04/08 Python
浅谈python中字典append 到list 后值的改变问题
2018/05/04 Python
python实现PID算法及测试的例子
2019/08/08 Python
设置jupyter中DataFrame的显示限制方式
2020/04/12 Python
如何卸载python插件
2020/07/08 Python
Dodax奥地利:音乐、电影、书籍、玩具、电子产品等
2019/08/31 全球购物
毕业生自我鉴定
2013/11/05 职场文书
理货员的岗位职责
2013/11/23 职场文书
大学生职业规划论文
2014/01/11 职场文书
体育馆的标语
2014/06/24 职场文书
学校领导班子群众路线整改措施
2014/09/16 职场文书
承诺函范文
2015/01/21 职场文书
消防安全月活动总结
2015/05/08 职场文书
基于flask实现五子棋小游戏
2021/05/25 Python
CentOS下安装Jenkins的完整步骤
2022/04/07 Servers