E企盈营销工具技术服务商 热线:4006-838-530

showtoast,**微信小程序常用方法、API封装之alert+showToast+节流函数**

E企盈直播平台营销卖货系统

小程序交流群:609690978小程序在创建项目的时候,会有一个utils文件夹,下面有个util.js文件,这个就是给大家存放封装函数用的。当然,你也可以自己写个js文件进行封装,只是调用不同罢了。今天就给大家分享一下一些常用的方法或API。1.alert众所周知,小程序是没有alert弹框的,但是为我们提供了wx.showModal这个API。(具体如下图)但是,每次写个弹框都这么玩的话,肯定不得了,代码得老长老长的,繁琐且不美观。那么我们可以把它封装一下,具体操作如下://封装wx.showModel为alertfunctionalert(title=”,msg=”,confirm,cancel){//confirm,cancel分别对应成功后的回调函数和失败后的回调函数wx.showModal({title:title,//标题content:msg,//提示内容showCancel:cancel?true:false,//是否显示取消按钮(如果cancel函数为空也就是不传,则不显示,否则显示)success:res={if(res.confirm){if(confirm){//如果confirm函数不为空,则点击确定执行该函数confirm()}}if(res.cancel){//如果cancel函数不为空,则点击取消执行该函数if(cancel){cancel()}}}})}//输出该方法,便于子页面调用module.exports={alert}然后在子页面调用该方法:constutil=require(‘/utils/util.js’);//路径别抄我的,根据你们自己的情况写//如果我要写一个标题为“温馨提示”,内容为“这是一个alert方法”,点击确定提示“您点击了确定”,点击取消提示“您点击了取消”,则:letconfirm=()={util.showSuccessToast(‘您点击了确定’)}letcancel=()={util.showErrorToast(‘您点击了取消’)}//以上是toast的封装调用写法,详情请看下面的toast封装;util.alert(‘温馨提示’,’这是一个alert方法’,confirm,cancel)//就这样就好了,如果不需要写点击确定或取消的回调,省略上面两个函数,会更简洁,相比起每次wx.showModal简直不要太爽这里我主要是拿常用的属性进行封装,字体颜色什么的,我就没写进去,需要的话你们自己加参数即可。2.Toast有了上面的详细介绍,别的我就不多说了,直接上文档和代码://失败toastfunctionshowErrorToast(msg){wx.showToast({title:msg,mask:true,image:’/static/images/icon_error.png’//自定义失败图标})}//成功toastfunctionshowSuccessToast(msg){wx.showToast({title:msg,})}module.exports={showErrorToast,showSuccessToast}util.showErrorToast(‘失败’)util.showSuccessToast(‘成功’)3.函数节流节流是什么东西呢,举个例子,微信支付的时候,你一个支付按钮,用户不停地点(支付页面没立即出来),你就不停的给后台发送订单信息,不断请求后台API,势必造成服务器资源的消耗,也可能会出现一些你意想不到的BUG。那么有没有什么办法让用户可以在某一个时间内多次点击只执行一次呢?有人可能会说了,我写个按钮,给它动态的添加disabled属性。我承认这个方法可行,但是,太繁琐。对html(wxml)标签也有限制,你可以尝试一下节流或者防抖,这里的场景就比较适用节流://函数节流functionthrottle(fn,timer){if(timer==null||timer==undefined){timer=1000}letlastTime=null//返回新的函数returnfunction(){letnowTime=+newDate()if(nowTime-lastTimetimer||!lastTime){fn.apply(this,arguments)//将this和参数传给原函数lastTime=nowTime}}}module.exports={throttle}//子页面//节流函数,一秒钟内多次点击只触发一次pay:util.throttle(function(e){this.submitOder()},1000),submitOder(){//提交订单letdata={storeId:this.data.storeId,totalPrice:this.data.price,order_type:3}if(this.data.price0.01){util.showErrorToast(‘不能少于0.01’)return}elseif(isNaN(this.data.price)){util.showErrorToast(‘请输入正确金额’)return}else{util.post(api.submitOrder,data).then(res={wx.showLoading({title:’正在提交订单,请稍后…’,})if(res.errno==0){wx.hideLoading()this.payMoney(res.data.orderInfo.id)}else{wx.hideLoading()util.alert(res.errmsg)}}).catch(err={util.alert(err.msg)})}},小程序交流群:609690978

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » showtoast,**微信小程序常用方法、API封装之alert+showToast+节流函数**
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏