小程序开发

1. css设置z-index不生效：让z-index起作用有个小小前提，就是元素的position属性要是relative，absolute或是fixed。
2. 条件渲染样式
   :class=“isAllocate ? ‘scroll’ : ‘scroll-view’”
   :class="[{‘left’: index == 0}, {‘right’: index === dateClass -1}]"
3. 微信小程序placeholder设置自定义颜色

4. 小程序原生组件不支持:nth-child()伪类
5. text标签不可以滚动，需要滚动使用 scroll-view
6. box-image和box-radius同时出现
   方法一：

.border {
    position: relative;
    border: 4px solid transparent;
    border-radius: 16px;
    background: linear-gradient(orange, violet);
    background-clip: padding-box;
    padding: 10px;
  }

  .border::after {
    position: absolute;
    top: -4px;
    bottom: -4px;
    left: -4px;
    right: -4px;
    background: linear-gradient(red, blue);
    content: '';
    z-index: -1;
    border-radius: 16px;
  }

方法二：在当前div外面包裹一层div

.one {
    width: 300px;
    height: 100px;
    border-radius: 25px;
    overflow: hidden;
  }

  .box {
    border: 30px solid;
    border-image: linear-gradient(red, yellow) 10;
  }

7. mpvue要善用watch（监听属性）和computed（计算属性，变量不用再data中定义）方法
8. 去除小程序button的默认边框

button::after{
border:none;
}

9. 上传文件到服务器 uploadFile()
   请求相关后台api需要在请求头中设置authorization进行授权

static uploadFile (filePath) {
    if (this.isWx) {
      return new Promise((resolve, reject) => {
        wx.uploadFile({
          url: config.baseURL + 'bc/v1/storage',
          filePath,
          header: {
            authorization: this.getStorageSync(`token`)
          },
          name: 'file',
          success (res) {
            resolve(JSON.parse(res.data))
          },
          fail (err) {
            reject(err)
          }
        })
      })
    }
  }