小程序alert在ios不起作用 微信小程序alert函数

 

小程序在创建项目的时候，会有一个utils文件夹，下面有个util.js文件，这个就是给大家存放封装函数用的。当然，你也可以自己写个js文件进行封装，只是调用不同罢了。

今天就给大家分享一下一些常用的方法或API。

1.alert
众所周知，小程序是没有alert弹框的，但是为我们提供了wx.showModal这个API。（具体如下图）
但是，每次写个弹框都这么玩的话，肯定不得了，代码得老长老长的，繁琐且不美观。那么我们可以把它封装一下，具体操作如下：

//封装wx.showModel为alert
function alert(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
}

然后在子页面调用该方法：

const util = require('/utils/util.js'); //路径别抄我的，根据你们自己的情况写

//如果我要写一个标题为“温馨提示”，内容为“这是一个alert方法”，点击确定提示“您点击了确定”，点击取消提示“您点击了取消”，则：
let confirm = ()=>{
	util.showSuccessToast('您点击了确定') 
}

let cancel= ()=>{
	util.showErrorToast('您点击了取消')
}
//以上是toast的封装调用写法，详情请看下面的toast封装；

util.alert('温馨提示','这是一个alert方法',confirm,cancel) 
//就这样就好了，如果不需要写点击确定或取消的回调，省略上面两个函数，会更简洁，相比起每次wx.showModal简直不要太爽

这里我主要是拿常用的属性进行封装，字体颜色什么的，我就没写进去，需要的话你们自己加参数即可。

2.Toast

有了上面的详细介绍，别的我就不多说了，直接上文档和代码：

//失败toast
function showErrorToast(msg) { 
  wx.showToast({
    title: msg,
    mask: true,
    image: '/static/images/icon_error.png' //自定义失败图标
  })
}
//成功toast
function showSuccessToast(msg) {
  wx.showToast({
    title: msg,
  })
}

module.exports = {
  showErrorToast,
  showSuccessToast
}

util.showErrorToast('失败')
util.showSuccessToast('成功')

3.函数节流
节流是什么东西呢，举个例子，微信支付的时候，你一个支付按钮，用户不停地点（支付页面没立即出来），你就不停的给后台发送订单信息，不断请求后台API，势必造成服务器资源的消耗，也可能会出现一些你意想不到的BUG。那么有没有什么办法让用户可以在某一个时间内多次点击只执行一次呢？
有人可能会说了，我写个按钮，给它动态的添加disabled属性。我承认这个方法可行，但是，太繁琐。对html(wxml)标签也有限制，你可以尝试一下节流或者防抖，这里的场景就比较适用节流：

//函数节流
function throttle(fn, timer) {
  if (timer == null || timer == undefined) {
    timer = 1000
  }

  let lastTime = null

  // 返回新的函数
  return function () {
    let nowTime = + new Date()
    if (nowTime - lastTime > timer || !lastTime) {
      fn.apply(this, arguments)   //将this和参数传给原函数
      lastTime = nowTime
    }
  }
}

module.exports = {
  throttle
}

//子页面
  //节流函数，一秒钟内多次点击只触发一次
  pay:util.throttle(function(e){
    this.submitOder()
  },1000),

  submitOder(){
    // 提交订单
    let data = { storeId: this.data.storeId, totalPrice: this.data.price, order_type: 3 }
    if (this.data.price < 0.01) {
      util.showErrorToast('不能少于0.01')
      return
    } else if (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)
      })
    }
  },