微信小程序开发部分流程以及踩坑记录

63 阅读2分钟

封装好请求函数

封装request函数

const app = getApp()
const env = wx.getAccountInfoSync().miniProgram.envVersion;
let domain = ''
const baseUrl = {
  development: '', // 开发请求地址
  trial: '', // 测试请求地址
  production: '', // 生产请求地址
}
//设置对应的接口基础地址
if (env === 'release') {
  domain = baseUrl.production
} else if (env === 'trial') {
  domain = baseUrl.trial
} else {
  domain = baseUrl.development
}

class MyRequest {
  // 在构造函数这里可以传入baseUrl 写入后面的url即可
  constructor(baseUrl) {
    this.baseUrl = baseUrl
  }

  request(options) {
    const {
      url
    } = options // 将地址解构出来 待会要拼接在baseUrl后面
    return new Promise((resolve, reject) => {
      wx.request({
        ...options,
        url: this.baseUrl + url, // 在这里写拼接后的url 覆盖掉上面的即可
        success: (res) => {
          if (res.data.code === '203') {
            wx.showModal({
              title: "登录时效已过",
              content: "请点击右上角重新进入小程序",
              showCancel: false,
            });
            resolve()
          } else {
            resolve(res.data)
          }
        },
        fail: reject
      })
    })
  }
  get(options) {
    return this.request({
      ...options,
      method: "get"
    })
  }
  post(options) {
    return this.request({
      ...options,
      method: "post"
    })
  }
}
export const myRequset = new MyRequest(domain)
  • 不足:把token加进去 此后就不需要再手动添加token

封装了一个三联时间选择器

  • 其实也不需要自己手动写,找组件,但是就是看不明白怎么用,所以自己花了点时间封装
export class timePicker {
  constructor() {}
  gettime() {
    const Time = new Date()

    let month = Time.getMonth() + 1
    if (month < 10) {
      month = '0' + month
    }
    let date = Time.getDate()
    if (date < 10) {
      date = '0' + date
    }
    let hour = Time.getHours()
    if (hour < 10) {
      hour = '0' + hour
    }
    let minute = Time.getMinutes()
    if (minute % 10 !== 0) {
      minute = Math.ceil(minute / 10) * 10
    }

    // 分
    let mins = []
    for (let i = 0; minute < 41; i++) {
      minute = minute + 10
      mins.push(minute)
    }
    // 小时
    let hours = []
    let length = mins.length
    if (length === 0) {
      hour++
      mins = ['00', '10', '20', '30', '40', '50']
    }
    let a1 = 1
    let a2 = 2
    if (hour < 8) {
      mins = ['00', '10', '20', '30', '40', '50']
      hours = ['08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20']
    } else if (hour > 7 && hour < 21) {
      for (let i = 0; hour < 21; i++) {
        hours.push(hour)
        hour++
      }
    } else if (hour >= 21) {
      date++
      mins = ['00', '10', '20', '30', '40', '50']
      hours = ['08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20']
      a1++
      a2++
    }
    // 日期
    const nowTime = month + '-' + date
    // 获取下一天或者下两天
    let d = new Date();
    d.setDate(d.getDate() + a1);
    let d1 = d.getDate();
    if (date > 20 && d1 < 10) {
      month++
      if (month === 13) {
        month = '01'
      }
      var nextTime0 = month + '-' + '0' + d1
      if (month === '01') {
        month = 12
      } else {
        month--
      }
    } else {
      if (d1 < 10) {
        d1 = '0' + d1
      }
      var nextTime0 = month + '-' + d1
    }

    let dd = new Date();
    dd.setDate(dd.getDate() + a2);
    let dd2 = dd.getDate();
    if (date > 20 && dd2 < 10) {
      month++
      if (month === 13) {
        month = '01'
      }
      var nextTime1 = month + '-' + '0' + dd2
      if (month === '01') {
        month = 12
      } else {
        month--
      }
    } else {
      if (dd2 < 10) {
        dd2 = '0' + dd2
      }
      var nextTime1 = month + '-' + dd2
    }

    const year = Time.getFullYear()
    return {
      year,
      hours,
      mins,
      nowTime,
      nextTime0,
      nextTime1,
    }
  }

  // 第一列日期
  newTime(date, month) {
    date++
    return month + '-' + date
  }
}
  • 效果图:

image.png

  1. 应该把共用的函数抽离出来封装好,直接调用
  2. 对公共数据,token等 全局状态管理 globalData 或者引入其他库

踩坑

  1. 路径问题:在app.js中引入js文件夹 不能../ 会报错,路由跳转也是会存在路径问题
  2. 组件改样式,找对class 对好多样式更改花了比较长时间

image.png

  • 比如更改单选多选的样式,注意查看文档,要加样式在view中class{{''?'',''}}响应式选择是否加上这个class类

新手一枚~慢慢记录 还有很多不足