400-650-7353

精品课程

您所在的位置:首页 > IT干货资料 > web前端 > 【Web前端基础知识】微信小程序之自定义组件创建及使用

【Web前端基础知识】微信小程序之自定义组件创建及使用

  • 发布: Web前端培训
  • 来源:
  • 2021-08-30 16:50:55
  • 阅读()
  • 分享
  • 手机端入口

一、自定义组件简述

开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用;也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护。自定义组件在使用时与基础组件非常相似。

二、如何创建自定义组件

1、创建一个放自定义组件集合的文件夹,

2、创建自定义组件的文件夹

3、鼠标右键自定义组件文件夹新建Component

三、如何引用

1、在页面组件的配置文件中注册,配置文件为.json的文件

***图中“my-btn”为组件的名字随便写,后面跟的组件的路径***

  1. {   
  2.   "usingComponents": {   
  3.     "my-btn""../../components/mybtn/mybtn"   
  4.   }   
  5. }   

2、在页面.wxml文件中使用即可

  1.    

四、组件的样式设置

组件的样式很简单,类比页面,在.wxml中写组件页面结构,在.wxss中写样式

注意!!!:类名选择器必须使用class

wxml文件:

  1. class="btn"> 我是mybtn组件   

wxss文件:

  1.  .btn{     background: red;    }   

五、 组件的数据和方法

自定义组件中.js文件,data字段是存放数组的,methods是写方法的,可类比vue学习,在data中写入数据可在wxml中渲染

1、如何渲染数据

.js文件:

  1. data: {     
  2.     title: "我是按钮"  
  3.  },  

.wxml文件 :

  1. class="btn"> {{title}}    

2、如何绑定数据

.wxml文件:

  1. class="btn" bindtap="btnClick"> {{title}}    

.js文件:

  1. methods: {   
  2.  
  3.   btnClick() {   
  4.  
  5.     console.log( "btnClick" );   
  6.  
  7.   }   
  8.  
  9. }   

六、组件的对外开放属性 -- properties

组件的对外属性,用来接收外界传递到组件中的数据,组件的 properties 和 data 的用法类似,它们都是可读可写的,只不过:

-- data 更倾向于存储组件的私有数据

-- properties 更倾向于存储外界传递到组件中的数据

properties属性不需要在自定义组件内部进行修改,是通过组件调用时传递进来的!!!

语法结构 :

  1. 属性名称: {   
  2.     type:String,NUmber,【null不限制数据类型】   
  3.     value: ""   
  4. }   

组件内定义:

  1. properties: {   
  2.     color: {   
  3.       type: String,   
  4.       value: "red"//默认颜色   
  5.    }   
  6. }  

组件页面中使用:

  1. "btnClick" style= "background: {{ color }}">{{title}}    

使用自定义组件传入对外开放属性:

  1. "pink">   
  2. //此时button按钮就会变成粉色   

 

学习疑问申请解答
您的姓名
您的电话
意向课程
 

中公优就业

IT小助手

扫描上方二维码添加好友,请备注:599,享学习福利。

>>本文地址:
注:本站稿件未经许可不得转载,转载请保留出处及源文件地址。

推荐阅读

优就业:ujiuye

关注中公优就业官方微信

  • 关注微信回复关键词“大礼包”,享学习福利
QQ交流群
在线疑问解答
(加群备注“网站”)
IT培训交流群 加入群聊 +
软件测试 加入群聊 +
全链路UI/UE设计 加入群聊 +
Python+人工智能 加入群聊 +
互联网营销 加入群聊 +
Java开发 加入群聊 +
PHP开发 加入群聊 +
VR/AR游戏开发 加入群聊 +
大前端 加入群聊 +
大数据 加入群聊 +
Linux云计算 加入群聊 +
优就业官方微信
扫码回复关键词“大礼包”
享学习福利

测一测
你适合学哪门IT技术?

1 您的年龄

2 您的学历

3 您更想做哪个方向的工作?

获取测试结果
 
课程资料、活动优惠 领取通道