微信小程序之自定义组件及使用

1、创建自定义组件文件夹与文件:

创建一个名为custom-dialog的自定义组件,位于components下,创建自定义弹窗组件文件夹结构如下:

写好自定义组件的结构文件.wxml、样式文件wxss、逻辑文件.js。

2、组件注册:

该组件(本例子指CustomDialog 组件)的文件夹内含有一个有效的 .json 文件,且该文件中正确指定了组件的名称,例如:

3、在页面中使用自定义组件

3.1导入并使用组件:

在需要使用此组件的页面的wxml文件中,本例子是在需要用到弹窗的页面index页面中引入并使用该组件:

3.2确认组件引入

确保已在使用 <custom-dialog> 的页面中正确引入了该组件,例如在页面的 json 文件中添加组件路径:

这时你的组件就定义好并可以使用了!

相关推荐
大米饭消灭者1 天前
Taro是怎么实现一码多端的【底层原理】
微信小程序·taro
FliPPeDround3 天前
Vitest Environment UniApp:让 uni-app E2E 测试变得前所未有的简单
微信小程序·e2e·前端工程化
FliPPeDround3 天前
微信小程序自动化的 AI 新时代:wechat-devtools-mcp 智能方案
微信小程序·ai编程·mcp
吴声子夜歌3 天前
小程序——布局示例
小程序
码云数智-大飞3 天前
如何创建自己的小程序,码云数智与有赞平台对比
微信小程序
luffy54593 天前
微信小程序页面使用类似filter函数的wxs语法
微信小程序·小程序
Slow菜鸟3 天前
微信小程序开发(二)目录结构完全指南
微信小程序·小程序
攀登的牵牛花3 天前
给女朋友写了个轻断食小程序:去老丈人家也是先动筷了
前端·微信小程序
前端小雪的博客.3 天前
【保姆级教程】uniAI 插件高效开发 uni-app 微信小程序(附实战案例)
微信小程序·uni-app·ai编程·uniai
小小王app小程序开发3 天前
海外盲盒小程序抽赏玩法分析(附跨境技术落地要点)
小程序