微信小程序自定义全局组件showModal

最新推荐文章于 2025-06-12 14:36:32 发布
置顶 最新推荐文章于 2025-06-12 14:36:32 发布
阅读量1.2k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 微信小程序开发实际功能 文章标签： 微信小程序 小程序 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/dreamimport/article/details/129128927
本文介绍如何在微信小程序中创建一个自定义全局组件NavModal，以替代默认的showModal样式，并通过eventBus实现数据和事件的监听。详细步骤包括组件的创建、event.js的编写、在app.js和app.json中的引入，以及在页面底部引入组件。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

开发过程中微信提供的showmodal样式不符合ui风格，又不想写成组件用的页面都引入，就考虑模拟showmodal写一个自定义的弹框组件

一，在components中新建一个navModal组件
navModal.wxml

<view class="modal_mask" hidden='{
   
   {hidden}}'>
  <view class="modal_body">
    <view class
了解本专栏 订阅专栏 解锁全文 超级会员免费看
微信小程序中组件封装与全局调用技巧
qq_40791475的博客
09-06 2695
本文详细介绍了微信小程序中的自定义组件封装与全局调用技巧。我们探讨了组件传参的多种方式，包括直接标签传参、方法调用传参、事件传参和回调函数传参，并逐一分析了它们的优缺点。通过丰富的代码示例，演示了如何封装类似于 wx.showModal 和 wx.showToast 的全局组件，提升开发效率。同时还讨论了按需加载组件的动态渲染方法。通过这篇文章，开发者能够更深入地理解微信小程序自定义组件的设计与优化策略。
微信小程序自定义Toast
Happy__EveryDay的专栏
01-18 3040
实现类似于Android的Toast提示 index.js： var timer; var inputinfo = ""; var app = getApp() Page({ data: { animationData:"", showModalStatus:false }, onLoad: function () { }, showMo
微信小程序 showModal 自定义showModal.zip
09-25
微信小程序 showModal 自定义showModal.zip
自定义小程序showModal对话框
hjy170314的博客
10-28 494
小程序自定义对话框的书写 html部分 <view class="modal-mask" bindtap="hideModalC" wx:if="{{showModelConflict}}"></view> <view class="modal-dialog" wx:if="{{showModelConflict}}"> <view class="modal-title">弹窗标题</view> <view
wx.showModal详解
最新发布
GanKuRenSheng的博客
06-12 929
javascript。
微信小程序 -实现自定义弹窗组件(modal模态框)
Jiaberrr的博客
09-09 2534
微信小程序自带的弹窗是wx.showModal，但是我发现它扩展能力有限，并不能满足自定义的需求，所以用 css + js封装了一个弹窗组件，效果图如下，附源码。
小程序自定义showModal弹框
weixin_43831302的博客
01-10 1574
纯属练习组件化 组件wxml页面代码如下 <view class='shade' hidden='{{popup}}' ></view> <view class='shade_box popup {{frameAnimate}}' hidden='{{popup}}'> <view class='content'>{{ title }}&l...
微信小程序全局组件的定义
weianl的博客
10-02 3858
项目场景： 在做项目中，当我们写到一些共用的js代码时，为了去耦合实现模块化，会把共用js代码提取出来封装好，哪里需要使用到的引用一下就好了。同理的，在小程序开发中，为了精简化项目，我们可以把共用的一部分代码（比如说登录弹窗、活动状态弹窗等）提取出来，写成组件，需要用到也页面引入一下就好了。 Demo演示： 为了方便演示父页与子组件间的数据传输，我写了个简化版的全局登录弹窗，具体可以看下面的GIF 代码部分： 项目结构： 我们先看下目录的具体结构，一般情况下创建的组件都会放到components文件夹
微信小程序Toast自定义组件
08-10
微信小程序 Toast 自定义组件是开发者为了提供更灵活、个性化的提示信息展示方式而设计的一种组件。在微信小程序的原生框架中，虽然内置了简单的 Toast 功能，但其功能有限，仅能显示预设的几种提示类型。因此，通过...
微信小程序的刻度尺组件开发，体重计算，页面显示，底部弹窗两种用法
06-01
在微信小程序的开发中，刻度尺组件是一个实用的功能，常用于健康类应用或测量工具类应用中。本文将深入探讨如何开发一个刻度尺组件，同时涉及体重计算、页面显示以及底部弹窗的两种用法。这些知识点对于提升微信小...
微信小程序组件化开发：自定义一个modal弹出窗（Dialog对话框
m0_60226911的博客
04-02 2323
总而言之，成功是留给准备好的人的。无论是参加什么面试，都要做好充足的准备，注意好面试的礼仪和穿着，向面试官表现出自己的热忱与真诚就好。即使最后没有过关，也要做好经验的总结，为下一次面试做好充足准备。这里我为大家准备了一些我在面试后整理的面试专题资料，除了面试题，还总结出了互联网公司Android程序员面试涉及到的绝大部分面试题及答案，并整理做成了文档，以及系统的进阶学习视频资料分享给大家，希望能帮助到你面试前的复习，且找到一个好的工作，也节省大家在网上搜索资料的时间来学习。
微信小程序实现自定义modal弹窗封装的方法
01-03
前言 小程序官方提供了 wx.showModal 方法，但样式比较固定，不能满足多元化需求，自定义势在必行~ 老规矩先上图 点击某个按钮，弹出 modal框，里面的内容可以自定义，可以是简单的文字提示，也可以输入框等复杂布局。操作完点击取消或确定关闭 modal. 如何使用 将下面的 modal.wxml 、modal.wxss 、modal.js 、modal.json 四个文件复制到对应位置即可。 封装完之后调用起来也很简单，看看调用的代码吧 <modal show={{showModal}} height='60%' bindcancel=modalCancel bin
微信小程序 --- 通用模块封装（showToast，showModal ，本地存储）
每天都要努力学习哦~~
02-21 4199
在小程序中，经常需要将一些数据存储到本地，方便多个页面的读取使用，例如：将用户的登录状态、用户的个人信息存储到本地。如果直接使用这些 API，会比较麻烦，通常情况下，我们需要对本地存储的方法进行封装。同时，我们在后续还会进行网络通用模块的封装，如果直接进行封装难度比较大，在进行项目开发的时候，我们经常的会频繁的使用到一些 API，进行通过模块的封装，也是为后续 [网络请求封装] 做铺垫。，会导致代码很冗余，为了减少了代码冗余，我们需要将这些。可以看到封装后方法，极大简化 API 的调用，
微信小程序开发学习笔记——4.2showModal和showLoading界面交互操作
Qy_cm的博客
03-19 4300
>跟着b站up主“咸虾米_”学习中，把学习记录存到这方便后续查找。
UniApp转微信小程序之全局组件
qq_46797048的博客
10-17 2067
微信小程序通过 vue-inset-loader 插件解决 UniApp H5端通过操作Dom树解决
微信小程序提示确认框 wx.showModal
代码小疯子
11-03 3053
核心实现代码如下title 是确认框的标题，content 是确认框显示的内容。用户点击确定按钮时，success 函数会被调用，并且 res.confirm 为 true。用户点击取消按钮时，res.cancel 为 true。
【微信小程序】全局配置
m0_67393593的博客
07-31 426
小程序根目录下的app.json文件是小程序的全局配置文件。常用的配置项如下①pages记录当前小程序所有页面的存放路径②window全局设置小程序窗口的外观③tabBar设置小程序底部的t9abBar效果④style是否启用新版的组件样式String字符串导航栏标题文字内容HexColor#000000导航栏背景颜色，如#000000Stringwhite导航栏标题颜色，仅支持black/whiteHexColor#ffffff设置步骤。...
微信小程序 将一个组件注册为全局公共组件
weixin_45966674的博客
09-04 607
我们可以在小程序 根目录的app.json中设置usingComponents属性来完成。通常我们小程序使用组件 需要在对应使用组件的page的json文件中声明。但可能我们有一些组件 非常多地方用 vue有Vue.use(组件);然后我们将原本page中json的配置删掉。这样他就成立一个项目全局的公共组件了。重新编译 会发现组件依旧能正常使用。这样 他就成立一个公共组件。
微信小程序--wx.showModal
热门推荐
海到无边天作岸 山登绝顶我为峰
02-06 2万+
wx.showModal 显示模态对话框 参数 属性 类型 默认值 必填 说明 title string 否 提示的标题 content string 否 提示的内容 showCancel boolean true 否 是否显示取消按钮 cancelText string ‘取消’ 否 取消按钮的文字，最多 4 个字符 cancelColor string #000000 否 取消按钮的文字颜色，必须是 16 进制格式的颜色字符串 confirmText string
微信小程序自定义弹框Modal示例教程
### 微信小程序自定义Modal示例xcxModal-master.zip #### 微信小程序基础知识 微信小程序是基于微信运行的轻应用，其前端使用的是微信自己开发的WXML（WeiXin Markup Language）和WXSS（WeiXin Style Sheets），...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值