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


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定时刷新页面及跳转页面的方法
Jul 04 Javascript
javascript html5摇一摇功能的实现
Apr 19 Javascript
深入理解$.each和$(selector).each
May 15 Javascript
vue2的todolist入门小项目的详细解析
May 11 Javascript
Vue.js数据绑定之data属性
Jul 07 Javascript
Vue.directive 自定义指令的问题小结
Mar 04 Javascript
对于防止按钮重复点击的尝试详解
Apr 22 Javascript
记录vue做微信自定义分享的一些问题
Sep 12 Javascript
微信小程序实现多行文字超出部分省略号显示功能
Oct 23 Javascript
vue中使用v-for时为什么不能用index作为key
Apr 04 Javascript
Vue基本指令实例图文讲解
Feb 25 Vue.js
VUE解决跨域问题Access to XMLHttpRequest at
May 06 Vue.js
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添加Xdebug扩展的方法
2014/02/12 PHP
php两种无限分类方法实例
2015/04/21 PHP
解决安装WampServer时提示缺少msvcr110.dll文件的问题
2017/07/09 PHP
基于PHP常用文件函数和目录函数整理
2017/08/17 PHP
PHP二维索引数组的遍历实例分析【2种方式】
2019/06/24 PHP
js获取当前月的第一天和最后一天的小例子
2013/11/18 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
2013/11/21 Javascript
jQuery中document与window以及load与ready 区别详解
2014/12/29 Javascript
JavaScript中的类数组对象介绍
2014/12/30 Javascript
Boostrap模态窗口的学习小结
2016/03/28 Javascript
jQuery soColorPacker 网页拾色器
2016/06/22 Javascript
归纳下js面向对象的几种常见写法总结
2016/08/24 Javascript
JS解决iframe之间通信和自适应高度的问题
2016/08/24 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
2017/06/22 Javascript
详解tween.js的使用教程
2017/09/14 Javascript
Vuex 使用及简单实例(计数器)
2018/08/29 Javascript
node.js处理前端提交的GET请求
2019/08/30 Javascript
javascript 易错知识点实例小结
2020/04/25 Javascript
Vue中使用JsonView来展示Json树的实例代码
2020/11/16 Javascript
vue实现树状表格效果
2020/12/29 Vue.js
[03:46]DAC趣味视频-中文考试.mp4
2017/04/02 DOTA
Python中Django框架利用url来控制登录的方法
2015/07/25 Python
pip命令无法使用的解决方法
2018/06/12 Python
python 实现视频流下载保存MP4的方法
2019/01/09 Python
python实现字符串加密成纯数字
2019/03/19 Python
Python实现平行坐标图的两种方法小结
2019/07/04 Python
利用Python检测URL状态
2019/07/31 Python
Python: tkinter窗口屏幕居中,设置窗口最大,最小尺寸实例
2020/03/04 Python
pygame实现飞机大战
2020/03/11 Python
python datetime时间格式的相互转换问题
2020/06/11 Python
详解Python流程控制语句
2020/10/28 Python
selenium设置浏览器为headless无头模式(Chrome和Firefox)
2021/01/08 Python
瑞典轮胎在线:Tirendo.se
2018/06/21 全球购物
在职人员函授期间自我评价分享
2013/11/08 职场文书
毕业自荐信
2013/12/16 职场文书
2014幼儿园教育教学工作总结
2014/12/17 职场文书