一、配置相关

1、 暂时还没有转发到朋友圈的 api，可以通过 canvas 绘制图片 保存到用户相册，用户通过小程序码自行分享到朋友圈的方式实现，git 上有一个比较成熟的组件；

2、 微信开发工具有时会抽风，处理方式是清除缓存 => 重启；

3、 在 request 之前，确保服务器域名配置跟 request 的域名一致，不然会报 403 错误；

4、调用 getUserInfo 若是发现数据不对，调用 getSetting 看看用户有没授权

二、组件相关

1、自定义 tabBar

(1) 在项目根目录新建 custom-tab-bar 组件，这里我放到 components 目录下一直无效，折腾了一会发现必须要放在根目录下。

(2) tabBar 配置项，开启 cunstom: true

(3) 对应的 page 在 onShow 阶段调用 getTabBar 方法，selected 为当前 tab 的索引：

onShow() {
  if (typeof this.getTabBar === 'function' &&
      this.getTabBar()) {
    this.getTabBar().setData({
      selected: 0
    })
  }
}

(4) 自定义 tabBar 组件调用 switchtab 切换 tab

switchTab(e) {
  const data = e.currentTarget.dataset
  const url = data.path
  wx.switchTab({ url })
  this.selected = data.index
}

三、网络请求

写惯了 axios， 小程序的网络请求模块用着总是不是那么顺手，来封装一层吧，我们可以通过调用 get，post 去获取数据，并且可以在这一层做一些预处理的事情，比如设置必须的参数，参数加密等

export default {
  get (config) {
    this.pre(config)
    config.method = 'get'
    wx.request(config)
  },
  postJson (config) {
    this.pre(config)
    config.method = 'post'
    config.header['content-type'] = 'application/json'
    wx.request(config)
  },
  post (config) {
    this.pre(config)
    config.method = 'post'
    config.header['content-type'] = 'application/x-www-form-urlencoded'
    wx.request(config)
  },
  pre (config) {
    config.header = config.header || {}

    let success = function () { }
    if (config.success) {
      success = config.success
    }
    let fail = function () { }
    if (config.fail) {
      fail = config.fail
    }
    config.success = function (resp) {
      success(resp.data)
    }
    config.fail = function () {
      wx.showToast({
        title: '系统错误',
        icon: 'none'
      })
      fail()
    }
  }
}

这样，用起来就很方便了

四、其他奇怪的问题

1、函数传参

函数传参传对象的时候，是个拷贝值，跟原始的对象不一致，所以在修改某个参数的状态时，最好用原始值修改，示例：

<div
  v-for="(item, i) in items"
  :key="i">
  <rb-button
  :type="item.isQuot ? 'error' : 'primary'"
  :styles="quotStyle"
  @tap="quot(item,index)"
  >{{ item.isQuot ? '移除' : '引用' }}</rb-button>
</div>
quot(item, i) {
  console.log(item === this.courseList[i]) // false
  item.isQuot = !item.isQuot //无效
  if (this.courseList[i]) {
    this.courseList[i].isQuot = !this.courseList[i].isQuot // 有效
  }
}

2、日期转时间戳的正确姿势

小程序的日期转时间戳不支持 2020-10-12 这种格式，需要转为成 2020/10/12 这样才能正常的解析，所以在日期转时间戳的时候得这么写：

const str = '2020-10-12'
const newDateStr = str.replace(/\-/g, '/')
const date = new Date(newDateStr)

3、属性值和文本

(1) 属性不支持三元表达式

(2) 文本数据支持三元表达式但是不支持函数，可以通过 wxs 扩展

4、button 去不掉 border 怎么办

有一个 button,控制台也没看到有 border 设置，但就是一直存在，设置了 border:none 也没用，查了下资料发现，这是小程序自己在 button::after 里面加了个 border 设置，去掉即可