小程序

1. 解决 onReachBottom 350ms 频繁触发

onReachBottom() {
  setTimeout(this.loadSaleInfo, 400)
},

2. 微信支付

/**
 * @description: 微信支付
 * @param {Number} orderId 订单ID
 * @param {String} orderNo 订单号
 * @param {Number} grouponOrderId 拼团订单ID
 * @param {Number} type 订单号
 * @author: ljw
 */
async wxPay({ orderId, orderNo, grouponOrderId }, type) {
  const { $showToast } = this
  // 创建支付订单
  const { code, data } = await Pay({ orderId })
  if (code === 200) {
    const { timeStamp, nonceStr, paySign, signType } = data
    // 唤醒微信支付
    uni.requestPayment({
      provider: 'wxpay',
      orderInfo: orderNo,
      timeStamp,
      nonceStr,
      package: data.package,
      signType,
      paySign,
      success: _ => {
        switch (type) {
          case 1:
            this.shareButton = false
            this.hint = '购买成功'
            break
          case 2:
            this.grouponOrderId = grouponOrderId
            this.shareButton = true
            this.hint = '开团成功'
            break
          case 3:
            this.shareButton = false
            this.hint = '加入成功'
            break
        }
        this.isLoginTips = false
        this.modalVisible = true
      },
      fail: _ => $showToast('支付失败'),
    })
  }
},

3. canvas 绘制圆角

/**
 * @description: 绘制圆角
 * @param {Number} x x坐标
 * @param {Number} y y坐标
 * @param {Number} w 宽度
 * @param {Number} h 高度
 * @param {Number} r 圆角
 * @param {CanvasContext} ctx 绘制上下文
 * @author: ljw
 */
darwRoundRect(x, y, w, h, r, ctx) {
  ctx.save()
  ctx.beginPath()

  // 左上弧线
  ctx.arc(x + r, y + r, r, 1 * Math.PI, 1.5 * Math.PI)
  // 左直线
  ctx.moveTo(x, y + r)
  ctx.lineTo(x, y + h - r)
  // 左下弧线
  ctx.arc(x + r, y + h - r, r, 0.5 * Math.PI, 1 * Math.PI)
  // 下直线
  ctx.lineTo(x + r, y + h)
  ctx.lineTo(x + w - r, y + h)
  // 右下弧线
  ctx.arc(x + w - r, y + h - r, r, 0 * Math.PI, 0.5 * Math.PI)
  // 右直线
  ctx.lineTo(x + w, y + h - r)
  ctx.lineTo(x + w, y + r)
  // 右上弧线
  ctx.arc(x + w - r, y + r, r, 1.5 * Math.PI, 2 * Math.PI)
  // 上直线
  ctx.lineTo(x + w - r, y)
  ctx.lineTo(x + r, y)

  ctx.setFillStyle('white')
  ctx.fill()
},

4. 获取日期信息与梯度时间

/**
 * @description: 门票日期列表
 * @author: ljw
 */
export const playDateList = () => {
  const date = new Date()
  const length = 7
  const ary = []
  const size = 24 * 60 * 60 * 1000
  while (ary.length < length) {
    ary.push({
      year: date.getFullYear(),
      date: `${(date.getMonth() + 1).toString().padStart(2, 0)}-${date
        .getDate()
        .toString()
        .padStart(2, 0)}`,
      week: `周${['日', '一', '二', '三', '四', '五', '六'][date.getDay()]}`,
    })
    date.setTime(date.getTime() + size)
  }

  return ary
}

/**
 * @description: 门票时间列表
 * @author: ljw
 */
export const playTimeList = date => {
  const selectDate = `${new Date().getFullYear()}/${date}`
  const startTime = new Date(`${selectDate} 09:00:00`)
  const length = 27
  const size = 30 * 60 * 1000
  const ary = []
  while (ary.length < length) {
    ary.push(
      `${startTime.getHours().toString().padStart(2, 0)}:${startTime
        .getMinutes()
        .toString()
        .padStart(2, 0)}`
    )
    startTime.setTime(startTime.getTime() + size)
  }

  return ary
    .filter(time => +new Date(`${selectDate} ${time}:00`) > +new Date())
    .map((time, index) => ({
      label: time,
      value: index + 1,
    }))
}

5. Tips

• Vue 原型中定义的属性，在 template 中不可用。

• IOS 设备底部 margin 无效，使用 padding 解决。

• 图片预览可以保存图片，不需要配置 https 安全域名。

• 日期应用 1970/01/01 方式，不用 1970-01-01，在 IOS 中 new Date(1970-01-01) 会报错。

• input 的 placeholder 样式更改，style 不能使用 scoped。

• 字体图标渐变样式在 IOS 可能会不显示。

• 不可巧用 JSON.stringify() 机制在传参时用 void 0（undefined）。

• 插件市场封装的绘图插件可能在 IOS 上不显示。

• cover-image 的 padding 区域不能监听事件，采用 cover-view 包裹。

• cover-view

  • 嵌套在 map、canvas、camera 等原生控件里才可覆盖；
  • 只能嵌套 cover-view 标签；
  • 不能使用渐变色，盒子阴影无效；
  • flex 布局文本居中无效，可用 padding 挤挤居中；
  • 边框必须四边都有，否则无效；
  • 真机会有渲染慢而出现移动现象，可以采用延时显示（v-show）解决；