微信小程序的自定义组件

一、创建自定义组件

(1)定义:

把页面重复的代码部分封装成为一个自定义组件,以便在不同的页面中重复使用,有助于代码的维护。

(2)组成:

自定义组件的组成:json文件,js文件,wxml文件,wxss文件

(也就是配置,逻辑,结构,样式)

(3)使用:

在components文件夹下新建一个文件夹,命名为test。test文件夹下新建component。然后自定义命名为test敲回车

(4)此时,test.js里面会出现如下属性。

data属性,可读可写,更倾向于储存组件的私有数据

properties属性,可读可写,更倾向于存储外界传递的公有数据

(5)在test.wxml里面写好自定义组件封装的内容:

javascript 复制代码
<view>我是自定义组件test</view>

二、使用自定义组件

(1)使用前提:

在页面的json文件或app.json里修改全局配置

自定义组件的引用方式:

局部引用:在页面的json文件中引用自定义组件

全局引用:在app.json全局配置文件中引用自定义组件

(2)使用:

在app.json里面:

然后直接在pages下的index.wxml引用自定义组件test

(3)效果如图所示:

相关推荐
lhldsg2 小时前
相册印刷实战指南:从设计规范到系统落地全流程解析
java·小程序·架构·设计规范
汤姆yu2 小时前
基于微信小程序的晚托机构管理系统
微信小程序·小程序·晚托
博、、2 小时前
酒馆预约系统开发实战:从需求分析到上线部署指南
小程序·需求分析
zww89491113 小时前
相册印刷项目实战指南:从设计到成品的完整技术流程
java·小程序·eclipse
2501_915918413 小时前
Flutter项目配置iOS混淆的详细步骤与工具推荐
android·flutter·ios·小程序·uni-app·cocoa·iphone
这是程序猿4 小时前
高校宿舍信息管理系统小程序
java·小程序·毕业设计
凡泰AI4 小时前
如何通过小程序多端框架,让一个小程序同时运行在iOS、安卓、鸿蒙和微信客户端,实现开发层面的降本增效
android·ios·微信小程序·小程序·harmonyos
博、、13 小时前
智慧场馆解决方案小程序系统:从架构设计到部署实践
小程序
lhldsg17 小时前
智慧场馆解决方案小程序开发实战:从架构设计到部署指南
java·小程序·uni-app
维双云17 小时前
配送小程序怎么做?从下单到配送全流程功能拆解。
小程序