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


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为空或不是对象问题的快速解决方法
Dec 11 Javascript
js下将金额数字每三位一逗号分隔
Feb 19 Javascript
jQuery常用知识点总结以及平时封装常用函数
Feb 23 Javascript
你知道setTimeout是如何运行的吗?
Aug 16 Javascript
jQuery组件easyui对话框实现代码
Aug 25 Javascript
动态加载css方法实现和深入解析
Jan 18 Javascript
微信小程序picker组件下拉框选择input输入框的实例
Sep 20 Javascript
微信小程序实现导航栏选项卡效果
Jun 19 Javascript
React中如何引入Angular组件详解
Aug 09 Javascript
浅谈微信JS-SDK 微信分享接口开发(介绍版)
Aug 15 Javascript
使用vue实现多规格选择实例(SKU)
Aug 23 Javascript
js实现点赞按钮功能的实例代码
Mar 06 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通用检测函数集合
2006/11/25 PHP
PHP和.net中des加解密的实现方法
2013/02/27 PHP
解析PHP SPL标准库的用法(遍历目录,查找固定条件的文件)
2013/06/18 PHP
smarty简单分页的实现方法
2014/10/27 PHP
修改发贴的编辑功能
2007/03/07 Javascript
ASP.NET中基于JQUERY的高性能的TreeView补充
2011/02/23 Javascript
最简单的js图片切换效果实现代码
2011/09/24 Javascript
JQuery之focus函数使用介绍
2013/08/20 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
2015/04/20 Javascript
jQuery简单实现tab选项卡切换效果
2016/06/20 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
2016/12/08 Javascript
详解webpack自动生成html页面
2017/06/29 Javascript
vue 文件目录结构详解
2017/11/24 Javascript
在react-router4中进行代码拆分的方法(基于webpack)
2018/03/08 Javascript
浅谈微信页面入口文件被缓存解决方案
2018/09/29 Javascript
微信小程序实现购物页面左右联动
2019/02/15 Javascript
详解javascript设计模式三:代理模式
2019/03/25 Javascript
Vue-router 报错NavigationDuplicated的解决方法
2020/03/31 Javascript
微信小程序吸底区域适配iPhoneX的实现
2020/04/09 Javascript
python多线程扫描端口示例
2014/01/16 Python
利用python批量检查网站的可用性
2016/09/09 Python
Python中常用信号signal类型实例
2018/01/25 Python
python实现mask矩阵示例(根据列表所给元素)
2020/07/30 Python
Python爬取你好李焕英豆瓣短评生成词云的示例代码
2021/02/24 Python
美国专营婴幼儿用品的购物网站:buybuy BABY
2017/01/01 全球购物
我的动漫时代的创业计划书范文
2014/01/27 职场文书
幼儿园运动会入场词
2014/02/10 职场文书
乡镇保密工作责任书
2014/07/28 职场文书
市场营销毕业求职信
2014/08/07 职场文书
2015年父亲节活动总结
2015/02/12 职场文书
自我推荐信怎么写
2015/03/24 职场文书
农村党员干部承诺书
2015/05/04 职场文书
撤诉申请怎么写
2015/05/19 职场文书
《藏戏》教学反思
2016/02/23 职场文书
导游词之南京莫愁湖公园
2019/11/13 职场文书
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS