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


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 相关文章推荐
在IE下:float属性会影响offsetTop的取值
Dec 22 Javascript
javascript 去字符串空格终极版(支持utf8)
Nov 14 Javascript
JS操作Cookie写入和读取实例代码
Oct 20 Javascript
JavaScript判断用户是否对表单进行了修改的方法
Mar 18 Javascript
javascript实现滚动效果的数字时钟实例
Jul 21 Javascript
js实现复选框的全选和取消全选效果
Jan 03 Javascript
vue.js中mint-ui框架的使用方法
May 12 Javascript
Node.js编写CLI的实例详解
May 17 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
Sep 21 Javascript
基于wordpress的ajax写法详解
Jan 02 Javascript
JS设计模式之策略模式概念与用法分析
Feb 05 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
Jul 10 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支持页面回退的两种方法[转]
2007/02/14 PHP
php环境配置 php5 MySQL5 apache2 phpmyadmin安装与配置图文教程
2007/03/16 PHP
PHP中用header图片地址 简单隐藏图片源地址
2008/04/09 PHP
解析php取整的几种方式
2013/06/25 PHP
如何用javascript判断录入的日期是否合法
2007/01/08 Javascript
js prototype 格式化数字 By shawl.qiu
2007/04/02 Javascript
jquery.cookie用法详细解析
2013/12/18 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
2014/06/05 Javascript
JavaScript异步加载浅析
2014/12/28 Javascript
javascript中数组和字符串的方法对比
2016/07/20 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
2016/11/25 Javascript
Angular中使用$watch监听object属性值的变化(详解)
2017/04/24 Javascript
详解vue-loader在项目中是如何配置的
2018/06/04 Javascript
nuxt.js 缓存实践
2018/06/25 Javascript
ssm+vue前后端分离框架整合实现(附源码)
2020/07/08 Javascript
JS+CSS实现炫酷光感效果
2020/09/05 Javascript
js简单粗暴的发布订阅示例代码
2021/01/23 Javascript
Python 制作糗事百科爬虫实例
2016/09/22 Python
Python实现删除列表中满足一定条件的元素示例
2017/06/12 Python
你眼中的Python大牛 应该都有这份书单
2017/10/31 Python
Python基于win32ui模块创建弹出式菜单示例
2018/05/09 Python
python pyheatmap包绘制热力图
2018/11/09 Python
python爬取淘宝商品销量信息
2018/11/16 Python
Python 爬虫实现增加播客访问量的方法实现
2019/10/31 Python
聊聊python中的循环遍历
2020/09/07 Python
Python监听剪切板实现方法代码实例
2020/11/11 Python
英国最大的婴儿监视器网上商店:Baby Monitors Direct
2018/04/24 全球购物
农村婚庆司仪主持词
2014/03/15 职场文书
关于保护环境的建议书
2014/05/13 职场文书
个人借款协议书范本
2014/11/17 职场文书
2015年客服工作总结范文
2015/04/02 职场文书
客户经理岗位职责大全
2015/04/09 职场文书
2015年小学教师培训工作总结
2015/07/21 职场文书
javascript拖曳互换div的位置实现示例
2021/06/28 Javascript
gojs实现蚂蚁线动画效果
2022/02/18 Javascript