总结微信小程序遇到的坑

问题一：open-data的用户头像显示为圆形

display: block;  // 重点
overflow: hidden;  // 重点
width: 120rpx;
height: 120rpx;
border-radius: 50%;

问题二：设置input的placeholder样式

在input框多加placeholder-class

<input placeholder-class="phcolor" placeholder="邮箱" type="text" /></view>

问题三：slot

为了避免踩更多的坑，最好先看一下官网关于组件slot的介绍：官网slot介绍
需要多个slot的话，要在组件的js进行配置

options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  }

现在来看具体的用法

• 组件的js

properties: {
    age: Number, // 设置属性
    name: { // 设置属性
      type: String,
      value: 'zhangsan' // 两种形式都可以，但是这种方式更好一些，可以设置默认值，如果不传的话
    }
  }

• 组件的wxml

<view>年龄：{{age}}</view>
<view>姓名：{{name}}</view>

• 页面wxml

<myCom age="999" name="lisi"></myCom>

• 页面的json

{
  "usingComponents": {
    "myCom": "/components/myCom/myCom"
  }
}

• 页面展示

问题四：thirdScriptError

Cannot read property ‘setData’ of undefined;at api openAddress success callback function
TypeError: Cannot read property ‘setData’ of undefined

被自己蠢哭的一个问题，还纠结了老久，去百度了好久，也没找到合适的解决方案，后面问了大神，就被鄙视了，因为犯了很低级的问题。

• 代码之前是这么写的

handleAddress: function () {
    wx.chooseAddress({
      success (res) {
      	let self = this // 重点，位置问题
        let tempAddress = `${res.provinceName} ${res.cityName} ${res.detailInfo}`
        let address = 'userInfo.address'
        self.setData({
          [address]: tempAddress
        })
      }
    })
  }

因为把let self = this这个位置放错地方，对this的绑定原理还是了解不够透彻呀

• 之后

handleAddress: function () {
    let self = this // 重点
    wx.chooseAddress({
      success (res) {
        let tempAddress = `${res.provinceName} ${res.cityName} ${res.detailInfo}`
        let address = 'userInfo.address'
        self.setData({
          [address]: tempAddress
        })
      }
    })
  }

• 如果用的是箭头函数，就不用考虑箭头指向问题了

handleAddress: function () {
    wx.chooseAddress({
      success: (res) => {
        let tempAddress = `${res.provinceName} ${res.cityName} ${res.detailInfo}`
        let address = 'userInfo.address'
        this.setData({
          [address]: tempAddress
        })
      }
    })
  }