微信小程序消息提醒封装(简单但是最实用)


题记:微信小程序做久了,一直用的都是微信原生的控件,其他的还能凑合用,但是每次关于消息的提醒,都要写那几行冗余代码,不忍吐槽,后来思考要不要封装成组件来用,权衡之后,官方组件只是丑点,但是基本满足需求,所以我们只对基本的showToast和showModal进行封装,毕竟比较高频。

一、思路

封装的话思考点是两点:
封装简单,减少冗余代码

  1. 优化代码,减少代码的冗余
  2. 优化调用,使用的时候最好一行代码即可

所以,根据小程序结构封装代码放在全局的app.js最好,使用的时候只需要一次初始化即可。

二、开干

这是我的处理方法,仅供参考,如有更方便的可以交流

2.1 在app.js中获取当前页面对象,进行函数绑定
initNotice(){
    let pages = getCurrentPages(); // 获取页面栈
    let page = pages[pages.length-1];// 获取当前页面对象
    page.showCustomToast = function(e){ // 绑定事件到当前对象
      wx.showToast({
        title: e,
        duration:1000,
        icon:'none'
      })
    }
    page.showCustomModal = function(title,callback){// 绑定事件到当前对象,至于左右按钮的样式和取消按钮的事件,根据自己的业务自己添加
      wx.showModal({
        title: '',
        content: title,
        success(res) {
          if (res.confirm) {
            callback();
          }
        }
      })
    }
  },
2.2 页面初始化

在任意使用消息提醒的页面进行初始化,基本每个页面都会用的到,所以我基本每个页面都进行了调用,上代码:

onLoad: function () {
   // 页面初始化 options为页面跳转所带来的参数
   let app = getApp();//获取全局app对象
   app.initNotice();  // 调用这个函数进行事件的初始化绑定
 },

截止到目前为止,已经绑定完成,就是一行代码

2.3 调用

因为事件已经绑定到当前页面的this对象上了,所以可以直接"this."的形式进行调用,很简单:样例:

let that = this;
that.showCustomModal('测试一下Modal',function(){
    that.showCustomToast("测试成功!");
});

效果:
在这里插入图片描述
点击确定:
在这里插入图片描述
因为个人喜欢不带icon的提示,所以如果有需求可自行封装。

后记

到这里基本完了,比较简单,最后说一下,考虑到app.js不能太笨重,所以只把开发中一些很高频的代码封装进来,嗯,还是挺爽的

  • 4
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序的API封装是指将微信小程序官方提供的各种功能接口进行封装,以方便开发者调用和使用。随着微信小程序的不断发展,其API封装也不断更新,以满足开发者对功能需求的更多期待。 目前,微信小程序的API封装已经非常齐全,涵盖了各个方面的功能需求。一方面,它包括了基础功能的封装,如页面路由、数据缓存、事件处理等,使开发者能够更加方便地进行页面跳转、本地数据存储和事件绑定等操作。 另一方面,微信小程序的API封装也包括了丰富的界面组件和交互能力的封装,如模态框、滑动视图、下拉刷新等,使开发者能够快速构建各类交互丰富的小程序界面。 此外,微信小程序的API封装还包括了网络请求、位置信息、支付功能等重要能力的封装,开发者可以通过调用相应接口,实现网络数据的获取、用户位置的获取和支付功能的实现等。 随着微信小程序的不断升级和功能增加,其API封装也会持续更新。为了更好地支持开发者的需求,微信团队也会提供最新的API文档和示例代码,使开发者能够更好地了解和使用微信小程序的各项功能。 总之,微信小程序的API封装非常齐全,能够满足绝大部分开发者的需求,并且会随着新功能的增加而不断更新。开发者只需要熟悉官方提供的API文档,就可以开发出功能丰富、交互流畅的微信小程序

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值