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


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 相关文章推荐
推荐30个新鲜出炉的精美 jQuery 效果
Mar 26 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
May 05 Javascript
浅析JS运动
Dec 28 Javascript
AngularJs定制样式插入到ueditor中的问题小结
Aug 01 Javascript
BootStrap Typeahead自动补全插件实例代码
Aug 10 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
Sep 05 Javascript
详解jQuery uploadify文件上传插件的使用方法
Dec 16 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
Jan 22 Javascript
动态加载权限管理模块中的Vue组件
Jan 16 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
Feb 26 Javascript
傻瓜式vuex语法糖kiss-vuex整理
Dec 21 Javascript
JSONP解决JS跨域问题的实现
May 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
咖啡与牛奶
2021/03/03 冲泡冲煮
PHP 处理图片的类实现代码
2009/10/23 PHP
PHP中抽象类,接口功能、定义方法示例
2019/02/26 PHP
createElement动态创建HTML对象脚本代码
2008/11/24 Javascript
html中的input标签的checked属性jquery判断代码
2012/09/19 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
2013/11/30 Javascript
jquery复选框全选/取消示例
2013/12/30 Javascript
javascript使用正则表达式检测IP地址
2014/12/03 Javascript
javascript事件冒泡和事件捕获详解
2015/05/26 Javascript
AngularJS实现表单手动验证和表单自动验证
2015/12/09 Javascript
详解Angular.js指令中scope类型的几种特殊情况
2017/02/21 Javascript
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
2017/04/13 Javascript
实例讲解javascript实现异步图片上传方法
2017/12/05 Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
2018/08/29 Javascript
基于vue-draggable 实现三级拖动排序效果
2020/01/10 Javascript
vue-cli 关闭热更新操作
2020/09/18 Javascript
[43:24]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.12
2020/12/17 DOTA
Python中 Lambda表达式全面解析
2016/11/28 Python
django开发教程之利用缓存文件进行页面缓存的方法
2017/11/10 Python
python多进程控制学习小结
2018/10/31 Python
Python二叉树的遍历操作示例【前序遍历,中序遍历,后序遍历,层序遍历】
2018/12/24 Python
如何在Django中添加没有微秒的 DateTimeField 属性详解
2019/01/30 Python
Python实现的IP端口扫描工具类示例
2019/02/15 Python
python使用BeautifulSoup与正则表达式爬取时光网不同地区top100电影并对比
2019/04/15 Python
Python将字典转换为XML的方法
2020/08/01 Python
美国高端婴童品牌:Hanna Andersson
2016/10/30 全球购物
美国网上花店:JustFlowers
2017/02/12 全球购物
美国名牌手表折扣网站:Jomashop
2020/05/22 全球购物
大学生活动策划方案
2014/02/10 职场文书
《桃花心木》教学反思
2014/02/17 职场文书
故宫导游词
2015/01/31 职场文书
党支部评议意见
2015/06/02 职场文书
借钱欠条怎么写
2015/07/03 职场文书
珍爱生命主题班会
2015/08/13 职场文书
农村房屋租赁合同(范本)
2019/07/23 职场文书
python自动计算图像数据集的RGB均值
2021/06/18 Python